MCP

MCP (Model Context Protocol) 연동

이 가이드는 Ant Design을 Model Context Protocol(MCP)을 통해 AI 도구와 함께 사용하는 방법을 설명해요.

출처: 문서

본문

MCP란 무엇인가요?

Model Context Protocol (MCP)는 AI 모델이 외부 도구와 데이터 소스와 상호작용할 수 있게 해 주는 개방형 프로토콜이에요. MCP를 통해 AI 어시스턴트는 실시간 문서, 코드 예시, API 참조에 접근할 수 있어요.

공식 MCP 서버

@ant-design/cli v6.3.5부터 antd mcp 명령으로 공식 MCP 서버를 실행할 수 있어요. IDE 통합을 위해 8개의 도구와 2개의 프롬프트를 제공합니다.

도구 (Tools)

도구	설명
`antd_list`	사용 가능한 컴포넌트 나열
`antd_info`	컴포넌트 속성 스펙 조회
`antd_doc`	전체 문서 가져오기
`antd_demo`	실행 가능한 코드 예시 접근
`antd_token`	디자인 토큰 값 조회
`antd_design_md`	디자인 언어 문서 가져오기
`antd_semantic`	DOM 구조와 스타일링 훅(hook) 분석
`antd_changelog`	버전 간 API 변경 사항 분석

프롬프트 (Prompts)

프롬프트	설명
`antd-expert`	에이전트를 Ant Design 전문가로 배치
`antd-page-generator`	컴포넌트 기반 페이지 생성을 지원

설정 (Configuration)

IDE 설정에 MCP 서버를 추가하세요:

{
  "mcpServers": {
    "antd": {
      "command": "npx",
      "args": ["-y", "@ant-design/cli", "mcp"]
    }
  }
}

또는 CLI를 전역으로 설치했다면(npm i -g @ant-design/cli):

{
  "mcpServers": {
    "antd": {
      "command": "antd",
      "args": ["mcp"]
    }
  }
}

추가 인자로 특정 antd 버전을 고정할 수도 있어요:

{
  "mcpServers": {
    "antd": {
      "command": "npx",
      "args": ["-y", "@ant-design/cli", "mcp", "--version", "5.20.0"]
    }
  }
}

CLI가 지원하는 프로젝트 설정을 자동으로 작성하게 할 수도 있어요:

antd setup --client claude
antd setup --client cursor --mode both
antd setup --client vscode --write-instructions
antd setup --client codex
antd setup --client claude --dry-run
antd setup --client claude --check

지원하는 클라이언트는 claude, cursor, vscode, codex예요. 설정 모드는 mcp, skill, both가 있어요.

AI 도구와 함께 사용하기

도구	설명	설정
Cursor	`.cursor/mcp.json` 또는 Settings → Features → MCP에 추가하세요. 문서	`{ "mcpServers": { "antd": { "command": "npx", "args": ["-y", "@ant-design/cli", "mcp"] } } }`
Windsurf	`~/.codeium/windsurf/mcp_config.json`에 추가하세요. 문서	`{ "mcpServers": { "antd": { "command": "npx", "args": ["-y", "@ant-design/cli", "mcp"] } } }`
Claude Code	Claude 설정의 `mcpServers`에 추가하세요. 문서	`{ "mcpServers": { "antd": { "command": "npx", "args": ["-y", "@ant-design/cli", "mcp"] } } }`
VS Code	`.vscode/mcp.json` 또는 Settings → MCP에 추가하세요. 문서	`{ "servers": { "antd": { "command": "npx", "args": ["-y", "@ant-design/cli", "mcp"] } } }`
Codex	`.codex/mcp.json`에 추가하세요. 문서	`{ "mcpServers": { "antd": { "command": "npx", "args": ["-y", "@ant-design/cli", "mcp"] } } }`
Gemini CLI	MCP 설정에 추가하세요. 문서	`{ "mcpServers": { "antd": { "command": "npx", "args": ["-y", "@ant-design/cli", "mcp"] } } }`
Trae	MCP 설정에 추가하세요. 문서	`{ "mcpServers": { "antd": { "command": "npx", "args": ["-y", "@ant-design/cli", "mcp"] } } }`
Qoder	MCP 설정에 추가하세요. 문서	`{ "mcpServers": { "antd": { "command": "npx", "args": ["-y", "@ant-design/cli", "mcp"] } } }`
Neovate Code	설정에서 MCP를 구성하거나 프롬프트로 작업을 설명하세요. 문서	`{ "mcpServers": { "antd": { "command": "npx", "args": ["-y", "@ant-design/cli", "mcp"] } } }`

커뮤니티 MCP 서버

커뮤니티에서 유지 관리하는 MCP 서버 @jzone-mcp/antd-components-mcp도 사용할 수 있어요.

이 MCP 서버는 다음 기능을 제공해요.

list-components — 사용 가능한 모든 Ant Design 컴포넌트 나열
get-component-docs — 특정 컴포넌트의 상세 문서 가져오기
list-component-examples — 컴포넌트의 코드 예시 가져오기
get-component-changelog — 컴포넌트의 체인지로그 가져오기

설정:

{
  "mcpServers": {
    "antd-components": {
      "command": "npx",
      "args": ["-y", "@jzone-mcp/antd-components-mcp"]
    }
  }
}

대안: LLMs.txt 사용하기

AI 도구가 MCP를 지원하지 않는다면 LLMs.txt 지원을 사용할 수 있어요. 다음을 제공합니다.

llms.txt — 모든 컴포넌트의 구조적 개요
llms-full.txt — 예시가 포함된 전체 문서

MCP