classmcp: Give AI Short Semantic Class Names Instead of Utility Strings

What is classmcp?

A single Tailwind button can run to 180 characters of utility classes. classmcp trades that for btn-primary, 12 characters, or a single letter when minified. The README table puts the saving at 99 percent for a button.

The model asks the server what patterns exist, writes code using short names, and you add one generated stylesheet to the project. Your normal CSS framework then compiles it.

How the loop runs

1. The assistant asks classmcp for available classes.
2. classmcp returns semantic names with SSR safety information.
3. The assistant writes markup using those short names.
4. You generate the CSS file with the generate_css tool or the command npx classmcp generate-css > src/classmcp.css.
5. Import that file next to Tailwind or Bootstrap and the framework compiles it.

Pattern coverage

Each of the four frameworks ships 70 or more patterns across 14 categories, including buttons, cards, forms, badges, alerts, avatars, layout, typography, navigation, modals, tables, lists, loading states and dividers.

Custom patterns live in .classmcp.json at the project root, with optional hover, focus and disabled states, a category and a framework limit. Run reload_config to apply changes without a restart.

Fit and limits

Best for

• Projects that spend many tokens on repeated utility strings.
• Next.js, Nuxt or Remix work, where hydration safety matters and get_ssr_info flags patterns that need client JavaScript.
• Teams that want their own named patterns in .classmcp.json, with optional hover, focus and disabled states.

Not for

• Sites with a fixed brand system where class names must match existing CSS. Define those as custom patterns first.
• Projects that need a component library's own markup and styling. classmcp provides semantic class names, and get_component returns HTML examples for them. For libraries, see Starwind UI, Flowbite or shadcn.

Use it with UiChemy

classmcp shortens the class names an agent writes. UiChemy Composer works differently, writing real HTML, CSS and JavaScript inside Elementor or Gutenberg. If you build on WordPress, click Get Started on uichemy.com to compare.

Connect classmcp: Give AI Short Semantic Class Names Instead of Utility Strings to your AI client

npx classmcp

1. Add it to Claude Desktop

   Put the snippet above in claude_desktop_config.json. For other MCP clients, run npx classmcp as the server command.

2. Pick a framework

   Call set_framework with tailwind, bootstrap, unocss or tachyons. Tailwind is the default.

3. Generate the stylesheet

   Run npx classmcp generate-css > src/classmcp.css, or ask the assistant to use generate_css.

4. Import it into your CSS

   With Tailwind add @import "tailwindcss"; then @import "./classmcp.css";. With Bootstrap import its stylesheet first, then your generated file.

5. Add custom patterns if needed

   Create .classmcp.json at the project root, or classmcp.config.json, or a classmcp key in package.json.

Client configuration

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

Endpoints and ports

What you can do with it

• Four frameworks, one switchTailwind CSS, Bootstrap 5, UnoCSS and Tachyons share the same semantic names, and set_framework changes which utilities back them.
• Token savingsThe repository description claims 77 percent token savings, and the README table shows a button dropping from 180 characters to 12, or 1 when minified.
• SSR safety on every patternPatterns are marked safe or client-only. modal-overlay, toggle, spinner and alert-dismissible need client JS, and get_ssr_info explains why.
• Minified class namesAsk for minified output and a name like btn-primary becomes a single letter, saving 11 characters per use in the README example.
• Custom patterns with statesDefine your own ids in .classmcp.json with base, hover, focus, active and disabled classes, and optionally override built-ins.
• Fourteen built-in categoriesButtons, cards, forms, badges, alerts, avatars, layout, typography, navigation, modals, tables, lists, loading and dividers are covered.
• Component examplesget_component returns complete HTML examples, and generate_css writes the stylesheet that backs every name.

Tools it exposes

Frequently asked questions