MCP Server (AI Integration)

Atomic CSS provides an MCP (Model Context Protocol) server for AI assistants. AI tools like Claude, Cursor, and Windsurf can programmatically look up and use Atomic CSS classes.

What is MCP?

MCP (Model Context Protocol) is a standard protocol that allows AI models to access external tools and data. By connecting the Atomic CSS MCP server, AI can look up exact class names, search classes by CSS properties, and validate classes.

Setup

Register the MCP server with your project or AI tool.

.mcp.json (Project Config)

Create a .mcp.json file at the project root so AI automatically recognizes the MCP server for the project. This is the recommended method as it can be shared with team members.

{
    "mcpServers": {
        "atomic-css": {
            "type": "http",
            "url": "https://mcp.atomiccss.dev/mcp"
        }
    }
}

If your client does not support Streamable HTTP yet, use the legacy SSE configuration.

{
    "mcpServers": {
        "atomic-css": {
            "type": "http",
            "url": "https://mcp.atomiccss.dev/mcp"
        }
    }
}

Add via CLI

You can also register the MCP server directly from the terminal.

# Add via Claude Code (Streamable HTTP, recommended)
claude mcp add --transport http atomic-css https://mcp.atomiccss.dev/mcp

# Add to project scope (saved in .mcp.json)
claude mcp add --transport http --scope project atomic-css https://mcp.atomiccss.dev/mcp

# Add to user scope (available in all projects)
claude mcp add --transport http --scope user atomic-css https://mcp.atomiccss.dev/mcp

# Legacy SSE transport (fallback for older clients)
claude mcp add --transport sse atomic-css https://mcp.atomiccss.dev/sse

Claude Desktop

In the Claude Desktop app, add it to the settings file.

{
    "mcpServers": {
        "atomic-css": {
            "type": "http",
            "url": "https://mcp.atomiccss.dev/mcp"
        }
    }
}

Cursor

In Cursor, add it via Settings > MCP Servers.

{
    "name": "atomic-css",
    "url": "https://mcp.atomiccss.dev/mcp"
}

Scope Comparison

Available Tools

Once the MCP server is connected, AI automatically uses the tools below. Users do not need to call them directly.

Tool Reference (Input → Output)

Actual input and output for each tool. Any LLM can generate and validate Atomic CSS immediately from these examples.

The input/output examples below are copied verbatim from the live server (v1.2.0). Note that the server returns its response text in Korean.

Recommended LLM Workflow

Any language model can generate Atomic CSS correctly with these 3 steps. Once you know the rules, writing classes directly (no tool call) is fastest.

Rules to Use Atomic CSS 100%

These are the core rules get_guide passes to the LLM. Follow them and any UI can be built with Atomic CSS alone.

Good example — semantic class + Atomic classes

<!-- Semantic class (JS/meaning) + Atomic classes (all visual style) -->
<section class="product-card dg gtcr3-1fr gap2rem p2rem bg0F0F17 br8px">
  <article class="df fdc gap12px">
    <img class="w100p h20rem ofc br8px" src="photo.jpg" />
    <h3 class="fs1-8rem fw700 cFAFAFA">Title</h3>
    <p class="fs14px c71717A lh1-7">Description text</p>
  </article>
</section>

<!-- Load atomic.min.css LAST so it wins the cascade -->
<link rel="stylesheet" href="/css/your-styles.css" />
<link rel="stylesheet" href="/assets/css/atomic.min.css" />

Official MCP Registry

The Atomic CSS MCP server is registered in the official MCP Registry. You can integrate directly with just the URL https://mcp.atomiccss.dev/mcp — no installation required.

Server Info