{
  "markdown": "# threejs-devtools-mcp\n\n[![npm version](https://img.shields.io/npm/v/threejs-devtools-mcp)](https://www.npmjs.com/package/threejs-devtools-mcp)\n[![license](https://img.shields.io/npm/l/threejs-devtools-mcp)](LICENSE)\n[![build](https://github.com/DmitriyGolub/threejs-devtools-mcp/actions/workflows/ci.yml/badge.svg)](https://github.com/DmitriyGolub/threejs-devtools-mcp/actions)\n[![MCP Registry](https://img.shields.io/badge/MCP-Registry-blue)](https://mcp-marketplace.io/server/io-github-dmitriygolub-threejs-devtools)\n\nMCP server for inspecting and modifying Three.js scenes in real time — **59 tools** for objects, materials, shaders, textures, animations, performance monitoring, memory diagnostics, and code generation.\n\n**Zero changes to your project.** Works with vanilla Three.js, React Three Fiber, and any framework.\n\n![Annotated screenshot](docs/images/annotated.png)\n\n## Setup\n\n### 1. Add the MCP server\n\n<details open>\n<summary><strong>Claude Code</strong></summary>\n\n```bash\nclaude mcp add threejs-devtools-mcp -- npx threejs-devtools-mcp\n```\n\n</details>\n\n<details>\n<summary><strong>Claude Desktop</strong></summary>\n\nAdd to `claude_desktop_config.json`:\n\n```json\n{\n  \"mcpServers\": {\n    \"threejs-devtools-mcp\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"threejs-devtools-mcp\"]\n    }\n  }\n}\n```\n\n</details>\n\n<details>\n<summary><strong>Cursor</strong></summary>\n\nAdd to `.cursor/mcp.json` in your project:\n\n```json\n{\n  \"mcpServers\": {\n    \"threejs-devtools-mcp\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"threejs-devtools-mcp\"]\n    }\n  }\n}\n```\n\nOr use the HTTP transport — see [Cursor setup guide](docs/cursor-setup.md).\n\n</details>\n\n<details>\n<summary><strong>Windsurf</strong></summary>\n\nAdd to `~/.codeium/windsurf/mcp_config.json`:\n\n```json\n{\n  \"mcpServers\": {\n    \"threejs-devtools-mcp\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"threejs-devtools-mcp\"]\n    }\n  }\n}\n```\n\n</details>\n\n<details>\n<summary><strong>VS Code (Copilot)</strong></summary>\n\nAdd to `.vscode/mcp.json`:\n\n```json\n{\n  \"servers\": {\n    \"threejs-devtools-mcp\": {\n      \"command\": \"npx\",\n      \"args\": [\"-y\", \"threejs-devtools-mcp\"]\n    }\n  }\n}\n```\n\n</details>\n\n<details>\n<summary><strong>OpenCode</strong></summary>\n\nAdd to `opencode.json` in your project:\n\n```json\n{\n  \"$schema\": \"https://opencode.ai/config.json\",\n  \"mcp\": {\n    \"threejs-devtools-mcp\": {\n      \"type\": \"local\",\n      \"command\": [\"npx\", \"-y\", \"threejs-devtools-mcp\"],\n      \"enabled\": true\n    }\n  }\n}\n```\n\n</details>\n\n### 2. Start your dev server and open the browser\n\nStart your Three.js dev server as usual (`npm run dev`). The MCP server auto-detects the port from `package.json` and opens a browser at `localhost:9222` with the devtools bridge injected.\n\n> **Keep the browser tab open.** The MCP server talks to your scene through a WebSocket bridge. Close the tab = tools stop working.\n\n### 3. Ask the AI about your scene\n\n```\n\"show me the scene tree\"\n\"why is my model invisible?\"\n\"make the car red\"\n\"check for memory leaks\"\n\"what's my FPS?\"\n\"generate a React component from character.glb\"\n```\n\n## In-browser overlay\n\nA built-in devtools panel with live performance stats, interactive scene graph, material editor, and 3D object preview. Activated automatically or via the `toggle_overlay` tool.\n\n![Overlay panel](docs/images/example.png)\n\n## Tip: name your objects\n\nUnnamed objects show as `(unnamed)` in the scene tree. Named objects are easier to find and modify:\n\n```js\n// Three.js\nmesh.name = \"player\";\n```\n\n```jsx\n// React Three Fiber\n<mesh name=\"player\" geometry={geometry} material={material} />\n```\n\n## Documentation\n\n- [Tools reference](docs/tools.md) — all 59 tools with parameters\n- [Advanced setup](docs/advanced.md) — animations, scene export, configuration, transports\n- [Cursor setup](docs/cursor-setup.md) — step-by-step guide for Cursor\n- [Token-efficient workflow](docs/workflow.md) — best practices for saving context\n\n## License\n\nMIT\n",
  "bytes": 3930,
  "sha": "55f324d4b9a675abc36a15a12713e5f36f7630d0761c4e937bd456d593fa7c09",
  "repo_slug": "dmitriygolub/threejs-devtools-mcp",
  "fonte": "repo",
  "truncated": false,
  "api": "https://agentalog.com/api/listings/mcp_io_github_dmitriygolub_threejs_devtools_0dadbf82/readme"
}