v2.1.0 Custom Patterns + Cross-Platform MCP

Stop Wasting Context
on CSS Classes

Every token spent on hover:bg-blue-700 is a token you can't use for business logic. ClassMCP gives you ~90% fewer CSS tokens and more context for the code that matters.

Get Started Free Calculate Savings

~90%

Fewer CSS Tokens

AI Platforms

+23K

Extra Tokens for Code

The Problem

Your AI is Wasting Context on CSS

Every utility class consumes your context window. That's space you could be using for business logic, API calls, and actual code.

Before ClassMCP~45 tokens

<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">
  Submit
</button>

AI must parse 15 utility classes to understand "it's a primary button"

With ClassMCP~8 tokens

<button class="btn-primary">
  Submit
</button>

AI instantly understands intent. Clean, predictable, no hallucinations.

Features

Built for AI-First Development

Every design decision optimized for how AI models process and generate code.

~90% Fewer CSS Tokens

Semantic names vs full utility strings. Every token saved is more context for your actual business logic.

More Context for Code

Stop wasting context on CSS. A 200K window gives you 23K+ extra tokens for the code that actually matters.

Custom Patterns

Define your own semantic classes in .classmcp.json. Your design system, your naming conventions.

Cross-Platform

Works with Claude, ChatGPT, Gemini, Copilot, Cursor, and VS Code. MCP is now the industry standard.

4 Frameworks

Full support for Tailwind CSS, Bootstrap 5, UnoCSS, and Tachyons. Switch without rewriting code.

SSR Safe

All patterns marked with SSR safety info. No hydration mismatches in Next.js, Nuxt, or Remix.

New in v2.1.0

Your Design System,
Your Naming

Define custom semantic patterns in .classmcp.json. Your brand colors, your component names, your conventions.

State Variants

base, hover, focus, active, disabled states

Hot Reload

Update patterns without restarting the server

SSR Safety Flags

Mark patterns as hydration-safe for Next.js/Nuxt

// .classmcp.json
{
  "customPatterns": [
    {
      "id": "brand-button",
      "name": "Brand Button",
      "classes": {
        "base": "bg-gradient-to-r from-purple-600
                to-blue-500 text-white font-bold
                py-3 px-6 rounded-full",
        "hover": "hover:from-purple-700
                 hover:to-blue-600",
        "focus": "focus:ring-4 focus:ring-purple-300"
      },
      "category": "buttons",
      "ssr": { "safe": true }
    }
  ]
}

Cross-Platform MCP

One Tool, Every AI Platform

MCP is now the industry standard, adopted by Anthropic, OpenAI, Google, and Microsoft. ClassMCP works everywhere.

AI Client	Context Window	CSS Without ClassMCP	CSS With ClassMCP	Extra Context for Code
C Claude Desktop	200K tokens	30.0K tokens	6.9K tokens	+23.1K for coding
G ChatGPT	128K tokens	19.2K tokens	4.4K tokens	+14.8K for coding
Ge Gemini CLI	1000K tokens	150.0K tokens	34.5K tokens	+115.5K for coding
Co Microsoft Copilot	128K tokens	19.2K tokens	4.4K tokens	+14.8K for coding
Cu Cursor	200K tokens	30.0K tokens	6.9K tokens	+23.1K for coding
VS VS Code	128K tokens	19.2K tokens	4.4K tokens	+14.8K for coding

* Based on typical 15% context usage for CSS in frontend projects

Savings Calculator

Calculate Your Token Savings

See exactly how much you'll save based on your AI client and usage patterns.

Monthly Generations1,000 requests

CSS per Request~2,300 tokens

Your Monthly Savings

1.77M

Tokens Saved

$26.55

Cost Saved

Without ClassMCP:2.3M tokens/month

With ClassMCP:529K tokens/month

Reduction:77% fewer tokens

Live Demo

See the Difference

Compare raw Tailwind utility classes vs ClassMCP semantic patterns in real-time.

Raw Tailwind

~2,314 tokens

.btn-primary {
  @apply 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;
}

.card {
  @apply bg-white rounded-xl shadow-md p-6
  hover:shadow-lg transition-shadow;
}

.container {
  @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

/* ... 50+ more patterns ... */

ClassMCP Minified

~516 tokens

.a { @apply inline-flex items-center... }
.b { @apply bg-white rounded-xl... }
.c { @apply max-w-7xl mx-auto... }
.d { @apply text-4xl font-bold... }
.e { @apply flex items-center... }
.f { @apply py-16 sm:py-20... }

/* Same 50+ patterns in 77% fewer tokens */

/* Your HTML: */
<button class="a">Submit</button>
<div class="b">Card content</div>

Savings: 1,798 tokens (77.7%)

Get Started

Zero Config, Any Platform

One command. Works with Claude, ChatGPT, Gemini, Copilot, Cursor, and VS Code.

Claude Desktop

// claude_desktop_config.json
{
  "mcpServers": {
    "classmcp": {
      "command": "npx",
      "args": ["-y", "classmcp"]
    }
  }
}

Gemini CLI

// ~/.gemini/settings.json
{
  "mcpServers": {
    "classmcp": {
      "command": "npx",
      "args": ["-y", "classmcp"]
    }
  }
}

ChatGPT

Add via ChatGPT Settings → MCP Servers → Add Server

npx -y classmcp

Cursor / VS Code

Add to your editor's MCP settings with the same config format.

View Full Docs

MCP was donated to the Linux Foundation's Agentic AI Foundation in December 2025, co-founded by Anthropic, OpenAI, and Block.

Built for the AI-First Era