MCP Server

The @spectre-ui/mcp package is a Model Context Protocol (MCP) server that gives AI coding assistants full access to the spectre-ui documentation. It exposes 59 resources (component docs, hook docs, guides, and design system data) along with 7 prompt templates for common UI building tasks.

Once configured, your AI assistant can read any spectre-ui documentation on demand, use the correct component APIs, and follow the project's design conventions without you needing to paste docs into the chat.

Configuration

All supported clients use the same server definition. Add the configuration below to the appropriate file for your tool.

Claude Code

Create or edit .mcp.json in your project root:

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

Cursor

Create or edit .cursor/mcp.json in your project root:

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

Claude Desktop

Edit ~/Library/Application Support/Claude/claude_desktop_config.json:

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

Available Resources

The MCP server exposes 59 resources via spectre:// URIs. Your AI assistant can read any of these to get up-to-date documentation.

URI Pattern	Description
`spectre://overview`	Project overview, philosophy, and feature summary
`spectre://components`	Full list of all available components
`spectre://component/{name}`	Detailed docs for a specific component (props, variants, examples)
`spectre://hooks`	Full list of all available hooks
`spectre://hook/{name}`	Detailed docs for a specific hook (parameters, return value, examples)
`spectre://guides/{slug}`	Guide content by slug (e.g. getting-started, theming, installation)
`spectre://design-system/tokens`	Design tokens including colors, spacing, typography, and border radius values
`spectre://design-system/colors`	Full color palette with CSS variable mappings
`spectre://design-system/typography`	Font families, sizes, weights, and line heights

Available Prompts

The server includes 7 prompt templates that give your AI assistant a head start on common tasks. These prompts automatically pull in relevant component and design system documentation.

Prompt	Description
`build-dashboard`	Scaffold a full dashboard layout using Card, Stat, DataTable, Grid, and Sidebar
`build-landing-page`	Create a landing page with Navbar, Container, GridBackground, and TerminalText
`build-form`	Build an accessible form with Input, Select, Checkbox, Switch, and Toast feedback
`build-data-view`	Set up a data display view with DataTable, Badge, Avatar, and Skeleton loaders
`setup-project`	Initialize a new project with SpectreThemeProvider, styles import, and Tailwind config
`build-navigation`	Build a navigation system with Navbar, Sidebar, Breadcrumb, and CommandPalette
`add-theme-switching`	Add dark/light theme switching using useSpectreTheme and Switch

Usage Example

After configuration, your AI assistant automatically has access to all spectre-ui documentation. You can ask it things like:

“Build me a dashboard page using spectre-ui components”
“Create a form with validation using spectre-ui Input and Select”
“What props does the Card component accept?”
“Set up theming with dark/light mode toggle”

The assistant will read the relevant resources from the MCP server to produce accurate, up-to-date code that follows spectre-ui conventions.