Three.js DevTools MCP MCP Server

Name: Three.js DevTools MCP MCP Server
Author: io.github.DmitriyGolub

io.github.DmitriyGolub/threejs-devtools

Repository Registry

What is the Three.js DevTools MCP MCP server?

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

How to install Three.js DevTools MCP

Copy-paste configuration for popular MCP clients.

transport: stdio

Config generated by PluginBench — verify against the source before use.

Environment / auth

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

Claude Desktop

~/Library/Application Support/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "threejs-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "threejs-devtools-mcp"
      ],
      "env": {
        "DEV_PORT": "<YOUR_DEV_PORT>",
        "BRIDGE_PORT": "<YOUR_BRIDGE_PORT>",
        "BROWSER": "<YOUR_BROWSER>",
        "HEADLESS": "<YOUR_HEADLESS>",
        "CHROME_PATH": "<YOUR_CHROME_PATH>"
      }
    }
  }
}

Cursor

~/.cursor/mcp.json

{
  "mcpServers": {
    "threejs-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "threejs-devtools-mcp"
      ],
      "env": {
        "DEV_PORT": "<YOUR_DEV_PORT>",
        "BRIDGE_PORT": "<YOUR_BRIDGE_PORT>",
        "BROWSER": "<YOUR_BROWSER>",
        "HEADLESS": "<YOUR_HEADLESS>",
        "CHROME_PATH": "<YOUR_CHROME_PATH>"
      }
    }
  }
}

Windsurf

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "threejs-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "threejs-devtools-mcp"
      ],
      "env": {
        "DEV_PORT": "<YOUR_DEV_PORT>",
        "BRIDGE_PORT": "<YOUR_BRIDGE_PORT>",
        "BROWSER": "<YOUR_BROWSER>",
        "HEADLESS": "<YOUR_HEADLESS>",
        "CHROME_PATH": "<YOUR_CHROME_PATH>"
      }
    }
  }
}

VS Code

.vscode/mcp.json

{
  "servers": {
    "threejs-devtools": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "threejs-devtools-mcp"
      ],
      "env": {
        "DEV_PORT": "<YOUR_DEV_PORT>",
        "BRIDGE_PORT": "<YOUR_BRIDGE_PORT>",
        "BROWSER": "<YOUR_BROWSER>",
        "HEADLESS": "<YOUR_HEADLESS>",
        "CHROME_PATH": "<YOUR_CHROME_PATH>"
      }
    }
  }
}

Claude Code

claude mcp add threejs-devtools --env DEV_PORT=<YOUR_DEV_PORT> --env BRIDGE_PORT=<YOUR_BRIDGE_PORT> --env BROWSER=<YOUR_BROWSER> --env HEADLESS=<YOUR_HEADLESS> --env CHROME_PATH=<YOUR_CHROME_PATH> -- npx -y threejs-devtools-mcp