Ant 디자인 구성 요소 모델 컨텍스트 프로토콜 서버

Claude와 같은 대규모 언어 모델(LLM)에 Ant Design 구성 요소 문서를 제공하는 모델 컨텍스트 프로토콜(MCP) 서버입니다. 이 서버를 통해 LLM은 특수 도구 세트를 통해 Ant Design 구성 요소를 탐색하고 이해할 수 있습니다.

특징

사용하기 쉬움 - Ant Design 저장소 전체를 복제할 필요가 없음
더 빠른 시작을 위한 사전 추출된 구성 요소 문서
사용 가능한 모든 Ant Design 구성 요소를 나열합니다.
설명 및 사용법을 포함한 자세한 구성 요소 문서를 받으세요
구성 요소 속성 및 API 정의 보기
특정 구성 요소에 대한 코드 예제 찾아보기
이름이나 기능으로 구성 요소 검색

초기 설정

처음으로 MCP 서버를 사용하기 전에 Ant Design 저장소에서 문서를 추출해야 합니다.

지엑스피1

이렇게 하면 MCP 서버에서 사용할 모든 추출된 구성 요소 문서가 포함된 data 디렉터리가 생성됩니다.

서버 테스트

모든 것이 올바르게 작동하는지 확인하려면 테스트 스크립트를 실행하세요.

npm test
# OR
node scripts/test-server.mjs

이렇게 하면 MCP 서버가 실행되고 샘플 쿼리를 통해 사용 가능한 모든 도구가 테스트됩니다.

용법

명령줄

MCP 서버를 실행합니다.

# Run server with pre-extracted data
npm start
# OR
npx -y mcp-antd-components

Claude 데스크톱 통합

Claude Desktop과 함께 이 MCP 서버를 사용하려면 claude_desktop_config.json 구성 파일을 편집하세요.

{
  "mcpServers": {
    "Ant Design Components": {
      "command": "npx",
      "args": ["-y", "mcp-antd-components"]
    }
  }
}

구성 파일의 위치:

macOS/Linux: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: $env:AppData\Claude\claude_desktop_config.json

클로드 코드 통합

Claude Code CLI와 함께 이 MCP 서버를 사용하려면 다음 단계를 따르세요.

Claude Code에 Ant Design Components MCP 서버 추가
# Basic syntax claude mcp add antd-components npx -y mcp-antd-components
MCP 서버가 등록되었는지 확인하세요
# List all configured servers claude mcp list # Get details for your Ant Design components server claude mcp get antd-components
필요한 경우 서버를 제거하세요
claude mcp remove antd-components
Claude Code에서 도구를 사용하세요구성이 완료되면 Ant Design 구성 요소에 대한 질문을 통해 Claude Code 세션에서 도구를 호출할 수 있습니다.

팁:

구성이 저장되는 위치를 지정하려면 project (기본값) 또는 global 과 함께 -s 또는 --scope 플래그를 사용합니다.

MCP 도구

이 서버는 LLM이 Ant Design 구성 요소 문서와 상호 작용할 수 있도록 다음과 같은 도구를 제공합니다.

list-components : PascalCase 형식으로 사용 가능한 모든 Ant Design 구성 요소를 나열합니다(예: Button, DatePicker)
get-component-props : 특정 구성 요소에 대한 속성 및 API 문서를 가져옵니다(예: "Button"과 같은 PascalCase 이름 사용).
get-component-docs : 특정 구성 요소에 대한 자세한 설명서를 가져옵니다(예: "DatePicker"와 같은 PascalCase 이름 사용).
list-component-examples : 특정 구성 요소에 대해 사용 가능한 모든 예를 나열합니다(예: "Table"과 같은 PascalCase 이름 사용).
get-component-example : 특정 구성 요소 예제(PascalCase 방식의 구성 요소 이름)에 대한 코드를 가져옵니다.
search-components : 이름 패턴으로 구성 요소 검색(PascalCase 패턴과 함께 작동)

예시

시도해 볼 수 있는 쿼리 예시:

What components are available in Ant Design?
Show me the documentation for the Button component.
What props does the Table component accept?
Show me code examples for the Modal component.
Get the example "basic" for the Form component.
Find components related to Input or Form elements.

참고: 내부 디렉토리 구조가 케밥 케이스(예: button, date-picker, table)를 사용하더라도, React 구성 요소 명명 규칙에 맞게 구성 요소 이름은 PascalCase(예: Button, DatePicker, Table)로 제공됩니다.

작동 원리

scripts/extract-docs.mjs 스크립트는 Ant Design 저장소에서 문서를 추출하여 data 디렉터리에 저장합니다. 여기에는 다음이 포함됩니다.

구성 요소 문서(마크다운)
API/props 문서
예제 코드
공통 소품 문서

이 접근 방식에는 여러 가지 장점이 있습니다.

사용자는 Ant Design 저장소 전체를 복제할 필요가 없습니다.
MCP 서버의 시작 시간이 더 빨라졌습니다.
더 작은 패키지 크기
새 버전이 출시되면 업데이트가 더 쉽습니다.

Ant Design의 새 버전에 대한 설명서를 업데이트하려면 업데이트된 저장소에서 추출 스크립트를 다시 실행하기만 하면 됩니다.

Ant Design Components MCP Server

Integrations