Three.Js DevTools MCP
Debug Three.js scenes from your agent by inspecting and editing materials, shaders, lights, and scene graph in real time through a browser bridge.
Overview
Three.js DevTools MCP is an MCP server for the Build phase that lets AI agents inspect and edit live Three.js scenes, materials, shaders, and lights in real time.
What is this MCP server?
- Real-time inspect and edit of Three.js scenes, materials, shaders, and lights from MCP agents
- Auto-detects dev port from package.json or DEV_PORT; BRIDGE_PORT default 9222
- Browser modes: auto-open, BROWSER=none, HEADLESS=true for CI, custom CHROME_PATH
- Stdio MCP via npx threejs-devtools-mcp 0.2.1
- Package version 0.2.1
- Default bridge port 9222 documented in server.json
Community signal: 64 GitHub stars.
What problem does it solve?
Agents cannot see your running WebGL scene, so Three.js material and shader fixes turn into slow guess-and-refresh loops.
Who is it for?
Indie devs building Three.js web experiences who want agent-assisted live debugging with familiar Chrome dev bridging.
Skip if: Non-Three stacks, native Unity/Unreal workflows, or teams that forbid local browser automation.
What do I get? / Deliverables
With the bridge running, your agent edits scene objects in real time against the proxied dev server, including headless CI when HEADLESS=true.
- Live MCP tools over proxied Three.js runtime
- Faster shader/material/light iteration without manual devtools-only sessions
Recommended MCP Servers
Journey fit
Interactive 3D web work is core build frontend, but live scene inspection also supports ship perf tuning and operate iteration on visual bugs. frontend is canonical because the server targets Three.js dev servers, bridge proxy ports, and in-browser scene manipulation.
How it compares
Browser-linked Three.js MCP debugger, not a generic DOM scraper or static AST linter.
Common Questions / FAQ
Who is Three.Js DevTools MCP for?
Frontend and creative-coding solo builders using Three.js who already run MCP agents and local dev servers.
When should I use Three.Js DevTools MCP?
Use it while building or polishing 3D web apps whenever you need live scene, material, shader, or light edits from the agent.
How do I add Three.Js DevTools MCP to my agent?
Register stdio MCP (npx threejs-devtools-mcp), set DEV_PORT if needed, configure BRIDGE_PORT/HEADLESS, then point the server at your running Three.js dev app.