three.ws Assistant Widget — Claude Code MCP server: how to install
Generates embed snippets for an interactive 3D avatar chatbot directly in agent chat. Produces <script> tags, iframe links, and JavaScript snippets.
claude mcp add --env THREE_WS_BASE=<THREE_WS_BASE> --transport stdio assistant-mcp -- npx -y @three-ws/assistant-mcpWhat three.ws Assistant Widget does
The server provides two tools: build_assistant_widget and list_assistant_options. When given layout, voice, and theme choices, it outputs an embed tag for <script> tags, a direct URL for <iframe> elements, and code for ThreeAssistant.init(). The second tool exposes built-in 3D characters, color presets, and interaction modes.
All generation logic runs locally on your machine without outbound network calls or API keys. Input validation ensures that unsupported hex codes or oversized text inputs fall back to preset defaults rather than throwing errors. You can redirect the target endpoint by setting the THREE_WS_BASE environment variable.
What it helps with
- generate
<script>embed markup for a 3D corner assistant - build standalone frame URLs for
<iframe>integrations - inspect available character models and color presets
- create initialized
ThreeAssistant.init()JavaScript snippets
Example prompts for the agent
- Generate widget embed code with
/avatars/selfie-girl.glb, ocean background, and left alignment - List all available assistant avatars and background presets via the MCP tools
- Build an iframe assistant embed that supports speech and text modes
How to install three.ws Assistant Widget
Platform CLI
claude mcp add --env THREE_WS_BASE=<THREE_WS_BASE> --transport stdio assistant-mcp -- npx -y @three-ws/assistant-mcpReplace <…> with your own values
Platform CLI
codex mcp add assistant-mcp --env THREE_WS_BASE=<THREE_WS_BASE> -- npx -y @three-ws/assistant-mcpReplace <…> with your own values
Config file
{
"mcpServers": {
"assistant-mcp": {
"command": "npx",
"args": [
"-y",
"@three-ws/assistant-mcp"
],
"env": {
"THREE_WS_BASE": "<THREE_WS_BASE>"
}
}
}
}Replace <…> with your own values
Config file
{
"servers": {
"assistant-mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@three-ws/assistant-mcp"
],
"env": {
"THREE_WS_BASE": "<THREE_WS_BASE>"
}
}
}
}Replace <…> with your own values
Platform CLI
gemini mcp add -e THREE_WS_BASE=<THREE_WS_BASE> assistant-mcp npx -y @three-ws/assistant-mcpReplace <…> with your own values
Step by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about three.ws Assistant Widget
How to install three.ws Assistant Widget in Claude Code?
Run claude mcp add assistant-widget -- npx -y @three-ws/assistant-mcp. If you need an environment variable, use claude mcp add --env THREE_WS_BASE=<THREE_WS_BASE> --transport stdio assistant-mcp -- npx -y @three-ws/assistant-mcp.
What outputs does build_assistant_widget produce?
It outputs an HTML <script> tag with data attributes, an <iframe> link, and a ThreeAssistant.init() JavaScript snippet matching your configuration.
Does the server require an active network connection?
No, the tool builds and validates strings purely offline without calling remote endpoints or requiring authorization keys.
