MCP Server
Use the Spectrum UI MCP server to browse, search, and install components from your AI assistant.
Model Context Protocollets an AI assistant call tools directly. With the Spectrum UI server connected, you can ask it to "add the kanban board" or "build a landing page with Spectrum UI" and it browses the registry and runs the install itself. It ships as @spectrumui/mcp and runs through npx — nothing to install globally.
Pick your AI tool
We'll give you the exact command to run — or wire it by hand in Configuration.
Run the following command in your project:
claude mcp add spectrum-ui -- npx -y @spectrumui/mcpRestart Claude Code and try the following prompts:
- Show me all available components in the Spectrum UI registry
- Add the kanban board and animated drawer to my project
- Build a testimonial section using Spectrum UI components
Note: You can use the /mcp command in Claude Code to debug the MCP server.
Configuration
Every client but Codex takes the same JSON. Codex takes the same server as a TOML table.
{
"mcpServers": {
"spectrum-ui": {
"command": "npx",
"args": ["-y", "@spectrumui/mcp"]
}
}
}[mcp_servers.spectrum-ui] command = "npx" args = ["-y", "@spectrumui/mcp"]
| Client | Config file |
|---|---|
| Claude Code | .mcp.json |
| Claude Desktop | claude_desktop_config.json |
| Cursor | .cursor/mcp.json |
| Codex | ~/.codex/config.toml |
| Windsurf | ~/.codeium/windsurf/mcp_config.json |
| VS Code | .vscode/mcp.json |
You need Node 18 or newer. Installing a component also needs a components.json at your project root — that is, a project shadcn has already been initialised in.
Available Tools
| Tool | Description |
|---|---|
list_components | List all components, optionally filtered by category |
search_components | Fuzzy search by keyword, ranked by relevance |
get_component | Full metadata and install instructions for one component |
list_categories | All categories with component counts |
install_component | Runs the CLI to install into your project |
install_component shells out to the shadcn CLI — bunx first, falling back to npx:
bunx --bun shadcn@latest add @spectrumui/<component> # or npx shadcn@latest add @spectrumui/<component>
Troubleshooting
The server never appears
Quit the editor completely and reopen it — closing the window is not enough in Claude Desktop. In Claude Code, run /mcpto see the server's status; in Codex, run codex mcp list.
Installs fail
Run the install command yourself in a terminal first. If that fails too, the project has no components.json and needs npx shadcn@latest init.
Cursor does not list it
mcp.json has to sit in .cursor/ at the project root, not in a global folder. Reload the window after adding it.