# Three.js DevTools MCP [Health: Active]

**Category:** 💻 Developer Tools  
**Repository:** https://github.com/DmitriyGolub/threejs-devtools-mcp  
**GitHub Stars:** 129  
**npm Downloads (last month):** 7172  
**Views:** 9  
**Installs:** 0  
**Upvotes:** 0  
**Directory Page:** https://allmcps.com/mcp/three-js-devtools-mcp

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

## Tools
Capabilities this server exposes over MCP:

- **scene_tree** — [INSPECT] Read-only.
Scene hierarchy. Compact text tree by default (~2KB); compact=false for full JSON with positions/geometry.
- **object_details** — [INSPECT] Read-only.
Detailed info about one object by name, uuid, or dot path.
- **find_objects** — [INSPECT] Read-only.
Search objects by type, material, visibility, name pattern, or custom property.
- **raycast** — [INSPECT] Read-only.
Cast a ray from the camera through screen coordinates and return hit objects.
- **click_inspect** — [INSPECT] Read-only.
Click-to-inspect: the cursor becomes a crosshair — tell the user to click an object in the 3D view. Returns that object.
- **scene_diff** — [INSPECT] Read-only.
Compare scene state over time: first call saves a snapshot, next call lists added/removed/modified objects.
- **layer_details** — [INSPECT] Read-only.
Camera layer mask and objects with non-default layers.
- **set_object_transform** — [LIVE PREVIEW] Changes the scene in the browser only — NOT saved to source code, lost on reload. Recorded in pending_changes (→ code edits) and undoable with revert_changes.
Set position, rotation, scale, or visibility of an object.
- **set_layers** — [LIVE PREVIEW] Changes the scene in the browser only — NOT saved to source code, lost on reload. Recorded in pending_changes (→ code edits) and undoable with revert_changes.
Set layers on an object or the camera.
- **material_list** — [INSPECT] Read-only.
All materials in the scene with type, color, transparency.
- **material_details** — [INSPECT] Read-only.
Full material properties: colors, PBR/physical params, maps, uniforms, defines, NodeMaterial (TSL) slots.
- **shader_list** — [INSPECT] Read-only.
Compiled shader programs with their materials (WebGL).
- **shader_source** — [INSPECT] Read-only.
Vertex/fragment GLSL source and uniforms of a material. NodeMaterial (TSL) has no GLSL — use material_details.
- **texture_list** — [INSPECT] Read-only.
All textures: size, format, wrap, filter settings.
- **texture_details** — [INSPECT] Read-only.
Detailed info about one texture.
- **texture_preview** — [INSPECT] Read-only.
Show a texture as a PNG image. Use texture_list to find names/UUIDs.
- **set_material_property** — [LIVE PREVIEW] Changes the scene in the browser only — NOT saved to source code, lost on reload. Recorded in pending_changes (→ code edits) and undoable with revert_changes.
Set a material property. Accepts the material name or the name of a mesh that uses it.
- **set_uniform** — [LIVE PREVIEW] Changes the scene in the browser only — NOT saved to source code, lost on reload. Recorded in pending_changes (→ code edits) and undoable with revert_changes.
Set a ShaderMaterial uniform.
- **set_texture** — [LIVE PREVIEW] Changes the scene in the browser only — NOT saved to source code, lost on reload. Recorded in pending_changes (→ code edits) and undoable with revert_changes.
Change texture sampling and transform: wrap, filter, anisotropy, repeat, offset, rotation, colorSpace.
- **shadow_details** — [INSPECT] Read-only.
Shadow maps: global settings, per-light bias/mapSize/camera frustum, casters and receivers.
- **scene_background** — [INSPECT] Read-only.
Scene background, environment map (IBL), backgroundBlurriness/Intensity, color management.
- **env_map_details** — [INSPECT] Read-only.
Environment maps: scene.environment, scene.background, per-material envMap.
- **fog_details** — [INSPECT] Read-only.
Scene fog: type (Fog/FogExp2), color, near/far or density.
- **set_light** — [LIVE PREVIEW] Changes the scene in the browser only — NOT saved to source code, lost on reload. Recorded in pending_changes (→ code edits) and undoable with revert_changes.
Change a light: color, intensity, position, castShadow, groundColor (HemisphereLight).
- **set_shadow** — [LIVE PREVIEW] Changes the scene in the browser only — NOT saved to source code, lost on reload. Recorded in pending_changes (→ code edits) and undoable with revert_changes.
Change shadow casting/receiving on any object, and bias/mapSize/shadow camera on lights.
- **set_fog** — [LIVE PREVIEW] Changes the scene in the browser only — NOT saved to source code, lost on reload. Recorded in pending_changes (→ code edits) and undoable with revert_changes.
Change scene fog (color, near/far or density) and the background color.
- **camera_details** — [INSPECT] Read-only.
Active camera: type, position, FOV, near/far, aspect.
- **renderer_info** — [INSPECT] Read-only.
Renderer stats and backend (WebGL / WebGPU): draw calls, triangles, memory, capabilities.
- **renderer_settings** — [INSPECT] Read-only.
Renderer configuration: toneMapping, exposure, colorSpace, shadowMap, pixelRatio.
- **clipping_details** — [INSPECT] Read-only.
Clipping planes: renderer global, per-material, ClippingGroup objects.
- **postprocessing_list** — [INSPECT] Read-only.
EffectComposer passes: render passes, shader passes, effects (bloom, SSAO, …).
- **set_camera** — [LIVE PREVIEW] Changes the scene in the browser only — NOT saved to source code, lost on reload. Recorded in pending_changes (→ code edits) and undoable with revert_changes.
Change the active camera: position, rotation, FOV, near/far, zoom, ortho bounds.
- **set_renderer** — [LIVE PREVIEW] Changes the scene in the browser only — NOT saved to source code, lost on reload. Recorded in pending_changes (→ code edits) and undoable with revert_changes.
Change renderer settings: tone mapping, exposure, color space, pixel ratio, shadows.
- **set_clipping** — [LIVE PREVIEW] Changes the scene in the browser only — NOT saved to source code, lost on reload. Recorded in pending_changes (→ code edits) and undoable with revert_changes.
Change clipping planes on the renderer (global) or a material.
- **set_postprocessing** — [LIVE PREVIEW] Changes the scene in the browser only — NOT saved to source code, lost on reload. Recorded in pending_changes (→ code edits) and undoable with revert_changes.
Enable/disable passes, set pass uniforms or effect parameters. Without a pass, lists passes.
- **geometry_details** — [INSPECT] Read-only.
Geometry of a mesh: vertices, attributes, index, bounding box, morph attributes.
- **instanced_mesh_details** — [INSPECT] Read-only.
InstancedMesh: count, capacity, sample transforms, instance colors and custom attributes.
- **batched_mesh_details** — [INSPECT] Read-only.
BatchedMesh: geometry counts, draw ranges, instance visibility. Lists all if no name/uuid.
- **morph_targets** — [INSPECT] Read-only.
Meshes with morph targets: target names and current influences.
- **skeleton_details** — [INSPECT] Read-only.
Skeletons and bones of SkinnedMesh objects.
- **animation_details** — [INSPECT] Read-only.
AnimationMixers with their actions, clips, weights and playback state.
- **set_instanced_mesh** — [LIVE PREVIEW] Changes the scene in the browser only — NOT saved to source code, lost on reload. Recorded in pending_changes (→ code edits) and undoable with revert_changes.
Change InstancedMesh count, visibility, frustumCulled.
- **set_morph_target** — [LIVE PREVIEW] Changes the scene in the browser only — NOT saved to source code, lost on reload. Recorded in pending_changes (→ code edits) and undoable with revert_changes.
Set a morph target influence.
- **set_animation** — [LIVE PREVIEW] Changes the scene in the browser only — NOT saved to source code, lost on reload. Recorded in pending_changes (→ code edits) and undoable with revert_changes.
Control playback: mixer timeScale/time, action play/stop/pause/weight by clip name.
- **web_audit** — [INSPECT] Read-only.
Website health check: pixel ratio, canvas resize, idle/off-screen rendering, antialias cost, oversized or uncompressed textures, shadow cost, color space, draw calls. Each finding has a concrete fix.
- **performance_snapshot** — [INSPECT] Read-only.
Draw calls, triangles, instanced meshes, object counts by type.
- **perf_monitor** — [INSPECT] Read-only.
Record FPS and frame times for N seconds: avg/min/max, percentiles, spikes, jank.
- **draw_call_breakdown** — [INSPECT] Read-only.
Per-object draw call and triangle cost, sorted by cost. Flags multi-material objects and hidden geometry.
- **memory_stats** — [INSPECT] Read-only.
GPU memory: geometry buffers, texture VRAM, instance data, top textures by size.
- **dispose_check** — [INSPECT] Read-only.
Leak detection: geometries/textures tracked by the renderer but no longer in the scene.
- **console_capture** — [INSPECT] Read-only.
Recent browser console output (log/warn/error).
- **toggle_overlay** — [DEBUG VISUAL] Temporary visual aid in the browser. Nothing to put in code.
In-browser inspector panel: live FPS, draw calls, scene tree, materials, lights. Clicking a tree item highlights it.
- **overlay_selected** — [INSPECT] Read-only.
Everything about the object the user selected in the overlay: materials, geometry, transforms, textures, uniforms, shadows.
- **highlight_object** — [DEBUG VISUAL] Temporary visual aid in the browser. Nothing to put in code.
Highlight an object with wireframe, or toggle its visibility, to point it out.
- **toggle_wireframe** — [DEBUG VISUAL] Temporary visual aid in the browser. Nothing to put in code.
Wireframe on all materials or one object.
- **bounding_boxes** — [DEBUG VISUAL] Temporary visual aid in the browser. Nothing to put in code.
Show/hide bounding boxes — debug frustum culling and object bounds.
- **add_helper** — [DEBUG VISUAL] Temporary visual aid in the browser. Nothing to put in code.
Add a debug helper to an object: box, axes, skeleton, arrow, grid, camera frustum, light helpers, plane.
- **remove_helper** — [DEBUG VISUAL] Temporary visual aid in the browser. Nothing to put in code.
Remove a helper added with add_helper.
- **run_js** — [DEBUG VISUAL] Temporary visual aid in the browser. Nothing to put in code.
Run JavaScript in the page with scene, renderer, camera, gl in scope; `return` a value to get it back. Changes made here are NOT recorded in pending_changes — prefer the set_* tools for anything the user may want to keep.
- **take_screenshot** — [INSPECT] Read-only.
Screenshot of the current scene (also saved as PNG in screenshots/).
- **annotated_screenshot** — [INSPECT] Read-only.
Screenshot with object names drawn at their screen positions ([M]esh, [L]ight, [G]roup, [C]amera). Best for understanding layout.
- **capture_frames** — [INSPECT] Read-only.
Record a frame sequence for a video. Time is virtualised, so frames are exactly 1/fps apart and smooth even if rendering is slow. Saves numbered images to screenshots/sequence-<time>/ and returns an ffmpeg command.
- **scene_export** — [INSPECT] Read-only.
Export the scene or one object as GLB/glTF into screenshots/. Needs GLTFExporter in the app (the error explains setup).
- **pending_changes** — [FOR CODE] Output is meant to be written into the project source files.
Everything changed with live-preview tools since the last clear: before → after per property, plus ready-to-paste code (vanilla Three.js and/or React Three Fiber) and where to find each target. Use it to persist a preview into source; call again with clear=true once the code is updated.
- **revert_changes** — [LIVE PREVIEW] Changes the scene in the browser only — NOT saved to source code, lost on reload. Recorded in pending_changes (→ code edits) and undoable with revert_changes.
Undo live-preview changes in the browser (all, or selected ids from pending_changes), newest first.
- **gltf_to_r3f** — [FOR CODE] Output is meant to be written into the project source files.
Convert a GLB/glTF file into a React Three Fiber component (like gltfjsx).
- **bridge_status** — [CONNECTION] Configures the devtools server.
Bridge connection, proxy target, and how to attach Playwright to the same browser.
- **set_dev_port** — [CONNECTION] Configures the devtools server.
Point the proxy at another local dev server port.
- **set_dev_url** — [CONNECTION] Configures the devtools server.
Inspect a remote Three.js app by URL. Source code changes are not possible in remote mode.

## Claude Desktop Quick Installation
Install path detected from listing signals. Uses `npx` (confidence: high):

```json
"mcpServers": {
  "three-js-devtools-mcp": {
    "command": "npx",
    "args": ["-y","threejs-devtools-mcp"]
  }
}
```

## Documentation

## What Three.js DevTools MCP MCP server does

Three.js DevTools MCP MCP server gives an AI agent access to a running Three.js application. It can inspect the scene graph and modify objects, materials, shaders, textures, and animations while the application is running. The tool set also covers performance monitoring, memory diagnostics, and code generation, with 59 tools documented by the project.

The server is intended for vanilla Three.js, React Three Fiber, and other frameworks. It does not require changes to the application code. Object names are useful when working with the scene because unnamed objects appear as `(unnamed)` in the scene tree.

## How it works

The server starts a browser at `localhost:9222` and injects a development-tools bridge into the page. Communication with the live scene happens over WebSocket. Keep that browser tab open while using the tools; closing it stops the connection to the scene.

When the development server is started, the server detects its port from `package.json`. After the page is available, an agent can request scene information or make changes such as changing a car’s material color, investigating an invisible model, checking FPS, or looking for memory leaks. A built-in browser overlay can show live performance statistics, the scene graph, a material editor, and a 3D object preview. The overlay is activated automatically or with the `toggle_overlay` tool.

## Setup and configuration

Add the server to an MCP client with the command `npx -y threejs-devtools-mcp`. The README provides configurations for Claude Code, Claude Desktop, Cursor, Windsurf, and VS Code. Cursor can also use an HTTP transport, with separate instructions in the repository’s Cursor setup guide.

After registering the server, start the Three.js project normally, such as with `npm run dev`, and open the browser page. The MCP process and the browser bridge must remain available together for scene operations to work. No environment variables are documented as required.

## Tools and capabilities

The Three.js DevTools MCP MCP server includes tools for:

- Reading and changing scene objects
- Inspecting and editing materials
- Working with shaders and textures
- Inspecting or controlling animations
- Monitoring performance and FPS
- Diagnosing memory usage and possible leaks
- Generating code from scene assets
- Showing or hiding the in-browser overlay

The documented examples include generating a React component from a `.glb` asset and querying the scene tree. Detailed parameters for all 59 tools are maintained in the project’s tools reference.

## Limitations and notes

The browser tab hosting the development page must stay open because the server depends on its WebSocket bridge. Unnamed objects are harder to target from the scene tree, so assigning names such as `player` to Three.js objects or React Three Fiber elements is recommended.

_Full upstream README: https://allmcps.com/mcp/three-js-devtools-mcp/readme_