Model Context Protocol is a standard for exposing structured data and tools to AI assistants. By running this MCP server, AI tools like Claude, Cursor, and other AI coding assistants can intelligently query and understand your design system.

Features

Component Discovery: AI tools can search and retrieve detailed component information
Design Tokens: Access to all design tokens (colors, typography, spacing, AI-specific)
Usage Examples: Get framework-specific code examples (Vanilla JS, React, Vue, Svelte)
Research Citations: Every component includes research backing and design rationale
Design Principles: Access to core AI-first design principles

Installation

cd packages/mcp-server
npm install
npm run build

Usage with AI Tools

Claude Desktop

Add to your Claude Desktop configuration (~/Library/Application Support/Claude/claude_desktop_config.json on macOS):

{
  "mcpServers": {
    "ai-first-design-system": {
      "command": "node",
      "args": ["/path/to/AI-First-Design-System/packages/mcp-server/dist/index.js"]
    }
  }
}

Cursor / Other Tools

Configure your AI tool to use this MCP server by pointing to the built server file.

Available Resources

ai-first://components/list - List all components
ai-first://components/{name} - Get specific component metadata
ai-first://tokens/{category} - Get design tokens by category
ai-first://principles - AI design principles
ai-first://patterns - Common UI patterns

Available Tools

search_components

Search for components by name, description, or tags.

{
  "query": "chat"
}

get_component

Get detailed metadata for a specific component.

{
  "name": "ai-button"
}

get_usage_example

Get usage examples for a component in different frameworks.

{
  "component": "ai-chat-message",
  "framework": "react"
}

Development

# Watch mode for development
npm run dev

# Build
npm run build

# Type check
npm run type-check

Research Foundation

This MCP server implementation is based on:

Model Context Protocol Specification (2024)
Design Systems Collective: "Building AI-Ready Design Systems with Structured Data" (2024)
Supernova: "Making Design Systems AI-Ready" (2024)

Architecture

src/
├── index.ts              # Main MCP server
├── types.ts              # MCP-specific types
└── resources/
    ├── components.ts     # Component resource handlers
    └── tokens.ts         # Token resource handlers