shadcn-ui MCP Server

by ymadd
Verified

remote-capable server

The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.

Integrations

  • Provides reference information for shadcn/ui components, including component listings, detailed documentation, usage examples, and search functionality. Scrapes and caches data from the official documentation site and GitHub repository.

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 - 키워드로 구성 요소 검색

기능성

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

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

  • 구성 요소 설명
  • 설치 지침
  • 사용 예
  • 소품 및 변형
  • 코드 샘플

개발

종속성 설치:

지엑스피1

서버를 빌드하세요:

npm run build

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

npm run watch

설치

클로드 데스크톱 구성

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

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

옵션 1: 로컬 빌드 사용

{ "mcpServers": { "shadcn-ui-server": { "command": "/path/to/shadcn-ui-server/build/index.js" } } }

옵션 2: npx 명령 사용

{ "mcpServers": { "shadcn-ui-server": { "command": "npx", "args": ["-y", "shadcn-ui-mcp-server"] } } }

윈드서핑 구성

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

{ "mcpServers": { "shadcn-ui-server": { "command": "npx", "args": ["-y", "shadcn-ui-mcp-server"] } } }

커서 구성

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

{ "mcpServers": { "shadcn-ui-server": { "command": "npx", "args": ["-y", "shadcn-ui-mcp-server"] } } }

디버깅

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

npm run inspector

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

You must be authenticated.

A
security – no known vulnerabilities
A
license - permissive license
A
quality - confirmed to work

TypeScript 기반 MCP 서버를 통해 AI 어시스턴트가 shadcn/ui 구성 요소 문서와 예제에 액세스할 수 있도록 지원하며, 구성 요소 세부 정보, 사용 예제 및 검색 기능에 대한 참조 정보를 제공합니다.

  1. Features
    1. Tools
    2. Functionality
  2. Development
    1. Installation
      1. Claude Desktop Configuration
      2. Windsurf Configuration
      3. Cursor Configuration
      4. Debugging
    ID: w3lpkmdlgo