iOS와 Android에서 여러 AI 모델과 대화하고, 에이전트를 실행하고, MCP 도구를 연결하고, 이미지를 생성할 수 있는 Cherry Studio 모바일 앱입니다.
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
npx로 서버를 실행합니다(토큰이 없으면 시간당 60회 요청 가능).
npx @jpisnice/shadcn-ui-mcp-server - 2
GitHub token을 사용해 더 높은 요청 제한으로 실행합니다(시간당 5,000회 요청 가능).
npx @jpisnice/shadcn-ui-mcp-server --github-api-key ghp_your_token_here - 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 통계는 매일 갱신됩니다.
관련 프로젝트
Android, iOS, 웹에서 실행되는 범용 네이티브 앱을 React로 만드는 오픈소스 프레임워크입니다.
LLM이 자체 컴포넌트 라이브러리로 렌더링 가능한 UI를 생성하도록 지원하는 OpenUI Lang 기반 프레임워크 독립형 Generative UI 툴킷
React, Vue, Svelte, Solid 바인딩을 제공하는 웹 앱용 비동기 상태 관리 및 데이터 페칭 라이브러리입니다.
React, Vue, Solid, Svelte 등에서 마크업과 스타일을 완전히 제어하며 데이터 그리드를 만들 수 있는 헤드리스 TypeScript/JavaScript 테이블 라이브러리입니다.