Builder | Builder MCP

Builder MCP

Connect your AI coding assistant to Builder's MCP to bring Builder prototypes into your repo, push local branches for visual collaboration, and generate code grounded in your design system.

Note: For details on the Publish MCP, visit Builder CMS MCP Server.

Key features

The Builder MCP server connects your AI coding assistant to your branches and design system documentation in Builder. This enables AI-powered code generation that follows your design system's components, patterns, and tokens, and allows you to move code and context seamlessly between Builder and your IDE.

With the Builder MCP, your AI assistant can:

Install the Builder MCP

Setting up the Builder MCP only takes a few steps:

  1. Confirm all prerequisites are met.
  2. Authenticate with Builder on the command line.
  3. Configure your IDE.

Check prerequisites

To use the Builder MCP, you must have a Builder account. Additionally, make sure Node.js v20 or later is installed.

Authenticate with Builder

Run this command and follow the prompts to sign in:

npx @builder.io/dev-tools@latest auth

This stores your credentials locally for future use.

Configure your IDE

Depending on your local setup, follow the instructions below to configure your AI agent to work with Builder's MCP.

Claude Code

Add the following to your global config at ~/.claude/settings.local.json or to your .mcp.json file within your application's root.

{
  "mcpServers": {
    "builder-mcp": {
      "command": "npx",
      "args": ["@builder.io/dev-tools@latest", "mcp"]
    }
  }
}

You can also use the command line, running the following command:

claude mcp add builder-mcp -- npx @builder.io/dev-tools@latest mcp

Cursor

Add the following to your global config at ~/.cursor/mcp.json or to your .cursor/mcp.json file within your application's root.

{
  "mcpServers": {
    "builder-mcp": {
      "command": "npx",
      "args": ["@builder.io/dev-tools@latest", "mcp"]
    }
  }
}

After adding the configuration, restart Cursor or open the Command Palette and run MCP: Restart Servers.

VS Code with GitHub Copilot

Add the following to your .vscode/mcp.json file within your application's root.

{
  "servers": {
    "builder-mcp": {
      "type": "stdio",
      "command": "npx",
      "args": ["@builder.io/dev-tools@latest", "mcp"]
    }
  }
}

After adding the above:

  1. Open Command Palette (Cmd/Ctrl + Shift + P).
  2. Run MCP: List Servers.
  3. Click Start to initialize the server.

Builder MCP features

The Builder MCP server provides several tools to your AI assistant.

List design systems and docs

Request a list of all design systems from your AI assistant:

Example Prompt

Provide me a list of all design systems.

You can also request documentation for components, tokens, icons, or agents:

Example Prompt

List all documentation for components within my design system.

Get specific documentation

Request documentation for a specific design system item, providing an ID:

Example Prompt

Provide me documentation for the design system item with an ID of abc123.

Create implementation plan with your design system

The Builder MCP can analyze a prompt and develop a plan using your design system.

Example Prompt

Implement this banner on the homepage, using the following Figma design: vcp://quickcopy/{id}

Implement code with your design system

Builder MCP can directly implement UI code in your project using your design system.

Example Prompt

Implement a login form with email validation using my design system.

When combined with a Figma design, the AI assistant:

  1. Analyzes your design system's available components and tokens
  2. Generates implementation code following your project's patterns
  3. Writes files directly to your project
  4. Returns a summary of files changed with line counts

Note: A 5-minute timeout is in place to prevent runaway operations.

Implement Builder prototypes

Implement Builder prototypes directly in your local project by providing a Project URL.

Example Prompt

Implement this prototype in my project: https://builder.io/app/projects/abc123/my-feature

You can also provide specific instructions:

Example Prompt

Take this Builder prototype and adapt it to use our existing auth components: https://builder.io/app/projects/abc123/my-feature

Sync branches with Builder

Push and pull branches with the Builder MCP to keep your local and remote versions synchronized.

These actions work the same as the pull and push commands from the Builder CLI.

Usage examples

Once configured, query your AI assistant with prompts like the following:


## Convert Figma designs to code

The Builder MCP can read Figma designs exported from the [Builder Figma plugin](/content/c/docs/builder-figma-plugin/index.html). This allows your AI assistant to understand the visual design and implement it using your design system.

### Get a quick copy ID from Figma

To access the quick copy ID from Figma:

1. Open your design in Figma.
2. Select the frame or component you want to export.
3. Open the Builder Figma Plugin plugin.
4. Click **Smart Export** or **Export to Code**.
5. Wait for the export to complete.
6. Copy the **Quick Copy ID** displayed in the plugin. The code should look something like `vcp-abc123def456`.

### Use the quick copy ID with your AI assistant

Once you have the Quick Copy ID, you can reference it in prompts to your AI assistant:

**Example Prompt**

Implement this Figma design using my design system: vcp-abc123def456


In response to this prompt, your AI assistant:

1. Reads the exported Figma design data.
2. Analyzes your design system's available components.
3. Creates an implementation plan that matches the design while using your existing components.

For more details on the Figma plugin workflow, see [Generate Code with Builder CLI](/content/c/docs/figma-to-code-builder-cli/index.html).

## What's next