# Three.js DevTools MCP (MCP server)

> Three.js DevTools MCP is an MCP server that adds web browsing tools to AI assistants such as Claude Desktop, Claude Code and Cursor. Inspect and edit Three.js scenes, materials, shaders, lights in real time from any AI agent. It has 128 GitHub stars, is released under the MIT license and runs locally with npx -y 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.

## Key facts

| Fact | Value |
|---|---|
| Repository | https://github.com/DmitriyGolub/threejs-devtools-mcp |
| GitHub stars | 128 |
| License | MIT |
| Language | TypeScript |
| Transport | stdio |
| Packages | npm: threejs-devtools-mcp |
| Remote URL | none |
| Needs API key | no |
| Official | no |
| Works with | Claude Desktop, Claude Code, Cursor, VS Code |
| Category | Web & browsing |
| Latest release | v0.5.0 (Oct 14, 2026) |
| Last commit | Oct 14, 2026 |
| MCP registry name | io.github.DmitriyGolub/threejs-devtools |

## Install

### Claude Desktop (claude_desktop_config.json)

```json
{
  "mcpServers": {
    "three-js-devtools-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "threejs-devtools-mcp"
      ],
      "env": {
        "DEV_PORT": "your-value",
        "BRIDGE_PORT": "your-value",
        "BROWSER": "your-value",
        "HEADLESS": "your-value",
        "CHROME_PATH": "your-value"
      }
    }
  }
}
```

Settings > Developer > Edit Config. macOS: ~/Library/Application Support/Claude/, Windows: %APPDATA%\Claude\. Restart Claude Desktop afterwards.

### Claude Code

```sh
claude mcp add --env DEV_PORT=your-value --env BRIDGE_PORT=your-value --env BROWSER=your-value --env HEADLESS=your-value --env CHROME_PATH=your-value --transport stdio three-js-devtools-mcp -- npx -y threejs-devtools-mcp
```

### Cursor (.cursor/mcp.json)

```json
{
  "mcpServers": {
    "three-js-devtools-mcp": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "threejs-devtools-mcp"
      ],
      "env": {
        "DEV_PORT": "your-value",
        "BRIDGE_PORT": "your-value",
        "BROWSER": "your-value",
        "HEADLESS": "your-value",
        "CHROME_PATH": "your-value"
      }
    }
  }
}
```

Project file; use ~/.cursor/mcp.json to enable it in every project.

### VS Code (.vscode/mcp.json)

```json
{
  "servers": {
    "three-js-devtools-mcp": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "threejs-devtools-mcp"
      ],
      "env": {
        "DEV_PORT": "your-value",
        "BRIDGE_PORT": "your-value",
        "BROWSER": "your-value",
        "HEADLESS": "your-value",
        "CHROME_PATH": "your-value"
      }
    }
  }
}
```

Config formats checked against the official docs on 2026-10-07.

## Environment variables

- `DEV_PORT`: Dev server port to proxy (auto-detected from package.json if not set)
- `BRIDGE_PORT`: Bridge proxy port (default: 9222)
- `BROWSER`: Set to 'none' to disable auto-opening browser
- `HEADLESS`: Set to 'true' for headless browser mode (CI)
- `CHROME_PATH`: Custom Chrome/Edge executable path

## Similar MCP servers

- [Fitter](https://appsgit.com/mcp-servers/fitter): Turn any website or API into structured JSON with LLM-authored declarative scraping configs. (133 stars, MIT)
- [Scrapegraph MCP](https://appsgit.com/mcp-servers/scrapegraph-mcp): AI-powered web scraping and data extraction capabilities through ScrapeGraph API. (118 stars, MIT)
- [Native DevTools](https://appsgit.com/mcp-servers/native-devtools): MCP server for desktop, browser (CDP), and Android automation. (139 stars, MIT)
- [MCP Screenshot Website Fast](https://appsgit.com/mcp-servers/mcp-screenshot-website-fast): Quickly screenshots webpages and converts to an LLM friendly size. (110 stars, MIT)
- [Cesium MCP Runtime](https://appsgit.com/mcp-servers/cesium-mcp-runtime): Control CesiumJS 3D globes via MCP: camera, layers, entities, animation, and interaction. (146 stars, MIT)
- [Oxylabs MCP](https://appsgit.com/mcp-servers/oxylabs-mcp): Fetch and process content from specified URLs & sources using the Oxylabs Web Scraper API. (104 stars, MIT, official, needs API key)

---

Canonical page: https://appsgit.com/mcp-servers/three-js-devtools-mcp
Source: appsgit (https://appsgit.com), the app store for github. Data from the GitHub API, refreshed daily.
Machine access: JSON API https://appsgit.com/api/v1/apps (OpenAPI: https://appsgit.com/openapi.json), MCP server https://mcp.appsgit.com/mcp, full index https://appsgit.com/llms-full.txt.