Three.js 3D Viewer MCP Server

Three.js 3D Viewer is an example MCP server in the official modelcontextprotocol/ext-apps repository. It demonstrates the MCP Apps protocol by rendering interactive 3D scenes inline in compatible chat hosts (Claude, ChatGPT, VS Code, Goose, etc.). When the agent calls the tool, the server returns a sandboxed iframe that executes Three.js JavaScript and shows the resulting scene in real time as code streams.

The server exposes two tools: show_threejs_scene, which executes user-supplied JavaScript against a pre-configured Three.js environment, and learn_threejs, which returns Three.js API reference snippets and example code. Generated scenes get a ready-to-use canvas with helpful globals already wired up: THREE, canvas, width, height, OrbitControls, EffectComposer, RenderPass, and UnrealBloomPass. Animation pauses automatically when the embed scrolls out of view via IntersectionObserver, and the renderer supports alpha transparency for clean embedding.

This is an official Anthropic/MCP-org reference implementation rather than a production design tool. It is intended to showcase how MCP servers can ship rich interactive UIs (3D viewports, design canvases) directly into a conversation, and serves as a starter for building similar WebGL or graphics-focused MCP apps.

Tools

Prerequisites

• Node.js and npm installed
• An MCP client that supports the MCP Apps protocol (interactive iframe UIs). Examples called out by the project include Claude, ChatGPT, VS Code, Goose, and Postman.

Install via npm registry

Add the server to your MCP client config (Claude Desktop, Cursor, etc.):

{
  "mcpServers": {
    "threejs": {
      "command": "npx",
      "args": [
        "-y",
        "--silent",
        "--registry=https://registry.npmjs.org/",
        "@modelcontextprotocol/server-threejs",
        "--stdio"
      ]
    }
  }
}

Local development setup

Clone the ext-apps repo and run the example directly:

git clone https://github.com/modelcontextprotocol/ext-apps.git
cd ext-apps/examples/threejs-server
npm install
npm run start:stdio   # stdio transport
# or
npm run start:http    # HTTP transport

Then point your client at the local build:

{
  "mcpServers": {
    "threejs": {
      "command": "bash",
      "args": [
        "-c",
        "cd ~/code/ext-apps/examples/threejs-server && npm run build >&2 && node dist/index.js --stdio"
      ]
    }
  }
}

Notes

• The rendered scene appears inline in the chat host as a sandboxed iframe. Hosts that do not implement the MCP Apps UI extension will not display the 3D viewport.
• No API keys or auth are required.

• Prototype WebGL scenes (lights, materials, geometries, post-processing) by describing them in natural language and seeing the result render inline.
• Teach or learn Three.js concepts interactively by combining learn_threejs lookups with live show_threejs_scene previews.
• Quickly mock up 3D product visualizations, data viz, or shader experiments without spinning up a separate web project.
• Iterate on camera and OrbitControls behavior, bloom effects, and render passes using the pre-wired globals.
• Serve as a reference implementation for building your own MCP App that ships an interactive canvas or design surface.

• "Show me a rotating low-poly planet with two moons and soft bloom."
• "Render a scene with 100 instanced cubes arranged in a spiral and an orbiting camera."
• "Look up how PBR materials work in Three.js, then build a metallic sphere on a reflective ground plane."
• "Add UnrealBloomPass to my current scene and crank up the threshold so only the sun glows."
• "Create a wireframe torus knot I can orbit around with the mouse."

• Official example maintained inside the modelcontextprotocol GitHub org, so it tracks the MCP Apps spec.
• Pre-wired Three.js environment (OrbitControls, EffectComposer, bloom) means the model can produce useful scenes with very little boilerplate.
• Streaming code preview makes iteration feel immediate; scenes update as the model writes.
• No authentication or external API keys required.

• Requires an MCP host that implements the MCP Apps UI extension. Plain MCP clients without iframe rendering will not show the 3D viewport.
• It is an example/reference server, not a full design or asset-pipeline tool. There is no scene persistence, asset loader UI, or export workflow built in.
• Executes model-generated JavaScript in a sandboxed iframe; users should still review code for anything beyond local prototyping.

• basementstudio/mcp-three: MCP server focused on GLTF/GLB models and converting them to React Three Fiber components.
• Flux159/mcp-game-asset-gen: Asset generation MCP server for Three.js and game engines (images, audio, 3D models).
• locchung/three-js-mcp: Community MCP server for basic Three.js source code control.