Skip to main content
⌘K

MCP Tools

MCP tools for design systems that give AI assistants live access to 66 components, 30 blocks, and 106 design tokens via the Model Context Protocol.

Model Context Protocol for Design Systems

The Model Context Protocol (MCP) is an open standard that lets AI assistants connect to external data sources and tools. Instead of relying on training data to guess component APIs, AI can query your actual design system in real time.

The Fragments design system MCP server exposes your component metadata, design tokens, composition patterns, and accessibility rules as structured tools that any MCP-compatible AI assistant can call. This means when you ask AI to "build a settings form", it uses your real components with the correct props, variants, and usage patterns, not generic HTML or made-up class names.

In the current docs build, that includes 12 MCP tools over 66 components, 30 composition blocks, and 106 documented design tokens.

Use the component metadata and docs pages as your source of truth, the CLI Reference to build fragments.json, and WebMCP when you need browser-native tool registration.

For deeper workflow examples, read MCP Tools for Design Systems: Practical Workflows for React Teams and the 12-tool deep dive.

Setup

No local installation is required. The MCP configuration uses npx to auto-fetch the latest version of the server when your AI tool starts it.

If you prefer to pin a specific version, install the package as a dev dependency:

npm install -D @fragments-sdk/mcp

Configure Your AI Tool

Add the Fragments MCP server to your AI tool's configuration. The config file location varies by tool. Select yours below:

// .mcp.json (project root)
{
  "mcpServers": {
    "fragments": {
      "command": "npx",
      "args": ["-y", "@fragments-sdk/mcp@latest"]
    }
  }
}

The server auto-discovers your fragments.json by walking up from the project root. If it can't find it, make sure you've run fragments build and that the outFile path in your config is correct.

Once configured, try asking your AI assistant something like: "Build a login form using the design system". It will call the Fragments tools to discover components, check props, and generate code that matches your system.

Use Fragments MCP in Claude

Claude Code and Claude Desktop can call the Fragments MCP server after you add the project config. Start with prompts that ask Claude to discover components, inspect props, and then implement UI so it uses your system metadata instead of inventing markup.

See the step-by-step guide: Using Fragments MCP in Claude for Design System-Aware UI Workflows.

Use Fragments MCP in Cursor

Cursor works well for iterative UI generation: keep the Fragments MCP server configured in .cursor/mcp.json, then prompt Cursor to inspect components before generating screens. This keeps generated code aligned with your design tokens and usage guidelines.

See the Cursor-specific walkthrough: Using Fragments MCP in Cursor for Design System-Aware UI Generation.

Tools

The MCP server exposes 12 tools. AI assistants call these automatically when generating or modifying UI code, and you don't need to invoke them manually.

FAQ

Do I need the CLI before using the MCP server?

Yes. The MCP server reads compiled Fragments data, so you need to run fragments build first to generate the fragments.json file.

What is the difference between MCP and WebMCP?

MCP runs as a local server process for coding assistants like Cursor and Claude Code. WebMCP registers tools in the browser using navigator.modelContext for browser-based AI experiences.

Can MCP tools generate code that matches my design system?

That is the point of Fragments. The tools expose your real component metadata, token names, and usage rules so AI can generate code against your actual APIs and patterns.