shadcn-ui MCP 서버

shadcn/ui 구성 요소 참조를 위한 MCP 서버

이는 shadcn/ui 구성 요소에 대한 참조 정보를 제공하는 TypeScript 기반 MCP 서버입니다. AI 어시스턴트가 shadcn/ui 구성 요소 설명서와 예제에 액세스할 수 있도록 지원하는 모델 컨텍스트 프로토콜(MCP) 서버를 구현합니다.

특징

도구

• list_shadcn_components - 사용 가능한 모든 shadcn/ui 구성 요소 목록을 가져옵니다.

• get_component_details - 특정 구성 요소에 대한 자세한 정보를 가져옵니다.

• get_component_examples - 특정 구성 요소에 대한 사용 예를 가져옵니다.

• search_components - 키워드로 구성 요소 검색

기능성

이 서버는 다음에서 정보를 스크래핑하고 캐시합니다.

• 공식 shadcn/ui 문서 사이트( https://ui.shadcn.com )

• shadcn/ui GitHub 저장소

다음을 포함한 구조화된 데이터를 제공합니다.

• 구성 요소 설명

• 설치 지침

• 사용 예

• 소품 및 변형

• 코드 샘플

개발

종속성 설치:

지엑스피1

서버를 빌드하세요:

자동 재빌드를 사용한 개발의 경우:

설치

클로드 데스크톱 구성

Claude Desktop과 함께 사용하려면 서버 구성을 추가하세요.

MacOS의 경우: ~/Library/Application Support/Claude/claude_desktop_config.json Windows의 경우: %APPDATA%/Claude/claude_desktop_config.json

옵션 1: 로컬 빌드 사용

옵션 2: npx 명령 사용

윈드서핑 구성

./codeium/windsurf/model_config.json 에 다음을 추가하세요.

커서 구성

.cursor/mcp.json 에 다음을 추가하세요.

디버깅

MCP 서버는 stdio를 통해 통신하므로 디버깅이 어려울 수 있습니다. 패키지 스크립트로 제공되는 MCP Inspector를 사용하는 것이 좋습니다.

검사기는 브라우저에서 디버깅 도구에 액세스할 수 있는 URL을 제공합니다.