Skip to main content

AI Integration (MCP)

AI Integration (MCP)

Use the Classic Theme MCP server to enable AI-assisted development

Tags: setup ai mcp claude getting-started

Classic Theme provides an MCP (Model Context Protocol) server that enables AI assistants like Claude to understand and correctly use the design system. This dramatically speeds up development by letting AI generate correct component usage, layouts, and forms.

What is MCP?​

Model Context Protocol (opens in new tab) is an open standard that allows AI models to access external tools and data sources. The Classic Theme MCP server provides:

  • Component Catalog: All 45+ components with props, variants, and examples
  • Design Tokens: Colors, spacing, typography values
  • Layout Patterns: Dashboard, public, auth, error page templates
  • Form Patterns: Login, registration, contact form templates
  • Validation Schemas: Pre-built Zod schemas for common use cases

Installation​

Install the MCP server package:

npm install @classic-homes/theme-mcp

Or use it directly with npx:

npx @classic-homes/theme-mcp

Configure Claude Code​

Add the MCP server to your Claude Code configuration. Edit ~/.claude/settings.json:

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

Or if installed locally in a 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​

The MCP server exposes these resources that AI can read:

Resource Description
components://catalog Full component catalog with props and examples
components://list Quick component list with categories
components://{name} Individual component details (e.g., components://Button)
components://category/{cat} Components by category (core, form, layout, etc.)
tokens://colors Color palette (brand + semantic)
tokens://spacing Spacing scale
tokens://typography Font families, sizes, weights
patterns://layouts Layout patterns (dashboard, public, auth, error)
patterns://forms Form patterns (login, registration, contact)
schemas://auth Authentication validation schemas
schemas://common Common validation schemas

Available Tools​

The MCP server provides these tools AI can use:

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​

The MCP server includes 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​

Ask Claude to 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:

  1. Look up DashboardLayout props
  2. Get DataTable component details
  3. Generate correct code with proper types

Ask Claude to Build a Form​

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

Claude will:

  1. Use the build_form prompt
  2. Include proper FormField components
  3. Add Zod validation schema
  4. Handle submission with loading state

Ask Claude About Components​

"What variants does the Button component have?"

Claude will query the MCP server and return:

  • default, secondary, destructive, outline, ghost, link

For Other Projects​

The MCP server works with any project using Classic Theme components. Install it in your project:

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

Add to your project's Claude Code configuration, and AI assistants will understand your design system.

Keeping the Catalog Updated​

If you extend Classic Theme with custom components, regenerate the catalog:

cd node_modules/@classic-homes/theme-mcp
npm run generate
npm run build

Or fork the MCP package and customize it for your organization's components.

Troubleshooting​

MCP Server Not Connecting​

  1. Check Claude Code settings are correct
  2. Ensure the path to the MCP server is valid
  3. Try running manually: npx @classic-homes/theme-mcp
  4. 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.

On this page