Three.js DevTools MCP
Hooks into running Three.js scenes via a Chrome DevTools bridge and exposes 59 tools for live inspection and modification. Works with vanilla Three.js, React Three Fiber, or any framework without code changes. Starts a browser at localhost:9222 with an injected WebSocket bridge that lets you query the scene graph, edit materials and shaders, toggle lights, monitor performance and memory, preview objects in 3D, and generate React components from GLB files. Includes an in-browser overlay with live stats and an interactive scene editor. Useful when debugging rendering issues, tweaking materials without restarting, or hunting down performance bottlenecks in existing projects. Keep the browser tab open while using it or the WebSocket drops.
- GitHub stars
- 64
- tools
- 12
- transport
- STDIO
- env vars
- 5
- last updated
- Mar 16, 2026
Tools
12 toolsPublic tool metadata for what this MCP can expose to an agent.
scene_treeInspect the scene graph (listed under Inspect).
Inspect the scene graph (listed under Inspect).
No parameter schema in public metadata yet.
material_detailsInspect material properties (listed under Inspect).
Inspect material properties (listed under Inspect).
No parameter schema in public metadata yet.
web_auditChecks for blurry canvas, battery drain, heavy textures, expensive shadows, wrong color space and too many draw calls, with fixes.
Checks for blurry canvas, battery drain, heavy textures, expensive shadows, wrong color space and too many draw calls, with fixes.
No parameter schema in public metadata yet.
set_material_propertyLive preview change to a material property, not saved to code.
Live preview change to a material property, not saved to code.
No parameter schema in public metadata yet.
set_lightLive preview change to a light, not saved to code.
Live preview change to a light, not saved to code.
No parameter schema in public metadata yet.
set_cameraLive preview change to the camera, not saved to code.
Live preview change to the camera, not saved to code.
No parameter schema in public metadata yet.
pending_changesReturns each recorded live-preview change as before/after with ready-to-paste code.
Returns each recorded live-preview change as before/after with ready-to-paste code.
No parameter schema in public metadata yet.
gltf_to_r3fConverts a glTF model to React Three Fiber code, written into source by the AI.
Converts a glTF model to React Three Fiber code, written into source by the AI.
No parameter schema in public metadata yet.
capture_framesRecords a frame sequence for promo clips with virtualised time, giving an ffmpeg command for MP4/WebM.
Records a frame sequence for promo clips with virtualised time, giving an ffmpeg command for MP4/WebM.
No parameter schema in public metadata yet.
revert_changesUndoes live-preview changes in the browser.
Undoes live-preview changes in the browser.
No parameter schema in public metadata yet.
object_detailsUsed in the Playwright example to read an object's details via threeCall.
Used in the Playwright example to read an object's details via threeCall.
No parameter schema in public metadata yet.
toggle_overlayActivates or toggles the in-browser devtools overlay panel.
Activates or toggles the in-browser devtools overlay panel.
No parameter schema in public metadata yet.
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageConfiguration
DEV_PORTDev server port to proxy (auto-detected from package.json if not set)
BRIDGE_PORTBridge proxy port (default: 9222)
BROWSERSet to 'none' to disable auto-opening browser
HEADLESSSet to 'true' for headless browser mode (CI)
CHROME_PATHCustom Chrome/Edge executable path
Readme
threejs-devtools-mcp
MCP server for inspecting Three.js scenes in real time, trying changes live in the browser, and turning them into code. 69 tools cover objects, materials, shaders, textures, animation, performance and memory, plus website audits, video frame capture and Playwright helpers.
Zero changes to your project. Works with vanilla Three.js and React Three Fiber, on WebGLRenderer and WebGPURenderer.
Annotated screenshot
Setup
1. Add the MCP server
Claude Code
claude mcp add threejs-devtools-mcp -- npx threejs-devtools-mcp
Details
- Repository
- github.com/dmitriygolub/threejs-devtools-mcp
- Website
- github.com/DmitriyGolub/threejs-devtools-mcp
- Category
- AI & LLM Tools
- Package
threejs-devtools-mcp- Transport
- STDIO
- Registry
- MCP registry, active
Related AI & LLM Tools MCP servers
View all
Zikkaronamanhij/zikkaronBiologically-inspired persistent memory engine for Claude Code MCP agents60stars
Akbdnotitia/akbGit-backed org memory for AI agents — hybrid search, tables, files & a URI graph over MCP.52stars
Mastercard Developers MCPmastercard/developers-agent-toolkitAccess Mastercard Developers APIs, documentation, and API specifications through MCP.0stars
Palinodephasespace-labs/palinodeInspectable, correctable project memory in git-versioned Markdown for AI agents.46stars
NeuroStackraphasouthall/neurostackToken-efficient MCP memory for Markdown vaults. Tiered search, GraphRAG, AI memories.43stars