Three.js DevTools MCP — Claude Code MCP server: setup guide
Connects coding agents to active Three.js scenes for live material tweaks, mesh debugging, and automated code updates right from the browser.
claude mcp add --env DEV_PORT=<DEV_PORT> --env BRIDGE_PORT=<BRIDGE_PORT> --env BROWSER=<BROWSER> --env HEADLESS=<HEADLESS> --env CHROME_PATH=<CHROME_PATH> --transport stdio threejs-devtools-mcp -- npx -y threejs-devtools-mcpWhat Three.js DevTools MCP does
The server links your assistant to a running web app using a WebSocket bridge on port localhost:9222. It inspects package.json to detect local dev ports and auto-injects the bridge into your page. Both vanilla Three.js and React Three Fiber run smoothly on WebGL and WebGPU renderers without modifying project dependencies.
Workflows clearly separate live experimentation from source edits. You can preview lighting tweaks, inspect bounding boxes, or run web_audit to catch idle rendering loops and excessive draw calls. Once a look is settled, the pending_changes tool produces copy-paste snippets or lets the agent write the updates directly into your files.
Closing the browser tab terminates the WebSocket connection, stopping all inspection tools instantly. For video export workflows with capture_frames, a local ffmpeg binary must be available on your system.
What it helps with
- inspect object hierarchies to find invisible or misconfigured meshes
- tweak lighting and shader parameters live before updating project files
- convert verified visual adjustments directly into React Three Fiber code
- audit web scenes for oversized textures and unnecessary draw calls
- export frame sequences at fixed framerates for video rendering
Example prompts for the agent
- Inspect the scene tree and explain why the main character mesh is hidden
- Adjust the ambient light intensity and show a live preview in the browser
- Run a web performance audit on the canvas and extract pending code changes
How to install Three.js DevTools MCP
Platform CLI
claude mcp add --env DEV_PORT=<DEV_PORT> --env BRIDGE_PORT=<BRIDGE_PORT> --env BROWSER=<BROWSER> --env HEADLESS=<HEADLESS> --env CHROME_PATH=<CHROME_PATH> --transport stdio threejs-devtools-mcp -- npx -y threejs-devtools-mcpReplace <…> with your own values
Platform CLI
codex mcp add threejs-devtools-mcp --env DEV_PORT=<DEV_PORT> --env BRIDGE_PORT=<BRIDGE_PORT> --env BROWSER=<BROWSER> --env HEADLESS=<HEADLESS> --env CHROME_PATH=<CHROME_PATH> -- npx -y threejs-devtools-mcpReplace <…> with your own values
Config file
{
"mcpServers": {
"threejs-devtools-mcp": {
"command": "npx",
"args": [
"-y",
"threejs-devtools-mcp"
],
"env": {
"DEV_PORT": "<DEV_PORT>",
"BRIDGE_PORT": "<BRIDGE_PORT>",
"BROWSER": "<BROWSER>",
"HEADLESS": "<HEADLESS>",
"CHROME_PATH": "<CHROME_PATH>"
}
}
}
}Replace <…> with your own values
Config file
{
"servers": {
"threejs-devtools-mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"threejs-devtools-mcp"
],
"env": {
"DEV_PORT": "<DEV_PORT>",
"BRIDGE_PORT": "<BRIDGE_PORT>",
"BROWSER": "<BROWSER>",
"HEADLESS": "<HEADLESS>",
"CHROME_PATH": "<CHROME_PATH>"
}
}
}
}Replace <…> with your own values
Platform CLI
gemini mcp add -e DEV_PORT=<DEV_PORT> -e BRIDGE_PORT=<BRIDGE_PORT> -e BROWSER=<BROWSER> -e HEADLESS=<HEADLESS> -e CHROME_PATH=<CHROME_PATH> threejs-devtools-mcp npx -y threejs-devtools-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.js DevTools MCP
How do I install Three.js DevTools MCP in Claude Code?
Run claude mcp add threejs-devtools -- npx -y threejs-devtools-mcp in your terminal.
What does Three.js DevTools MCP do?
It provides a bridge between AI coding tools and running Three.js or React Three Fiber scenes. The agent can read scene graphs, alter properties in real time, and write adjustments back to your source files.
Do I need to modify my codebase to use this server?
No code adjustments are required. The server connects through an injected browser bridge while your dev server runs.
