threejs-mcp

threejs-mcp

Enables AI assistants to generate and modify Three.js 3D scenes by providing a wide range of tools for scene setup, cameras, geometry, materials, lighting, controls, loaders, animation, interaction, helpers, post-processing, environment, UI, physics, and XR.

Category
Visit Server

README

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

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).

Recommended Servers

playwright-mcp

playwright-mcp

A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.

Official
Featured
TypeScript
Magic Component Platform (MCP)

Magic Component Platform (MCP)

An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.

Official
Featured
Local
TypeScript
Audiense Insights MCP Server

Audiense Insights MCP Server

Enables interaction with Audiense Insights accounts via the Model Context Protocol, facilitating the extraction and analysis of marketing insights and audience data including demographics, behavior, and influencer engagement.

Official
Featured
Local
TypeScript
VeyraX MCP

VeyraX MCP

Single MCP tool to connect all your favorite tools: Gmail, Calendar and 40 more.

Official
Featured
Local
graphlit-mcp-server

graphlit-mcp-server

The Model Context Protocol (MCP) Server enables integration between MCP clients and the Graphlit service. Ingest anything from Slack to Gmail to podcast feeds, in addition to web crawling, into a Graphlit project - and then retrieve relevant contents from the MCP client.

Official
Featured
TypeScript
Kagi MCP Server

Kagi MCP Server

An MCP server that integrates Kagi search capabilities with Claude AI, enabling Claude to perform real-time web searches when answering questions that require up-to-date information.

Official
Featured
Python
E2B

E2B

Using MCP to run code via e2b.

Official
Featured
Neon Database

Neon Database

MCP server for interacting with Neon Management API and databases

Official
Featured
Exa Search

Exa Search

A Model Context Protocol (MCP) server lets AI assistants like Claude use the Exa AI Search API for web searches. This setup allows AI models to get real-time web information in a safe and controlled way.

Official
Featured
Qdrant Server

Qdrant Server

This repository is an example of how to create a MCP server for Qdrant, a vector search engine.

Official
Featured