MCP

The Saturation UI registry supports the Model Context Protocol (MCP), allowing AI assistants like Claude, Cursor, Windsurf, and VS Code to discover, understand, and install components on your behalf — without you needing to look anything up.

What MCP does

Once configured, your AI assistant can:

• Browse the full list of available Saturation UI components
• Understand each component's props, variants, and usage
• Install components directly into your project via the shadcn CLI
• Resolve dependencies automatically

Step 1 — Configure your registry

Add the Saturation UI registry to your project's components.json:

{
  "registries": {
    "@saturation-ui": "https://ui.saturation.io/r/{name}.json"
  }
}

This tells the MCP server where to find Saturation UI components.

Step 1.5 — Install the theme (optional but recommended)

Install the Saturation UI design tokens — colors, fonts, and border radius — into your project:

npx shadcn@latest add https://ui.saturation.io/r/theme.json

This writes the CSS variables to your globals.css automatically.

Step 2 — Configure your editor

Claude Code

Add to your project's .mcp.json:

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}

Restart Claude Code and run /mcp to confirm the server shows Connected.

Cursor

Add to your project's .cursor/mcp.json:

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}

After adding, enable the shadcn MCP server in Cursor Settings. You should see a green dot when connected.

Windsurf

Add to your Windsurf MCP config (~/.codeium/windsurf/mcp_config.json):

{
  "mcpServers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}

VS Code (GitHub Copilot)

Add to your project's .vscode/mcp.json:

{
  "servers": {
    "shadcn": {
      "command": "npx",
      "args": ["shadcn@latest", "mcp"]
    }
  }
}

Open .vscode/mcp.json and click Start next to the shadcn server.

Usage

Once configured, you can prompt your AI assistant naturally:

"Add a credit card component to my dashboard page"

"Install the Saturation UI button and use it in my form"

"What variants does the Badge component support?"

"Show me all available Saturation UI components"

The assistant will look up the component, install it, and wire it into your code automatically.

Registry URL

The Saturation UI registry endpoint is:

https://ui.saturation.io/r/registry.json

This is a standard shadcn-compatible registry and works with any MCP client that supports the shadcn registry protocol.

Quick Install (no MCP)

To install a component directly without setting up MCP:

npx shadcn@latest registry add https://ui.saturation.io/r/registry.json