Log inSubmit server
Three.js DevTools MCP logo

Three.js DevTools MCP

Inspect and modify Three.js scenes, materials, shaders, textures, animations, and performance data through an AI agent.

InstallRepositoryWebsite
Full README Compare alternatives Embed widget Claim this listing

Install Three.js DevTools MCP

Pick your client, then add it in one click or paste the config.

STDIONode.js
~/Library/Application Support/Claude/claude_desktop_config.json
claude_desktop_config.json
{
  "mcpServers": {
    "three-js-devtools-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "threejs-devtools-mcp"
      ]
    }
  }
}

Settings → Developer → Edit Config, merge this into mcpServers, then fully quit and reopen Claude Desktop.

Automated check passed— started and listed 69 tools correctly (15d ago).

Overview

Three.js DevTools MCP MCP server connects an AI agent to a running Three.js scene through a browser-based WebSocket bridge. It provides 59 tools for inspecting and modifying objects, materials, shaders, textures, animations, performance data, memory usage, and generated code. The server supports vanilla Three.js, React Three Fiber, and other frameworks without project changes. Use it when you need to diagnose or edit a live scene from Claude Code, Claude Desktop, Cursor, Windsurf, or VS Code.

Use cases

  • Inspect a live Three.js scene tree
  • Modify materials and shaders during development
  • Diagnose invisible models and memory leaks
  • Monitor FPS and browser-side performance
  • Generate a React component from a GLB asset

Key features

  • 59 tools for Three.js scene inspection and editing
  • Material, shader, texture, and animation controls
  • Performance monitoring and memory diagnostics
  • In-browser scene graph and material editor overlay
  • Code generation from scene assets
  • Support for vanilla Three.js and React Three Fiber

Tools69

What Three.js DevTools MCP lets your agent do. Expand a tool for its parameters.

Verified live~8.2k tokens of context

Security & health

What it can reach and how reliably it runs — from our own checks, not the maintainer’s claims.

ActiveLast checked 1d ago

Recent health check succeeded.

28/28 checks healthy over the last 90d

What it can do

From the 69 tools this server returned when we ran it; 69 declare their own safety hints.

Can delete or modify data · 2Makes network requests · 2Read-only tools · 67
Network at startup3 connections
Files written at startupNone
Install scriptsNone
npm provenanceNot published
Package age222 days
Maintainers1

Observed 2026-10-24 in an isolated sandbox. A description of reach, not a security audit.

Supply-chain signal

No high-severity advisories surfaced by our automated scan.

Critical 0High 0Medium 0Low 0

Scanned 2d ago via OSV.dev · threejs-devtools-mcp (npm)

Adoption & maintenance

Factual signals from GitHub, npm, and our automated checks — not a rating.

GitHub stars129Stargazers on the source repository.
npm downloads7.2kPackage downloads in the last 30 days.
Last commit25d agoMost recent push to the default branch.
Availability100%Our rolling endpoint + install checks that succeeded.
Install checkPassedOur sandbox started it and listed its tools.
Tools exposed69Callable tools this server registers over MCP.
Directory activity9 viewsConfig copies, upvotes, and views on AllMCPs.

How Three.js DevTools MCP works

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.

Read the full README View source on GitHub

Reviews

No reviews yet — be the first to share how it worked for you.

Frequently Asked Questions about Three.js DevTools MCP

Three.js DevTools MCP is an MCP server that connects AI agents to a running Three.js scene through a browser WebSocket bridge. Its main tools inspect and modify objects, materials, shaders, textures, animations, performance data, memory usage, and generated code, with 59 tools available.

Install it by registering the command `npx -y threejs-devtools-mcp` in your MCP client configuration. The README includes setup examples for Claude Code, Claude Desktop, Cursor, Windsurf, and VS Code, followed by starting the Three.js development server.

Yes, Three.js DevTools MCP works with Cursor through a project `.cursor/mcp.json` configuration using `npx -y threejs-devtools-mcp`. The project also documents an HTTP transport option and provides a separate Cursor setup guide.

The browser tab connected to the scene must remain open. The server communicates with the running Three.js application through a WebSocket bridge injected into the browser page, so closing that tab stops tool access.

Related MCP servers

All in Developer Tools All alternatives
Add a badge to your READMEShow it’s listed — live SVG, Markdown or HTML.

AllMCPs Directory Badge

Full Badge Customizer

Showcase your server listing on GitHub or your project documentation. Embed this dynamic SVG badge to highlight official listing status and live engagement.

Badge Style:
Live Dynamic SVG PreviewThree.js DevTools MCP AllMCPs Directory Badge
Markdown (GitHub README)
[![AllMCPs](https://allmcps.com/api/badge/three-js-devtools-mcp?style=directory)](https://allmcps.com/mcp/three-js-devtools-mcp)
HTML Embed
<a href="https://allmcps.com/mcp/three-js-devtools-mcp"><img src="https://allmcps.com/api/badge/three-js-devtools-mcp?style=directory" alt="Three.js DevTools MCP on AllMCPs" /></a>