classmcp

classmcp is a multi-framework MCP server that provides semantic class mappings for AI-generated HTML. It supports Tailwind CSS, Bootstrap 5, UnoCSS, and Tachyons, and exposes a set of tools to query, filter, and customize class patterns. You can ask the AI to generate semantic class names (e.g., btn-primary, card) instead of lengthy utility strings, with SSR-safe defaults and optional minification. The server exposes commands to switch frameworks, fetch class definitions, generate CSS, inspect SSR safety, and customize patterns with your own .classmcp.json configuration. Use the available tools to explore patterns, filter to SSR-safe options, and obtain ready-to-use class strings or complete components.

Key capabilities include:

• set_framework to switch between tailwind, bootstrap, unocss, and tachyons frameworks.
• get_class to retrieve the CSS classes for a given semantic name, with optional minification.
• list_classes and search_classes to browse and discover available patterns by category or description.
• generate_css to produce a CSS file containing all class definitions for the current configuration.
• get_component and get_ssr_info to get HTML components and SSR/hydration safety information for patterns.
• reload_config and list_custom_patterns to manage user-defined custom patterns and reload changes without restarting.

In practice, you would query for a semantic pattern like brand-btn or card, choose a framework, and obtain a clean, SSR-safe class string (or a minified version) that minimizes token usage while preserving rendering behavior across frameworks.

Prerequisites:

• Node.js and npm (or pnpm/yarn) installed on your system.
• Basic familiarity with running CLI tools like npx.

Installation steps:

1. Ensure Node.js is installed. For example, on most systems:
   • macOS/Linux: curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash - && sudo apt-get install -y nodejs
   • Windows: install Node.js from https://nodejs.org/
2. Install or run via npx without a local install:
   • npx classmcp This will fetch and run the MCP server from npm as needed.
3. If you prefer to pin the server invocation in a Claude Desktop config, you can use:
   • Add to claude_desktop_config.json: { "mcpServers": { "classmcp": { "command": "npx", "args": ["classmcp"] } } }
4. To run locally from a project root, you can also install globally or locally and start as a regular Node.js tool, then connect your MCP client to the running server as documented by your client.

Notes:

• The default usage pattern is npx classmcp, which resolves to the MCP server binary via npm.
• You can customize frameworks and patterns using a .classmcp.json file at your project root and then reload the config with the provided tool.

Tips and common considerations:

• Framework selection: Use set_framework to switch between tailwind, bootstrap, unocss, and tachyons. Your choices affect available patterns and CSS output.
• SSR safety: Some patterns require client-side JS for interactivity. Use get_ssr_info to check hydration requirements and list_classes with ssrSafeOnly to filter safely.
• Custom patterns: You can define customPatterns in a .classmcp.json file to map semantic IDs to specific class strings or stateful patterns (base/hover/focus/etc.). Use reload_config to apply changes without restarting.
• Minification: get_class can return minified class names to save tokens; be mindful of readability in generated HTML when sharing templates.
• Troubleshooting: If you don’t see expected patterns, verify the current framework with list_frameworks, ensure your config file location is detected (e.g., .classmcp.json or package.json under classmcp key), and run reload_config to apply changes.