# Three.js DevTools MCP

Connects coding agents to active Three.js scenes for live material tweaks, mesh debugging, and automated code updates right from the browser.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 126
- Author: DmitriyGolub
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/DmitriyGolub/threejs-devtools-mcp
- Updated: 2026-10-14
- HTML: https://affpapa.org/en/nevibecode/mcp/threejs-devtools-mcp

## What it does

The server links your assistant to a running web app using a WebSocket bridge on port `localhost:9222`. It inspects `package.json` to detect local dev ports and auto-injects the bridge into your page. Both vanilla Three.js and React Three Fiber run smoothly on WebGL and WebGPU renderers without modifying project dependencies.

Workflows clearly separate live experimentation from source edits. You can preview lighting tweaks, inspect bounding boxes, or run `web_audit` to catch idle rendering loops and excessive draw calls. Once a look is settled, the `pending_changes` tool produces copy-paste snippets or lets the agent write the updates directly into your files.

Closing the browser tab terminates the WebSocket connection, stopping all inspection tools instantly. For video export workflows with `capture_frames`, a local `ffmpeg` binary must be available on your system.

## Requirements
- Needs: Node.js (commands run via npx)
- Environment variables: `DEV_PORT`, `BRIDGE_PORT`, `BROWSER`, `HEADLESS`, `CHROME_PATH` — keys and tokens: ask the human for the values, never commit them or put them in shared files.
- Works with: Playwright

## Install

### Claude Code (native platform)

**Platform CLI**
```bash
claude mcp add --env DEV_PORT=<DEV_PORT> --env BRIDGE_PORT=<BRIDGE_PORT> --env BROWSER=<BROWSER> --env HEADLESS=<HEADLESS> --env CHROME_PATH=<CHROME_PATH> --transport stdio threejs-devtools-mcp -- npx -y threejs-devtools-mcp
```
Replace <…> with your own values

### Codex

**Platform CLI**
```bash
codex mcp add threejs-devtools-mcp --env DEV_PORT=<DEV_PORT> --env BRIDGE_PORT=<BRIDGE_PORT> --env BROWSER=<BROWSER> --env HEADLESS=<HEADLESS> --env CHROME_PATH=<CHROME_PATH> -- npx -y threejs-devtools-mcp
```
Replace <…> with your own values

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "threejs-devtools-mcp": {
            "command": "npx",
            "args": [
                "-y",
                "threejs-devtools-mcp"
            ],
            "env": {
                "DEV_PORT": "<DEV_PORT>",
                "BRIDGE_PORT": "<BRIDGE_PORT>",
                "BROWSER": "<BROWSER>",
                "HEADLESS": "<HEADLESS>",
                "CHROME_PATH": "<CHROME_PATH>"
            }
        }
    }
}
```
Replace <…> with your own values

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "threejs-devtools-mcp": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "threejs-devtools-mcp"
            ],
            "env": {
                "DEV_PORT": "<DEV_PORT>",
                "BRIDGE_PORT": "<BRIDGE_PORT>",
                "BROWSER": "<BROWSER>",
                "HEADLESS": "<HEADLESS>",
                "CHROME_PATH": "<CHROME_PATH>"
            }
        }
    }
}
```
Replace <…> with your own values

### Gemini CLI

**Platform CLI**
```bash
gemini mcp add -e DEV_PORT=<DEV_PORT> -e BRIDGE_PORT=<BRIDGE_PORT> -e BROWSER=<BROWSER> -e HEADLESS=<HEADLESS> -e CHROME_PATH=<CHROME_PATH> threejs-devtools-mcp npx -y threejs-devtools-mcp
```
Replace <…> with your own values

## When to use it
- inspect object hierarchies to find invisible or misconfigured meshes
- tweak lighting and shader parameters live before updating project files
- convert verified visual adjustments directly into React Three Fiber code
- audit web scenes for oversized textures and unnecessary draw calls
- export frame sequences at fixed framerates for video rendering

## Example prompts
- Inspect the scene tree and explain why the main character mesh is hidden
- Adjust the ambient light intensity and show a live preview in the browser
- Run a web performance audit on the canvas and extract pending code changes

## Similar
- [Front-End Checklist](https://affpapa.org/en/nevibecode/mcp/front-end-checklist.md) — MCP server · ★ 74559
- [tldraw](https://affpapa.org/en/nevibecode/mcp/tldraw.md) — MCP server · ★ 51091
- [Figma-Context-MCP](https://affpapa.org/en/nevibecode/mcp/figma-context-mcp.md) — MCP server · ★ 16062
- [mcp-server-chart](https://affpapa.org/en/nevibecode/mcp/mcp-server-chart.md) — MCP server · ★ 4402
- [Dembrandt](https://affpapa.org/en/nevibecode/mcp/dembrandt.md) — MCP server · ★ 3821
- [RevoGrid DataGrid MCP Pro](https://affpapa.org/en/nevibecode/mcp/revogrid-datagrid-mcp-pro.md) — MCP server · ★ 3450

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md