Hosted MCP

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.

Fragments MCP is hosted by Fragments Cloud. When you ask AI to build or edit UI, it can list design_system/list_primitives, list design tokens with design_system/list_tokens, conform unsaved file content with design_system/conform, and use design_system/prove_compliant for a validate-fix-validate loop over generated UI.

Those 4 tools run over your design system — the components, blocks, and tokens in the codebase your API key resolves to, not a fixed Fragments catalog. Connect any React project in Fragments Cloud (or point the tools at a local fragments.json) and they read its primitives and tokens in real time.

Build that fragments.json from your own components with the CLI — that catalog is the source of truth the tools read. Browse the Fragments component docs as a worked example of the metadata shape, 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 MCP deep dive.

Setup

Add the hosted endpoint to any MCP client that supports remote HTTP servers.

https://app.usefragments.com/api/mcp

Interactive RC clients discover OAuth from the endpoint. Headless clients authenticate with an HTTP authorization header.

Authorization: Bearer <FRAGMENTS_API_KEY>

Configure Your AI Tool

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

// .mcp.json (project root)
{
  "mcpServers": {
    "fragments": {
      "type": "http",
      "url": "https://app.usefragments.com/api/mcp",
      "headers": {
        "Authorization": "Bearer ${FRAGMENTS_API_KEY}"
      }
    }
  }
}

Cloud resolves your organization from the API key and uses the canonical design-system binding selected in Fragments Cloud.

Once configured, try asking your AI assistant something like: "Build a login form, then conform it to our design system before you finish". It should call the hosted design-system tools before finalizing code.

Use Fragments MCP in Claude

Claude Code and Claude Desktop can call hosted Fragments MCP after you add the project config. Start with prompts that ask Claude to list primitives, list design tokens with design_system/list_tokens, call design_system/conform, and use design_system/prove_compliant before hardcoded CSS lands.

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 hosted Fragments MCP endpoint configured in .cursor/mcp.json, then prompt Cursor to check catalog, token, and findings context before it stops.

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

Tools

The MCP endpoint exposes four design-system tools: design_system/list_primitives, design_system/list_tokens, design_system/conform, and design_system/prove_compliant.

FAQ