Three.js DevTools MCP

io.github.DmitriyGolubPublished by GitHub account DmitriyGolubv0.2.1Updated Oct 26, 2026

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

VerifiedSTDIODesktop onlyBrowser AutomationDeveloper ToolsMedia & Design

Overview

AI-generated overview

Local MCP server that lets an AI assistant inspect and live-edit Three.js scenes in the browser, then turn the changes into code.

What you can do
  • Inspect scene trees, objects, materials, shaders, textures, lights and cameras in a running Three.js scene
  • Live-preview changes such as material properties, lights and camera, with before-to-after code and revert support
  • Debug visuals like wireframes, bounding boxes and helpers, plus an in-browser devtools overlay
  • Audit websites for canvas, texture, shadow, color-space and draw-call problems, and capture frame sequences for video
  • Export changes to vanilla Three.js or React Three Fiber code, and drive scenes from Playwright or Puppeteer tests
When to use it
Useful when developing Three.js or React Three Fiber projects and you want an assistant to diagnose invisible models, tune looks interactively, audit rendering performance, or record promo clips without editing the project first.
Requirements
Runs locally via npx (Node.js) over stdio. A Three.js dev server must be running; the port is auto-detected from package.json or set with DEV_PORT. A browser is opened automatically at the bridge port (BRIDGE_PORT, default 9222) unless BROWSER is set to none; CHROME_PATH and HEADLESS are optional. The browser tab must stay open while tools are used.
Before you install
The server opens a browser and injects a bridge into your page, and tools can write changes into your source files when you ask to keep them. Live-preview edits are lost on reload unless applied. It is desktop-only and stops working if the browser tab is closed.

Installation

In SourceWeft

  1. Open Three.js DevTools MCP in the dashboard and add it to a workspace.
  2. Enable the server for the chats that should use its tools.

Desktop only via STDIO. STDIO servers start a local process, so they need the SourceWeft desktop host.

Other MCP clients

Follow the launch instructions in the repository.

README

threejs-devtools-mcp

[npm version] [license] [build] [MCP Registry]

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
bash
claude mcp add threejs-devtools-mcp -- npx threejs-devtools-mcp
Claude Desktop

Add to claude_desktop_config.json:

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

Add to .cursor/mcp.json in your project:

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

Or use the HTTP transport — see Cursor setup guide.

Windsurf

Add to ~/.codeium/windsurf/mcp_config.json:

json
{  "mcpServers": {    "threejs-devtools-mcp": {      "command": "npx",      "args": ["-y", "threejs-devtools-mcp"]    }  }}
VS Code (Copilot)

Add to .vscode/mcp.json:

json
{  "servers": {    "threejs-devtools-mcp": {      "command": "npx",      "args": ["-y", "threejs-devtools-mcp"]    }  }}
OpenCode

Add to opencode.json in your project:

json
{  "$schema": "https://opencode.ai/config.json",  "mcp": {    "threejs-devtools-mcp": {      "type": "local",      "command": ["npx", "-y", "threejs-devtools-mcp"],      "enabled": true    }  }}

2. Start your dev server and open the browser

Start your Three.js dev server as usual (npm run dev). The MCP server auto-detects the port from package.json and opens a browser at localhost:9222 with the devtools bridge injected.

Keep the browser tab open. The MCP server talks to your scene through a WebSocket bridge. Close the tab = tools stop working.

3. Ask the AI about your scene

"show me the scene tree""why is my model invisible?""try the car in red"          ← live preview, nothing saved"keep it"                     ← written into your code"audit this site for mobile""record a 5-second clip at 60 fps"

Look now vs. change the code

Every tool is labelled, so you and the AI always know what touches your files:

ToolsYour code
Inspectscene_tree, material_details, web_audit, screenshots…untouched
Live previewset_material_property, set_light, set_camera…untouched; lost on page reload
Debug visualwireframe, bounding boxes, helpers, overlayuntouched; never needed in code
For codepending_changes, gltf_to_r3fthe AI writes this into your source

Every live-preview change is recorded. pending_changes returns each one as before → after with ready-to-paste code (vanilla Three.js and React Three Fiber) and where to find it in your project. revert_changes undoes them in the browser.

For websites and videos

  • web_audit: checks for a blurry canvas (pixel ratio, missing resize), battery drain (rendering while idle or off-screen), heavy textures (oversized, not KTX2), expensive shadows, wrong color space and too many draw calls. Each finding comes with the fix.
  • capture_frames: records a frame sequence for promo clips and reels. Time is virtualised, so the output is perfectly smooth at 30/60 fps even if your scene renders slowly. You get the ffmpeg command for MP4/WebM.

Skills

Ready-made workflows show up as slash commands in Claude Code, Cursor and other clients: inspect-scene, try-look, apply-to-code, web-perf-audit, prepare-video, debug-invisible, playwright-setup.

Playwright & Puppeteer

Three ways to connect, same tools in all of them: your own browser (default), a Chrome launched by the server (HEADLESS / CDP_PORT, shareable with Playwright MCP), or your own tests:

ts
import { attachDevtools, waitForScene, threeCall } from 'threejs-devtools-mcp/playwright';
await attachDevtools(context, { connect: false });await page.goto('http://localhost:5173');await waitForScene(page);expect((await threeCall(page, 'object_details', { name: 'Car' })).visible).toBe(true);

See Browsers, Puppeteer & Playwright.

In-browser overlay

A built-in devtools panel with live performance stats, interactive scene graph, material editor, and 3D object preview. Activated automatically or via the toggle_overlay tool.

[Overlay panel]

Tip: name your objects

Unnamed objects show as (unnamed) in the scene tree. Named objects are easier to find and modify:

js
// Three.jsmesh.name = "player";
jsx
// React Three Fiber<mesh name="player" geometry={geometry} material={material} />

Documentation

License

MIT

Source: README.md at commit 8151443

Tools

0
SourceWeft has not started this package in its sandbox yet, so its tools are not known.

Version history

1
  1. v0.2.1LatestSep 16, 2026

Score

50% of the applicable checks met

How complete this listing is, computed from the registry entry, the endpoint and public sources. Not a rating of the server and not a statement that it is safe or working today: reachability is a dated check, and no installs or reviews go into the score.

  • Reached in the last 30 days25 pts

    Keep the endpoint answering the MCP handshake; SourceWeft probes it every 30 days.

  • Auth declared10 pts

    Declare the credential headers in the registry entry, or keep the endpoint answering the probe so its auth can be classified.

  • Tools listed15 pts

    Answer tools/list without a credential, or ship a package that starts in a sandbox without one.

  • DescriptionRequired15 pts
  • Logo10 pts
  • Documentation15 pts
  • License10 pts