MCP 서버 (AI 연동)

Atomic CSS는 AI 어시스턴트를 위한 MCP(Model Context Protocol) 서버를 제공합니다. Claude, Cursor, Windsurf 같은 AI 도구가 Atomic CSS 클래스를 프로그래밍 방식으로 조회하고 사용할 수 있습니다.

MCP란?

MCP(Model Context Protocol)는 AI 모델이 외부 도구와 데이터에 접근할 수 있게 하는 표준 프로토콜입니다. Atomic CSS MCP 서버를 연결하면 AI가 정확한 클래스명을 조회하고, CSS 속성에서 클래스를 검색하고, 유효성을 검증할 수 있습니다.

설정 방법

프로젝트 또는 AI 도구에 MCP 서버를 등록합니다.

.mcp.json (프로젝트 설정)

프로젝트 루트에 .mcp.json 파일을 생성하면, 해당 프로젝트에서 AI가 자동으로 MCP 서버를 인식합니다. 팀원과 공유할 수 있어 가장 권장하는 방법입니다.

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

CLI로 추가

터미널에서 직접 MCP 서버를 등록할 수도 있습니다.

# 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

Claude Desktop 앱에서는 설정 파일에 추가합니다.

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

Cursor

Cursor에서는 Settings > MCP Servers에서 추가합니다.

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

설정 스코프 비교

제공 도구

MCP 서버를 연결하면 AI가 자동으로 아래 도구들을 사용합니다. 사용자가 직접 호출할 필요는 없습니다.

공식 MCP Registry

Atomic CSS MCP 서버는 공식 MCP Registry에 등록되어 있습니다. 별도 설치 없이 URL만으로 바로 연동할 수 있습니다.

서버 정보