classmcp

Multi-Framework MCP Server for AI-Optimized CSS Generation

Stop wasting tokens on long utility class strings. Let AI generate code with semantic class names like btn-primary and card - with full SSR safety awareness and optional minification.

Supports Tailwind CSS, Bootstrap 5, UnoCSS, and Tachyons.

The Problem

When AI generates utility-first CSS code, it creates verbose class strings:

<button class="inline-flex items-center justify-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors">
  Click me
</button>

This wastes:

• AI tokens - longer context = higher costs
• Your time - harder to read and debug
• Bundle size - repeated patterns bloat HTML
• SSR safety - easy to accidentally use client-only patterns

The Solution

classmcp provides semantic class names to AI assistants:

<!-- Semantic -->
<button class="btn-primary">Click me</button>

<!-- Or ultra-minified for maximum savings -->
<button class="a">Click me</button>

The AI queries available patterns, uses short names, and you get clean, readable code that's SSR-safe.

Installation

For Claude Desktop

Add to your claude_desktop_config.json:

{
  "mcpServers": {
    "classmcp": {
      "command": "npx",
      "args": ["classmcp"]
    }
  }
}

For other MCP clients

npx classmcp

Features

Multi-Framework Support

Switch between CSS frameworks instantly:

set_framework: "tailwind"   # Default
set_framework: "bootstrap"  # Bootstrap 5
set_framework: "unocss"     # UnoCSS
set_framework: "tachyons"   # Tachyons

SSR Safety

Every pattern is marked for server-side rendering compatibility:

get_ssr_info: "modal-overlay"

→ Status: ⚠️ Requires Client JS
→ Warning: Modal visibility controlled by JS
→ Recommendations: Use useEffect to add client-only classes

Filter for SSR-safe patterns only:

list_classes: { ssrSafeOnly: true }

Minification

Generate ultra-short class names for maximum token savings:

get_class: { name: "btn-primary", minified: true }

→ Class: "a" (saves 11 chars per usage)

Custom Patterns

Define your own semantic class names by creating a .classmcp.json file in your project root:

Simple format:

{
  "customPatterns": [
    { "id": "brand-btn", "classes": "px-4 py-2 bg-brand-600 text-white rounded-lg font-semibold" },
    { "id": "pricing-card", "classes": "p-8 border-2 border-gray-100 rounded-2xl shadow-xl" }
  ]
}

With states and metadata:

{
  "customPatterns": [
    {
      "id": "brand-btn",
      "category": "buttons",
      "description": "Brand-colored primary button",
      "classes": {
        "base": "px-4 py-2 bg-brand-600 text-white rounded-lg font-semibold",
        "hover": "hover:bg-brand-700 hover:shadow-md",
        "focus": "focus:ring-2 focus:ring-brand-300"
      }
    }
  ],
  "overrideBuiltins": false,
  "defaultFramework": "tailwind"
}

Config options:

Pattern options:

Alternative config locations:

• .classmcp.json (recommended)
• classmcp.config.json
• package.json under "classmcp" key

After modifying your config, use the reload_config tool to apply changes without restarting.

Available Tools

Class Categories

• buttons - btn-primary, btn-secondary, btn-danger, btn-ghost, btn-outline
• cards - card, card-bordered, card-header, card-body, card-footer
• forms - input, input-error, label, select, checkbox, textarea, toggle
• badges - badge-primary, badge-success, badge-warning, badge-danger
• alerts - alert-info, alert-success, alert-warning, alert-error
• avatars - avatar-sm, avatar-md, avatar-lg
• layout - container, flex-center, flex-between, stack, row, grid-2, grid-3
• typography - heading-xl, heading-lg, heading-md, text-body, text-muted
• navigation - nav, nav-link, nav-link-active
• modals - modal, modal-overlay, modal-header, modal-body, modal-footer
• tables - table, table-header, th, td, tr-hover
• lists - list, list-item, list-item-hover
• loading - spinner, skeleton, skeleton-text, skeleton-avatar
• dividers - divider, divider-vertical

Usage Example

Ask Claude:

"Create a card with a user profile, showing avatar, name, email, and action buttons"

Claude will use classmcp to generate:

<div class="card">
  <div class="flex-start space-x-4">
    <div class="avatar-lg">JD</div>
    <div class="stack">
      <h3 class="heading-sm">John Doe</h3>
      <p class="text-muted">john@example.com</p>
    </div>
  </div>
  <div class="card-footer">
    <button class="btn-primary">Message</button>
    <button class="btn-secondary">Profile</button>
  </div>
</div>

Setup Your Project

1. Generate the CSS:

# Ask Claude to use the generate_css tool, or:
npx classmcp generate-css > src/classmcp.css

1. Import in your CSS:

Tailwind:

@import "tailwindcss";
@import "./classmcp.css";

Bootstrap:

@import "bootstrap/dist/css/bootstrap.min.css";
@import "./classmcp.css";

Token Savings

Over a full page with 50+ components, this adds up to thousands of tokens saved.

SSR Safety Guide

Safe for SSR (no JS needed)

• All button variants (hover/focus are CSS pseudo-classes)
• All card patterns
• Form inputs (base styling)
• Typography patterns
• Layout utilities
• Badges, alerts

Requires Client JS (may cause hydration issues)

• modal-overlay - visibility needs JS
• toggle - checked state
• spinner - animation timing
• alert-dismissible - close button

Use ssrSafeOnly: true or check with get_ssr_info when building Next.js/Nuxt/Remix apps.

Framework Statistics

How It Works

┌─────────────┐     ┌─────────────┐     ┌─────────────┐
│   Claude    │────▶│  classmcp   │────▶│  Your Code  │
│             │     │  (MCP)      │     │             │
│ "Make a     │     │             │     │ <button     │
│  button"    │     │ get_class   │     │  class=     │
│             │◀────│ btn-primary │     │  "btn-      │
│             │     │ (SSR-safe)  │     │   primary"> │
└─────────────┘     └─────────────┘     └─────────────┘

1. AI asks classmcp for available classes
2. classmcp returns semantic names + SSR safety info
3. AI generates code using short class names
4. You add the generated CSS to your project
5. Your CSS framework compiles it

Related: classpresso

• classmcp = AI layer (development time) - helps AI generate clean code
• classpresso = Build layer (build time) - optimizes existing code

They're complementary:

1. Use classmcp when writing new code with AI
2. Use classpresso to optimize existing/legacy code

License

MIT

Links

• classmcp.com
• classpresso
• npm
• AI Integration Guide