@classic-homes/theme-mcp

MCP (Model Context Protocol) server for the Classic Theme design system. This package enables AI assistants like Claude to understand and correctly use Classic Theme components, design tokens, layout patterns, and validation schemas.

Why Use This?

When AI assistants have access to the MCP server, they can:

• Generate correct component code with proper props and variants
• Follow design system patterns for layouts and forms
• Use the right design tokens for colors, spacing, and typography
• Validate usage to catch errors before runtime
• Speed up development by eliminating guesswork

Quick Start

With npx (no installation)

npx @classic-homes/theme-mcp

Install globally

npm install -g @classic-homes/theme-mcp
classic-theme-mcp

Install in a project

npm install --save-dev @classic-homes/theme-mcp

Configure Claude Code

Add to your ~/.claude/settings.json:

{
  "mcpServers": {
    "classic-theme": {
      "command": "npx",
      "args": ["@classic-homes/theme-mcp"]
    }
  }
}

Or for a local installation:

{
  "mcpServers": {
    "classic-theme": {
      "command": "node",
      "args": ["./node_modules/@classic-homes/theme-mcp/dist/cli.js"]
    }
  }
}

Restart Claude Code after updating the configuration.

What's Included

Resources (Read-Only Data)

Core component and design system resources:

• components://catalog
• components://list
• components://{name}
• components://category/{category}
• tokens://all
• tokens://colors
• tokens://spacing
• tokens://typography
• styles://all
• styles://integration
• styles://base
• styles://accessibility
• styles://utilities
• patterns://all
• patterns://layouts
• patterns://forms
• patterns://auth
• patterns://notifications
• patterns://{id}
• schemas://all
• schemas://auth
• schemas://common

Package-specific resources:

• auth://all
• auth://core
• auth://svelte
• auth://testing
• auth://types
• auth://api
• auth://core/{module}
• auth://svelte/{module}
• auth://quick-reference
• notifications://all
• notifications://core
• notifications://svelte
• notifications://types
• notifications://api
• notifications://utils
• notifications://core/{module}
• notifications://quick-reference
• docs://all
• docs://components
• docs://utilities
• docs://types
• docs://extensions
• docs://styles
• docs://quick-reference
• charts://all
• charts://theme
• charts://types
• charts://utils
• charts://quick-reference
• charts://props
• charts://data
• charts://events
• charts://reporting
• gantt://all
• gantt://types
• gantt://scheduling
• maps://all
• maps://theme
• maps://types
• maps://utils
• maps://route
• maps://geocoding
• maps://components
• maps://quick-reference
• maps://props
• maps://data
• maps://events
• maps://hooks
• maps://best-practices
• maps://theme-types
• maps://overlay-layers
• maps://migration
• maps://positioning
• native://all
• native://react
• native://svelte
• native://core
• native://features
• native://types
• native://quick-reference
• viewers://all
• viewers://formats
• viewers://setup

Tools (Queryable Functions)

Prompts (Templates)

Example Interactions

Ask Claude to create a dashboard

"Create a dashboard page with sidebar navigation and a data table"

Claude will use the MCP to look up DashboardLayout props, DataTable configuration, and generate correct TypeScript code.

Ask about component variants

"What variants does the Alert component have?"

Claude queries get_component_props and returns: default, destructive, success, warning, info.

Generate a form

"Create a contact form with name, email, and message fields"

Claude uses the build_form prompt to generate a form with FormField components, Zod validation, and proper error handling.

Component Categories

• core: Button, Input, Card, Badge, Label, etc.
• form: FormField, Select, Checkbox, RadioGroup, Slider, etc.
• layout: DashboardLayout, PublicLayout, AuthLayout, ErrorLayout, ActionHeader, Toolbar, SegmentedControl, ViewToggle
• feedback: Toast, Spinner, Skeleton, Alert
• data: DataTable, Tabs
• overlay: Dialog, AlertDialog, Tooltip, DropdownMenu
• navigation: Sidebar, Header, Footer, QuickLinks
• branding: LogoMain, LoadingLogo

For Package Maintainers

Regenerate Catalog

When Classic Theme components are updated:

npm run generate
npm run build

Build

npm run build      # Generate catalog + build
npm run build:fast # Build only (skip generation)

Test Locally

# Run the server
npm run start

# Test with MCP Inspector
npx @modelcontextprotocol/inspector node dist/cli.js

Requirements

• Node.js 18 or later
• Classic Theme packages installed in your project (for full functionality)

Related Packages

• @classic-homes/theme-svelte - Svelte component library
• @classic-homes/theme-react - React component library
• @classic-homes/theme-tokens - Design tokens
• @classic-homes/theme-tailwind-preset - Tailwind configuration

Documentation

• AI Integration Guide
• Component Documentation
• Getting Started

License

MIT