MCP Integration

Enable AI assistants like Claude to understand and correctly use the Classic Theme design system

What is MCP? The Model Context Protocol is an open standard that allows AI models to access external tools and data sources. The Classic Theme MCP server provides component catalogs, design tokens, layout patterns, and validation schemas to AI assistants.

Quick Start

1 Install the MCP Package

npm install @classic-homes/theme-mcp

Or use directly with npx:

npx @classic-homes/theme-mcp

2 Configure Claude Code

Add to ~/.claude/settings.json:

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

3 Alternative: Local Installation

If you have the package installed locally in your project

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

Restart Claude Code after updating the configuration.

Available Resources

Resources the AI can read to understand the design system

components://catalog Full component catalog with props and examples

components://list Component names and categories

components://{name} Individual component details

components://category/{category} Components filtered by category

tokens://all All token definitions

tokens://colors Brand and semantic color tokens

tokens://spacing Spacing scale

tokens://typography Typography scale and families

styles://all Complete styles catalog

styles://integration Style integration guide and layering

styles://base Base style rules

styles://accessibility Accessibility style details

styles://utilities Utility class reference

patterns://all All layout/form/auth/notification patterns

patterns://layouts Layout patterns

patterns://forms Form patterns

patterns://auth Authentication flow patterns

patterns://notifications Notification patterns

patterns://{id} Pattern details by ID

schemas://all All schema exports grouped by section

schemas://auth Auth schema groups

schemas://common Common schema groups

auth://all Complete auth package catalog

auth://core Auth core modules

auth://svelte Auth Svelte integration modules

auth://testing Auth testing helpers

auth://types Auth type reference

auth://api Auth API function reference

auth://core/{module} Auth core module details

auth://svelte/{module} Auth Svelte module details

auth://quick-reference Auth quick reference cheatsheet

notifications://all Complete notifications package catalog

notifications://core Notifications core modules

notifications://svelte Notifications Svelte modules

notifications://types Notifications type reference

notifications://api Notifications API function reference

notifications://utils Notifications utility helpers

notifications://core/{module} Notifications core module details

notifications://quick-reference Notifications quick reference

docs://all Complete docs package catalog

docs://components Docs component reference

docs://utilities Docs parser/highlighter utilities

docs://types Docs package exported types

docs://extensions Markdown extension reference

docs://styles Docs markdown styles reference

docs://quick-reference Docs package quick reference

charts://all Complete charts catalog

charts://theme Chart theme configuration

charts://types Chart types reference

charts://utils Chart utility functions

charts://quick-reference Chart quick reference

charts://props Chart component prop types

charts://data Chart data model types

charts://events Chart event types

charts://reporting Report charts, stat cards, sparklines and data helpers (Svelte only)

maps://all Complete maps catalog

maps://theme Map theme and style systems

maps://types Map type definitions

maps://utils Map utility helpers

maps://route Multi-stop route planning and maps deep links

maps://geocoding Forward geocoding adapters

maps://components Map component reference

maps://quick-reference Map quick reference

maps://props Map props type reference

maps://data Map data types

maps://events Map event types

maps://hooks React map hooks reference

maps://best-practices Map implementation best practices

maps://theme-types Map theme type reference

maps://overlay-layers Map overlay layer guides

maps://migration Map migration guidance

maps://positioning Map control positioning coordinator

native://all Complete native package catalog

native://react React native hooks reference

native://svelte Svelte native composables reference

native://core Native core API surface

native://features Native feature matrix by platform

native://types Native type definitions

native://quick-reference Native package quick reference

Available Tools

Tools the AI can use to search and validate components

`search_components`

Search for components by name, category, or functionality

Example: "Find all form components"

Returns: FormField, Input, Select, Checkbox, RadioGroup, etc.

`get_component_props`

Get detailed prop definitions for a specific component

Example: "Get props for DashboardLayout"

Returns: Full prop list with types, defaults, and descriptions

`suggest_pattern`

Get recommended patterns for common use cases

Example: "Suggest pattern for login page"

Returns: AuthLayout + form pattern with code example

`validate_component_usage`

Validate if component usage follows design system guidelines

Example: "Validate Button with variant="primary""

Returns: Error - "primary" is not valid, use "default"

Available Prompts

Pre-built prompts for common tasks

`build_form`

Generate a form following Classic Theme patterns

Arguments:

- formType: login, registration, contact, settings
- fields: email, password, name (comma-separated)
- includeValidation: true/false

`layout_page`

Generate a page layout using Classic Theme components

Arguments:

- pageType: dashboard, public, auth, error, form
- features: sidebar, search, user-menu (comma-separated)

`component_usage`

Generate correct usage for a specific component

Arguments:

- componentName: Button, Card, DashboardLayout, etc.
- variant: default, secondary, destructive, etc.
- useCase: Brief description

Usage Examples

Example prompts to try with Claude

Create a Dashboard

"Create a dashboard page with sidebar navigation, user menu, and a data table showing recent orders"

Claude will use the MCP server to look up DashboardLayout props, get DataTable component details, and generate correct code with proper types.

Build a Form

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

Claude will use the build_form prompt, include proper FormField components, add Zod validation schema, and handle submission with loading state.

Ask About Components

"What variants does the Button component have?"

Claude will query the MCP server and return: default, secondary, destructive, outline, ghost, link

Troubleshooting

Common issues and solutions

MCP Server Not Connecting

Check Claude Code settings are correct
Ensure the path to the MCP server is valid
Try running manually: npx @classic-homes/theme-mcp
Check for error messages in Claude Code logs

Outdated Component Information

The catalog is generated at build time. If you've updated components:

npm update @classic-homes/theme-mcp

AI Generating Incorrect Code

The AI uses the MCP server as a reference but may still make mistakes. Always review generated code and test it. Use the validate_component_usage tool to verify component usage.

Continue Exploring

Component Gallery Examples Full Documentation