Builder MCP

enterprise plans

Connect your AI coding assistant to Builder's MCP for component documentation, design tokens, and Figma integration.

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 design system documentation. This enables AI-powered code generation that follows your design system's components, patterns, and tokens.

With the Builder MCP, your AI assistant can:

Access component usage guidelines and code examples
Import Figma designs into your IDE using Builder's Figma Plugin
Implement code using your design system
Translate Builder prototypes to code locally
Sync content between your local environment and Builder

Install the Builder MCP

Setting up the Builder MCP only takes a few steps.

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.

Setup 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-dsi": {
      "command": "npx",
      "args": ["@builder.io/dev-tools@latest", "dsi-mcp"]
    }
  }
}

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

claude mcp add builder-dsi -- npx @builder.io/dev-tools@latest dsi-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-dsi": {
      "command": "npx",
      "args": ["@builder.io/dev-tools@latest", "dsi-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-dsi": {
      "type": "stdio",
      "command": "npx",
      "args": ["@builder.io/dev-tools@latest", "dsi-mcp"]
    }
  }
}

After adding the above:

Open Command Palette (Cmd/Ctrl + Shift + P).
Run MCP: List Servers.
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.

"Provide me a list of all design systems."

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

"List all documentation for components within my design system."

Get specific documentation

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

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

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

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

When combined with a Figma design, the AI assistant:

Analyzes your design system's available components and tokens
Generates implementation code following your project's patterns
Writes files directly to your project
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.

"Implement this prototype in my project: https://builder.io/app/projects/abc123/my-feature?spaceId=xyz789"

You can also provide specific instructions:

"Take this Builder prototype and adapt it to use our existing auth components: https://builder.io/app/projects/abc123/login-flow?spaceId=xyz789"

Sync branches with Builder

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

"Push my current branch to Builder."
"Pull the Builder branch called 'feature-redesign'."

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:

"What button components are available in my design system?"
"Show me how to use the Card component with an image and action buttons."
"Create a user profile page with an avatar, name, bio, and recent activity list."
"Implement this design using my design system: vcp-123abc."

Convert Figma designs to code

The Builder MCP can read Figma designs exported from the Builder Figma plugin. 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:

Open your design in Figma.
Select the frame or component you want to export.
Open the Builder Figma Plugin plugin.
Click Smart Export or Export to Code.
Wait for the export to complete.
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:

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

In response to this prompt, your AI assistant:

Reads the exported Figma design data.
Analyzes your design system's available components.
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.

What's next

Was this article helpful?