Repolode
Jpisnice

Jpisnice/shadcn-ui-mcp-server

React, Svelte, Vue, React Native 전반에서 AI 어시스턴트가 shadcn/ui 컴포넌트 소스, 데모, 블록, 설치 메타데이터를 조회할 수 있게 하는 MCP 서버입니다.

스타
3,065
포크
315
열린 이슈
7
마지막 커밋
19일 전

어떤 프로젝트인가요?

이 프로젝트는 AI 코딩 어시스턴트가 TypeScript 소스, 데모, 대시보드와 폼 같은 블록, 의존성과 설정 메타데이터를 포함한 shadcn/ui 컴포넌트를 조회할 수 있게 해 주는 Model Context Protocol (MCP) 서버입니다. 컴포넌트 API를 추측하는 대신, 어시스턴트는 코드를 생성하기 전에 실제 구현을 확인할 수 있습니다.

React 기반 원본, shadcn-svelte, shadcn-vue, React Native용 react-native-reusables 등 shadcn 스타일 라이브러리 네 가지를 지원합니다. 프레임워크는 CLI 플래그로 선택하며, React 사용자는 기반 프리미티브 라이브러리를 Radix UI와 Base UI 중에서 고를 수 있습니다. 서버는 Claude Desktop, Claude Code, Cursor 같은 로컬 클라이언트용 stdio 또는 Docker Compose를 지원하는 상태 비저장 /mcp 엔드포인트의 Streamable HTTP로 실행할 수 있습니다. GitHub API 접근은 캐시되며, 개인 액세스 토큰을 사용해 요청 한도를 높일 수 있습니다.

핵심 기능

  • 01React, Svelte, Vue, React Native용 컴포넌트 소스 코드, 데모, 블록을 제공합니다.
  • 02각 컴포넌트의 의존성, 설명, 설정 메타데이터를 제공합니다.
  • 03저장소의 디렉터리 구조를 둘러볼 수 있습니다.
  • 04stdio, Streamable HTTP, 이중 전송 모드를 지원합니다.
  • 05프롬프트와 리소스 템플릿에 대한 인수 자동 완성을 제공합니다.
  • 06Docker 및 Docker Compose 설정이 포함되어 있습니다.

활용 사례

  • Claude Code나 Cursor가 실제 컴포넌트 API에 맞는 shadcn/ui 기반 인터페이스를 생성하도록 합니다.
  • React, Svelte, Vue, React Native에서 동일한 컴포넌트의 구현 방식을 비교합니다.
  • HTTP를 통해 개발자 팀이 함께 사용할 MCP 엔드포인트를 실행합니다.

빠른 시작

  1. 1

    npx로 서버를 실행합니다(토큰이 없으면 시간당 60회 요청 가능).

    npx @jpisnice/shadcn-ui-mcp-server
  2. 2

    GitHub token을 사용해 더 높은 요청 제한으로 실행합니다(시간당 5,000회 요청 가능).

    npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here
  3. 3

    Svelte, Vue, React Native와 같은 다른 프레임워크로 전환합니다.

    npx @jpisnice/shadcn-ui-mcp-server --framework svelte

사용 전 알아둘 점

  • GitHub token이 없으면 GitHub API 요청 제한이 낮아 시간당 60회만 요청할 수 있습니다.
  • UI 라이브러리 옵션인 Base UI는 React에서만 사용할 수 있습니다.

포함된 컬렉션

토픽

자주 묻는 질문

shadcn-ui-mcp-server은(는) 무엇인가요?
React, Svelte, Vue, React Native 전반에서 AI 어시스턴트가 shadcn/ui 컴포넌트 소스, 데모, 블록, 설치 메타데이터를 조회할 수 있게 하는 MCP 서버입니다. 이 프로젝트는 AI 코딩 어시스턴트가 TypeScript 소스, 데모, 대시보드와 폼 같은 블록, 의존성과 설정 메타데이터를 포함한 shadcn/ui 컴포넌트를 조회할 수 있게 해 주는 Model Context Protocol (MCP) 서버입니다. 컴포넌트 API를 추측하는 대신, 어시스턴트는 코드를 생성하기 전에 실제 구현을 확인할 수 있습니다.
shadcn-ui-mcp-server은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?
shadcn-ui-mcp-server은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.
shadcn-ui-mcp-server은(는) 아직 유지보수되고 있나요?
활발히 유지보수 중. shadcn-ui-mcp-server의 마지막 커밋은 2026년 10월 3일입니다.
shadcn-ui-mcp-server은(는) 어디에 사용할 수 있나요?
Claude Code나 Cursor가 실제 컴포넌트 API에 맞는 shadcn/ui 기반 인터페이스를 생성하도록 합니다. React, Svelte, Vue, React Native에서 동일한 컴포넌트의 구현 방식을 비교합니다. HTTP를 통해 개발자 팀이 함께 사용할 MCP 엔드포인트를 실행합니다.
shadcn-ui-mcp-server는 어떻게 설치하나요?
npx로 서버를 실행합니다(토큰이 없으면 시간당 60회 요청 가능).: npx @jpisnice/shadcn-ui-mcp-server GitHub token을 사용해 더 높은 요청 제한으로 실행합니다(시간당 5,000회 요청 가능).: npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here Svelte, Vue, React Native와 같은 다른 프레임워크로 전환합니다.: npx @jpisnice/shadcn-ui-mcp-server --framework svelte
shadcn-ui-mcp-server은(는) 어디서 받을 수 있나요?
소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/Jpisnice/shadcn-ui-mcp-server

요약은 프로젝트 README를 바탕으로 AI가 작성했습니다. GitHub 통계는 매일 갱신됩니다.

관련 프로젝트