Skip to main content
Glama

Threejs-mcp

A Three.js code-generation MCP server.

Tools

Category

Tools

Scene & Renderer

scene_setup, html_template

Cameras

perspective_camera, orthographic_camera

Geometry

geometry, extrude_geometry, lathe_geometry, tube_geometry

Materials

material, shader_material

Meshes

mesh, instanced_mesh, group

Lighting

ambient_light, directional_light, point_light, spot_light, hemisphere_light, rect_area_light

Controls

orbit_controls, fly_controls, pointer_lock_controls, transform_controls

Loaders

gltf_loader, texture_loader, cube_texture_loader, hdr_environment, fbx_loader

Animation

animation_loop, keyframe_animation, tween_animation

Interaction

raycaster

Helpers

debug_helpers, light_helpers

Post-processing

postprocessing_setup

Environment

ground_plane, skybox, water_surface, particles, reflective_surface, lensflare

UI

css2d_label

Physics

rapier_physics

XR

webxr_setup

Utilities

math_utils, dispose_resources

Related MCP server: threejs-devtools-mcp

Prerequisites

  • Python 3.13+

  • uv

Installation

Clone this repository, then update the path in run.sh to point to the cloned directory:

#!/bin/zsh
source ~/.zshrc
exec uv run --directory /path/to/threejs-mcp threejs-mcp

Make the script executable:

chmod +x run.sh

Then follow the instructions for your MCP client below. Replace /path/to/threejs-mcp/run.sh with the actual path to the script.

Claude Code

claude mcp add threejs -s user -- /path/to/threejs-mcp/run.sh

The scope (-s) can be user, project, or local.

Claude Desktop

Open Settings > Developer > Edit Config and add to claude_desktop_config.json:

{
  "mcpServers": {
    "threejs": {
      "command": "/path/to/threejs-mcp/run.sh"
    }
  }
}

Cursor

Open Settings > MCP > Add new global MCP server and add to ~/.cursor/mcp.json:

{
  "mcpServers": {
    "threejs": {
      "command": "/path/to/threejs-mcp/run.sh"
    }
  }
}

Or add to .cursor/mcp.json in your project root for project-scoped configuration.

Windsurf

Open Settings > MCP > Add Server > Add custom server and add to your MCP config:

{
  "mcpServers": {
    "threejs": {
      "command": "/path/to/threejs-mcp/run.sh"
    }
  }
}

VS Code / GitHub Copilot

Add to your user or workspace settings.json:

{
  "mcp": {
    "servers": {
      "threejs": {
        "command": "/path/to/threejs-mcp/run.sh"
      }
    }
  }
}

Or create .vscode/mcp.json in your project root:

{
  "servers": {
    "threejs": {
      "command": "/path/to/threejs-mcp/run.sh"
    }
  }
}

Zed

Add to your Zed settings (~/.config/zed/settings.json):

{
  "context_servers": {
    "threejs": {
      "command": {
        "path": "/path/to/threejs-mcp/run.sh"
      }
    }
  }
}

Cline

Open Settings > MCP Servers > Edit MCP Settings and add to the config:

{
  "mcpServers": {
    "threejs": {
      "command": "/path/to/threejs-mcp/run.sh"
    }
  }
}

Continue

Add to your ~/.continue/config.yaml:

mcpServers:
  - name: threejs
    command: /path/to/threejs-mcp/run.sh

Roo Code

Open Settings > MCP > Edit MCP Settings and add:

{
  "mcpServers": {
    "threejs": {
      "command": "/path/to/threejs-mcp/run.sh"
    }
  }
}

Any other MCP client

This is a standard stdio MCP server. Run it with:

/path/to/threejs-mcp/run.sh

Scraping docs

The docs/ directory contains condensed markdown scraped from the Three.js documentation. To regenerate:

uv run python scrape_docs.py

This requires the httpx and beautifulsoup4 packages (not included in the main dependencies).

Related MCP Connectors

Related MCP Servers

  • A
    license
    A
    quality
    D
    maintenance
    Enables AI agents to control and manipulate live 3D scenes across frameworks like Three.js, A-Frame, and Babylon.js using a comprehensive set of object and environment tools. It features an integrated in-world chat system that allows for real-time scene modifications directly from within the 3D canvas.
    33
    78 npm
    3
    MIT
  • A
    license
    Not graded
    quality
    A
    maintenance
    Enables AI agents to inspect and modify live Three.js scenes in real time through 59 tools covering objects, materials, shaders, textures, animations, performance monitoring, memory diagnostics, and code generation. Works with vanilla Three.js, React Three Fiber, and any framework without changing your project, using an injected browser bridge and in-page devtools overlay.
    197 npm
    MIT
  • A
    license
    Not graded
    quality
    A
    maintenance
    Enables AI agents to inspect and edit live Three.js scenes in the browser — objects, materials, shaders, textures, lights, animation, performance and memory — with 69 tools covering scene trees, screenshots, website audits and video frame capture. Changes can be previewed live with zero project modifications, then converted into ready-to-paste vanilla Three.js or React Three Fiber code.
    197 npm
    MIT
  • A
    license
    Not graded
    quality
    A
    maintenance
    Enables AI agents to inspect and live-edit Three.js scenes, materials, shaders, lights and animation in the browser through 69 tools, then turn any previewed change into ready-to-paste Three.js or React Three Fiber code. Also supports website performance audits, video frame capture, and Playwright/Puppeteer test integration.
    197 npm
    MIT