Shadcn UI MCP 서버

Shadcn UI 구성 요소의 개발 경험을 향상시키도록 설계된 강력하고 유연한 MCP(모델 제어 프로토콜) 서버입니다. 이 서버는 고급 도구와 기능을 통해 UI 구성 요소를 구축하고 관리하기 위한 견고한 기반을 제공합니다.

특징

도구

MCP 서버는 모델 제어 프로토콜을 통해 사용할 수 있는 도구 세트를 제공합니다.

• list-components : 사용 가능한 shadcn/ui 구성 요소 목록을 가져옵니다.

• get-component-docs : 특정 구성 요소에 대한 설명서를 가져옵니다.

• install-component : shadcn/ui 구성 요소를 설치합니다.

• list-blocks : 사용 가능한 shadcn/ui 블록 목록을 가져옵니다.

• get-block-docs : 특정 블록에 대한 문서를 가져옵니다.

• install-blocks : shadcn/ui 블록을 설치합니다.

기능성

• 구성 요소 관리

  • 사용 가능한 shadcn/ui 구성 요소 나열

  • 특정 구성 요소에 대한 자세한 설명서를 받으세요

  • 여러 패키지 관리자(npm, pnpm, yarn, bun)를 지원하는 구성 요소를 설치합니다.

• 블록 관리

  • 사용 가능한 shadcn/ui 블록 나열

  • 특정 블록에 대한 문서와 코드를 얻으세요

  • 여러 패키지 관리자를 지원하는 블록 설치

• 패키지 관리자 지원

  • npm, pnpm, yarn 및 bun에 대한 유연한 런타임 지원

  • 사용자가 선호하는 패키지 관리자를 자동으로 감지

Related MCP server: aceternityui-mcp

설치

필수 조건

• Node.js(v18 이상)

• npm 또는 yarn 패키지 관리자

클로드 데스크톱 구성

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

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

지엑스피1

윈드서핑 구성

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

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

커서 구성

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

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

개발 및 디버깅

지역 개발

1. 종속성 설치:

npm install

2. 서버를 빌드하세요:

npm run build

디버깅

MCP 서버는 stdio를 통해 통신하므로 디버깅이 어려울 수 있습니다. 디버깅에는 MCP Inspector를 사용하는 것이 좋습니다.

npm run inspector

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

• MCP 통신 모니터링

• 도구 호출 및 응답 검사

• 디버그 서버 동작

• 실시간 로그 보기

관련 프로젝트 및 종속성

이 프로젝트는 다음 도구와 라이브러리를 사용하여 구축되었습니다.

• 모델 컨텍스트 프로토콜 TypeScript SDK - MCP 서버 및 클라이언트를 위한 공식 TypeScript SDK

• MCP Inspector - MCP 서버용 디버깅 도구

• Cheerio - 서버를 위해 특별히 설계된 핵심 jQuery의 빠르고 유연하며 간소한 구현

특허

MIT 라이센스 - 이 프로젝트를 여러분의 목적에 맞게 자유롭게 사용하세요.

기여하다

기여를 환영합니다! 풀 리퀘스트를 제출해 주세요.