Builder DSI MCP

enterprise plans

Connect your AI coding assistant to Builder's Design System Intelligence 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 Design System Intelligence (DSI) 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 DSI MCP, your AI assistant can:

Browse and search your component library
Access component usage guidelines and code examples
Query design tokens (colors, typography, spacing)
Import Figma designs into your IDE using Builder's Figma Plugin
Generate implementation plans using your design system

For more details on Builder's Design System Intelligence, visit Design System Intelligence Overview.

Install the Builder MCP

Setting up the Builder DSI MCP only takes a few steps.

Check prerequisites

To use the Builder DSI MCP, you must have a Builder account. Additionally, make sure you have Node.js v20 or above 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 DSI 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.

DSI MCP features

The DSI 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 DSI MCP's main feature is to 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}"

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 DSI 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?