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.

1Ask AI to "center with flexbox"

2AI calls MCP server tools to look up the exact classes

3MCP server returns accurate classes and CSS like df jcc aic

✓AI writes code with the correct Atomic CSS classes

Setup

.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.

.mcp.json

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

Note: Project-scoped MCP servers show an approval prompt on first use.

Add via CLI

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

# Add via Claude Code
claude mcp add --transport sse atomic-css https://mcp.atomiccss.dev/sse

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

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

Claude Desktop

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

claude_desktop_config.json

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

Cursor

In Cursor, add it via Settings > MCP Servers.

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

Scope Comparison

Scope	Location	Sharing	Usage
`project`	Project root .mcp.json	Yes (shared via git)	Team sharing, per-project settings (recommended)
`local`	~/.claude.json	X	Personal settings, current project only
`user`	~/.claude.json	X	Available in all projects

Available Tools

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

Tool	Description
`get_guide`	Returns the full Atomic CSS usage guide (naming rules, units, media queries, pseudo-classes, etc.)
`lookup_class`	Class name to CSS output lookup (supports multiple classes at once)
`search_by_css`	Search Atomic CSS classes by CSS property/value
`css_to_classes`	Convert CSS code to Atomic CSS classes
`validate_classes`	Class validation + similar class suggestions
`list_classes`	List classes by category

Tip: When giving AI its first Atomic CSS task, instruct it to "call get_guide first to learn the rules" for more accurate class generation.

Official MCP Registry

The Atomic CSS MCP server is registered in the official MCP Registry. You can integrate directly via URL without any installation.

Registry ID	`io.github.Yoodaekyung/atomic-css`
Status	Active
Connection URL	`https://atomiccss.dev/mcp`

No authentication required: It is a public API anyone can use immediately. Just add the URL to your settings.

Server Info

URL	`https://mcp.atomiccss.dev`
SSE Endpoint	`https://mcp.atomiccss.dev/sse`
Protocol	SSE (Server-Sent Events)
Authentication	Not required (public API). API key authentication may be introduced in the future for security and rate limiting.