Three.js DevTools MCP

Developer Tools npm v0.2.1

Inspect and edit Three.js scenes, materials, shaders, lights in real time from any AI agent

View source ↗ Website ↗ Generate config for multiple servers More servers

Install

Pin version registry version 0.2.1

npm
npx -y threejs-devtools-mcp

npm
npx -y threejs-devtools-mcp@0.2.1

Setup by client

Pick your client — the config below is generated for this server (local stdio). Copy respects the “Pin version” switch above.

claude_desktop_config.json

{
  "mcpServers": {
    "threejs-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "threejs-devtools-mcp"
      ]
    }
  }
}

{
  "mcpServers": {
    "threejs-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "threejs-devtools-mcp@0.2.1"
      ]
    }
  }
}

Format verified against the official Claude Desktop docs ↗.

terminal

claude mcp add threejs-devtools -- npx -y threejs-devtools-mcp

claude mcp add threejs-devtools -- npx -y threejs-devtools-mcp@0.2.1

Format verified against the official Claude Code docs ↗.

.cursor/mcp.json

{
  "mcpServers": {
    "threejs-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "threejs-devtools-mcp"
      ]
    }
  }
}

{
  "mcpServers": {
    "threejs-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "threejs-devtools-mcp@0.2.1"
      ]
    }
  }
}

Format verified against the official Cursor docs ↗.

.vscode/mcp.json

{
  "servers": {
    "threejs-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "threejs-devtools-mcp"
      ]
    }
  }
}

{
  "servers": {
    "threejs-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "threejs-devtools-mcp@0.2.1"
      ]
    }
  }
}

Format verified against the official VS Code docs ↗.

mcp_config.json

{
  "mcpServers": {
    "threejs-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "threejs-devtools-mcp"
      ]
    }
  }
}

{
  "mcpServers": {
    "threejs-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "threejs-devtools-mcp@0.2.1"
      ]
    }
  }
}

Format verified against the official Windsurf docs ↗.

Environment variables

Defined in the server's official registry manifest. Required secrets are shown as <YOUR_…> placeholders in the configs above.

DEV_PORT — Dev server port to proxy (auto-detected from package.json if not set)
BRIDGE_PORT — Bridge proxy port (default: 9222)
BROWSER — Set to 'none' to disable auto-opening browser
HEADLESS — Set to 'true' for headless browser mode (CI)
CHROME_PATH — Custom Chrome/Edge executable path

GitHub

⭐ 119 stars · 最近更新于 205 天前 · MIT license

About this server

threejs devtools mcp MCP 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. Zero changes to your project. Works with vanilla Three.js, React Three Fiber, a…

Summary from the project README — github.com/DmitriyGolub/threejs-devtools-mcp

Distributed as npm, listed under Developer Tools. Review our MCP security guide before granting access to real data.

Frequently asked questions

What does the Three.js DevTools MCP MCP server do?

How do I install Three.js DevTools MCP?

Run the install command shown above, then paste the config for your client (Claude Desktop, Claude Code, Cursor, VS Code or Windsurf) into its MCP settings and restart the client.

Is Three.js DevTools MCP free to use?

The MCP server itself is free to install. The source is public on https://github.com/DmitriyGolub/threejs-devtools-mcp. Any third-party service it calls may require its own API key and account.

Which clients support Three.js DevTools MCP?

Any MCP-compatible client can use it, including Claude Desktop, Claude Code, Cursor, VS Code, Windsurf and custom agents.

Add this badge

Publish this server? Link back with a badge on your README or site — copy either snippet.

Markdown

[![Listed on MCPNav](https://mcpnav.net/badge/threejs-devtools.svg)](https://mcpnav.net/server/threejs-devtools/)

HTML

<a href="https://mcpnav.net/server/threejs-devtools/"><img src="https://mcpnav.net/badge/threejs-devtools.svg" alt="Listed on MCPNav" height="20"></a>