threejs-devtools-mcp
An agent inspects a live Three.js scene, tries material and light tweaks in the browser and writes the accepted ones into source.
- 130 ★ on the repository
- Last commit
- MIT
Extended access
Why this level
- Opens a browser with a bridge and controls the project page on localhost.
- Transfers accepted tweaks into source code, so review file changes in the diff.
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add mcp/threejs-devtools-mcpDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewExtended accessThe tool runs code or makes network calls and only reads external data.
- Opens a browser with a bridge and controls the project page on localhost.
- Transfers accepted tweaks into source code, so review file changes in the diff.
This is third-party code. Review the repository files before installing.
What it does
An MCP server with 69 tools attaches to your running Three.js scene through a WebSocket bridge. The project needs no changes. It handles vanilla Three.js and React Three Fiber, on WebGLRenderer and WebGPURenderer. Tools are split by what they do to code. Inspection (`scene_tree`, `material_details`, screenshots) touches nothing. Live preview (`set_material_property`, `set_light`, `set_camera`) changes only the open page and disappears on reload. `pending_changes` gathers all previews into before and after pairs with ready code for both variants, and `revert_changes` undoes them in the browser. Separately, `web_audit` checks for a blurry canvas, idle rendering, heavy textures, expensive shadows and draw-call counts, and `capture_frames` records frame sequences for clips together with an `ffmpeg` command.
Who it is for. Frontend and 3D developers on Three.js who tune materials, lights and camera with an agent and do not want to round-trip every attempt through code.
Good fit when
- A model is invisible in the scene and the cause is somewhere between camera, material and scale.
- A car material should be tried in red and only the preferred variant kept.
- A WebGL site is audited before release: texture sizes, shadows, draw calls.
- A promo clip needs a frame-by-frame capture of the scene at 30 or 60 fps.
- A loaded glTF model is converted to a React Three Fiber component with `gltf_to_r3f`.
Not a fit when
- The scene is not Three.js: the server works only with its objects.
- A 3D model has to be generated from text or a photo instead of debugging an existing scene.
- The project tab cannot stay open, and the bridge works only while it is alive.
Example request
Show the scene tree, explain why the car model is invisible and try the body in red without saving.MCP
- Transport
- stdio, http
- Authentication
- not required
Environment variables
HEADLESS- Runs Chrome without a window in the mode where the server launches the browser.
CDP_PORT- Chrome debugging port, used to share the browser with Playwright MCP.
Limitations
The browser tab with the project must stay open: closing it stops the tools from responding. You start the dev server yourself, while the MCP server detects the port from `package.json` and opens the bridge page at `localhost:9222`. Unnamed objects show as `(unnamed)`, so it helps to set `mesh.name` in code. Live tweaks vanish on page reload until you ask for them to be written into code. The package version at review time is 0.5.0, so the tool interface may change. One author maintains the project.
How to disable. Run `claude mcp remove threejs-devtools-mcp` or delete the entry from the client configuration, then close the bridge tab.
FAQ
How do I install threejs-devtools-mcp in Claude Code?
Run `claude mcp add threejs-devtools-mcp -- npx threejs-devtools-mcp`, start the project dev server and keep the tab at `localhost:9222` open.
What if the tools stop responding?
The bridge tab is most likely closed. Open the project page again and wait for the connection: the link to the page runs over a WebSocket.
How do changes reach the source code?
After a live preview the agent calls `pending_changes`, gets before and after pairs with ready code, then writes the chosen ones into files. Saying "keep it" in the request triggers the same transfer.
Does the server work with Playwright?
Yes. It can attach to your own browser, to a Chrome launched by the server (`HEADLESS`, `CDP_PORT`), or from tests through `threejs-devtools-mcp/playwright`.
Which agents are supported?
The README has setup for Claude Code, Claude Desktop, Cursor, Windsurf, VS Code with Copilot and OpenCode. Cursor also has an HTTP transport guide.
Discussion
No questions or reviews yet.
Related
MCP serversConnects an agent to a running Next.js 16+ dev server: errors, routes, logs and docs for your installed version
Console, network, screenshots and Lighthouse audits from your open Chrome session to the agent via a DevTools extension
An MCP server plus a Chrome extension: pick a DOM element by Option-click and the agent gets its text, styles and selector
Three skills for web 3D: GLSL shaders, Three.js scenes with React Three Fiber and GPU particle systems.
Ten reference skills for Three.js: scene setup, geometry, materials, lighting, shaders, animation and post-processing
A CLI that lets an agent inspect a running React app: component tree, props, state, hooks and render profiling
Comparison with similar tools
Cards that share the main search query, and how they differ.
| Tool | Official | Authentication | Repository stars | Main difference |
|---|---|---|---|---|
| threejs-devtools-mcp (this card) | no | not required | 130 | |
| three.ws 3D Studio MCP | no | OAuth | 276 | creates 3D models from text and photos; here the tools work on an already open Three.js scene |
| Three.js Skills | no | 4,168 | gives an agent Three.js reference instructions; here the agent drives a live scene through MCP |
README in short
Setup takes two steps: add the MCP to a client, then start the dev server and open the browser with the bridge. Tools are labelled by their effect on code, so it is clear what only looks, what previews and what writes to the project. Ready workflows are available as slash commands: `inspect-scene`, `try-look`, `apply-to-code`, `web-perf-audit`, `prepare-video`, `debug-invisible`, `playwright-setup`.