New — Just shipped

MCP Server

Install and use Spectrum UI components directly from your AI coding assistant. No copy-pasting, no tab-switching — just ask Claude, Cursor, or Windsurf.

What is an MCP server?

The Model Context Protocol (MCP) is an open standard that lets AI assistants talk directly to external tools and data sources. The Spectrum UI MCP server gives your AI assistant full access to every component in our library — so it can browse, search, and install components into your project with a single prompt.

Example conversation:

You

Add the AnimatedDrawer from Spectrum UI to my project

Searching for AnimatedDrawer in Spectrum UI registry...

Running: bunx --bun shadcn@latest add @spectrumui/animateddrawer

✅ Done! AnimatedDrawer installed to components/spectrumui/animated-drawer.tsx

What the AI can do

The MCP server exposes 5 tools to your AI assistant:

list_components

List all components, optionally filtered by category

search_components

Fuzzy search by keyword — ranked by relevance

get_component

Full metadata + install instructions for a specific component

list_categories

All categories (AI, Forms, Animation…) with counts

install_component

Runs the CLI to install directly into your project

Setup

Make sure Node.js 18+ is installed

The server runs via npx — no global install needed.

bash

node --version   # should print v18 or higher

Add to your AI editor config

Choose your editor and paste the config:

Claude Desktop~/.claude/claude_desktop_config.json

{
  "mcpServers": {
    "spectrum-ui": {
      "command": "npx",
      "args": ["-y", "@spectrumui/mcp"]
    }
  }
}

Cursor.cursor/mcp.json (project root)

{
  "mcpServers": {
    "spectrum-ui": {
      "command": "npx",
      "args": ["-y", "@spectrumui/mcp"]
    }
  }
}

Windsurf~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "spectrum-ui": {
      "command": "npx",
      "args": ["-y", "@spectrumui/mcp"]
    }
  }
}

Restart your editor

After saving the config, fully restart the app. In Claude Desktop you should see spectrum-ui listed in the tools panel (hammer icon).

Try it out

Open a new chat and try one of these:

›"List all Spectrum UI components"

›"Search for an animated card in Spectrum UI"

›"Install the kanban board from Spectrum UI into my project"

›"What categories does Spectrum UI have?"

›"Get details for the event-calendar component"

Requirements

Requirement	Details
Node.js	v18 or higher
Package manager	npm, pnpm, yarn, or bun
Project stack	Next.js + Tailwind CSS + shadcn/ui (for install_component)
AI editor	Claude Desktop, Cursor, Windsurf, or any MCP-compatible editor

How component installation works

When you ask the AI to install a component, it runs the Spectrum UI CLI command under the hood. The server tries bunx first (faster if you have bun), then falls back to npx automatically.

bash

# What runs behind the scenes (Bun):
bunx --bun shadcn@latest add @spectrumui/<component-name>

# Fallback (npm/pnpm/yarn):
npx shadcn@latest add @spectrumui/<component-name>

You can also run these commands manually — they're shown in every component's docs page under the CLI tab.

Troubleshooting

The server doesn't appear in Claude Desktop

Make sure you fully quit and restarted Claude Desktop (not just closed the window). On macOS, right-click the dock icon → Quit.

install_component fails with permission errors

Run the command manually in your terminal first to confirm shadcn is set up in your project. You need a components.json file at your project root.

Components not found / registry errors

The MCP server fetches the latest registry from spectrumhq.in. Check your internet connection, or open an issue on GitHub.

The server works but Cursor doesn't show it

In Cursor, the mcp.json must be in the .cursor/ folder at your project root (not a global location). Reload the window after adding it.

Links & Resources

npm — @spectrumui/mcp GitHub — spectrum-ui repo Model Context Protocol spec shadcn/ui CLI docs