Getting Started

Connect mcpsystem.design to your AI assistant via the Model Context Protocol (MCP).

Cursor

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

.cursor/mcp.json

{
  "mcpServers": {
    "mcpdesignsystem": {
      "url": "https://www.mcpsystem.design/sse"
    }
  }
}

Add this configuration to your .claude/settings.json file:

.claude/settings.json

{
  "mcpServers": {
    "mcpdesignsystem": {
      "url": "https://www.mcpsystem.design/sse"
    }
  }
}

After adding the configuration, restart your editor. Then try asking your AI assistant:

The MCP server exposes 13 tools organized into three categories:

Tailwind CSS patterns - copy-paste HTML with class variations

`list_patterns`	List all Tailwind patterns organized by category
`get_pattern`	Get pattern with class variations for variants, sizes, and states
`search_patterns`	Search patterns by name, description, or category
`get_pattern_examples`	Get code examples for a pattern

Design tokens for colors, typography, and spacing

`get_style_guide`	Get colors, typography, spacing, and breakpoints
`get_colors`	Get color tokens, optionally filtered by category
`get_typography`	Get typography scale and font styles
`get_spacing`	Get spacing scale tokens
`get_breakpoints`	Get responsive breakpoint definitions
`get_design_system_info`	Get design system overview and statistics

@mcpsystem/ui - Lit components you import and use

`list_components`	List all @mcpsystem/ui components for AI chat interfaces
`get_component`	Get component docs with props, events, CSS parts, and examples
`search_components`	Search @mcpsystem/ui components by name or description