Three.js MCP Server

A Model Context Protocol (MCP) server that provides tools for understanding and working with Three.js documentation.

Features

This MCP server provides the following tools:

1. search_threejs_docs - Search for Three.js classes, methods, or concepts
2. get_threejs_class_info - Get detailed information about a specific Three.js class
3. list_threejs_categories - List all major categories in Three.js documentation
4. get_threejs_category - Get information about a specific category
5. get_threejs_getting_started - Get getting started guide and basic setup
6. explain_threejs_concept - Get explanations of Three.js concepts

Installation

npm install
npm run build

Usage with Claude Desktop

Add this to your Claude Desktop configuration file:

MacOS: ~/Library/Application Support/Claude/claude_desktop_config.json Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "threejs": {
      "command": "node",
      "args": ["c:\\Projects\\ThreeJSMCP\\dist\\index.js"]
    }
  }
}

Then restart Claude Desktop.

Usage with VSCode

VSCode Claude Extension

To use this MCP server with the Claude Code VSCode extension:

1. Open VSCode Settings (File > Preferences > Settings or Ctrl+,)
2. Search for "Claude Code: MCP Servers"
3. Click "Edit in settings.json"
4. Add the following configuration:

{
  "claude-code.mcpServers": {
    "threejs": {
      "command": "node",
      "args": ["c:\\Projects\\ThreeJSMCP\\dist\\index.js"]
    }
  }
}

Note: Adjust the path based on your project location. Use forward slashes on macOS/Linux:

"args": ["/Users/yourname/Projects/ThreeJSMCP/dist/index.js"]

5. Reload VSCode or restart the Claude Code extension
6. The Three.js MCP tools will now be available when using Claude in VSCode

GitHub Copilot Chat

GitHub Copilot currently does not support MCP servers directly. However, you can:

1. Use with Claude Code extension - The Claude Code extension in VSCode supports MCP and can work alongside Copilot
2. Reference the documentation manually - Use the tools in Claude Desktop to get documentation, then paste relevant info into Copilot Chat
3. Watch for updates - MCP support may be added to Copilot in the future

Alternative: Use Claude Desktop Alongside VSCode

The recommended workflow is to:

1. Configure the MCP server in Claude Desktop (as shown above)
2. Keep Claude Desktop open while coding in VSCode
3. Ask Three.js questions in Claude Desktop
4. Copy code snippets and documentation back to VSCode

Available Tools

search_threejs_docs

Search the Three.js documentation for classes, methods, or concepts.

Example queries:

• "PerspectiveCamera"
• "geometry"
• "materials"
• "lights"

get_threejs_class_info

Get detailed information about a specific Three.js class including constructor signature and key methods.

Supported classes include:

• Cameras: PerspectiveCamera, OrthographicCamera
• Geometries: BoxGeometry, SphereGeometry
• Materials: MeshStandardMaterial, MeshPhongMaterial
• Renderers: WebGLRenderer
• Math: Vector3, Vector2, Quaternion, Matrix4
• Loaders: GLTFLoader, TextureLoader
• And more...

list_threejs_categories

List all major categories in the Three.js API documentation:

• Animation
• Audio
• Cameras
• Geometries
• Lights
• Materials
• Math
• Renderers
• And more...

get_threejs_category

Get information about a specific category and common classes within it.

Categories: cameras, geometries, materials, lights, loaders, renderers, math, objects

get_threejs_getting_started

Returns a complete getting started guide with:

• Installation instructions
• Basic scene setup code
• Links to official tutorials
• Essential resources

explain_threejs_concept

Get detailed explanations of core Three.js concepts:

• scene graph - Understanding the scene hierarchy
• materials - Different material types and when to use them
• lights - Lighting types and their purposes
• cameras - Camera types and setup
• rendering - The rendering pipeline
• coordinates - Three.js coordinate system
• geometry - How geometries work

Example Usage

Once configured in Claude Desktop, you can ask questions like:

• "How do I create a perspective camera in Three.js?"
• "Show me information about MeshStandardMaterial"
• "What are the different types of lights in Three.js?"
• "Explain the scene graph concept"
• "Search for raycasting"

The MCP server will provide relevant documentation links, code examples, and explanations.

Development

# Build the project
npm run build

# Watch for changes
npm run watch

Documentation Source

All information is based on the official Three.js documentation at https://threejs.org/docs/

License

MIT