shadcn/ui MCP Server

왜 쓰나요

핵심 기능

shadcn/ui 레지스트리에서 컴포넌트 소스의 실시간 가져오기
다중 프레임워크: React, Vue, Svelte 5, React Native
컴포넌트 의존성 그래프 (예: Dialog는 Portal 필요)
패키지 매니저별 설치 명령 (npm/pnpm/yarn/bun)
베어 컴포넌트만이 아닌 예제 + 데모 소스
블록 템플릿 (인증 페이지, 대시보드) 포함

라이브 데모

실제 사용 모습

shadcn-ui-mcp.replay ▶ 준비됨

0/0

설치

클라이언트 선택

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

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

Claude Desktop → Settings → Developer → Edit Config 열기. 저장 후 앱 재시작.

~/.cursor/mcp.json · .cursor/mcp.json

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

Cursor는 Claude Desktop과 동일한 mcpServers 스키마 사용. 프로젝트 설정이 전역보다 우선.

VS Code → Cline → MCP Servers → Edit

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

Cline 사이드바의 MCP Servers 아이콘 클릭 후 "Edit Configuration" 선택.

~/.codeium/windsurf/mcp_config.json

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

Claude Desktop과 같은 형식. Windsurf 재시작 후 적용.

~/.continue/config.json

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

Continue는 맵이 아닌 서버 오브젝트 배열 사용.

~/.config/zed/settings.json

{
  "context_servers": {
    "shadcn-ui-mcp": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "@jpisnice/shadcn-ui-mcp-server"
        ]
      }
    }
  }
}

context_servers에 추가. 저장 시 Zed가 핫 리로드.

claude mcp add shadcn-ui-mcp -- npx -y @jpisnice/shadcn-ui-mcp-server

한 줄 명령. claude mcp list로 확인, claude mcp remove로 제거.

사용 사례

실전 활용법: shadcn/ui MCP Server

API 드리프트 없이 shadcn/ui Form 스캐폴딩

👤 React/Next 앱을 개발하는 프론트엔드 개발자 ⏱ ~20 min intermediate

언제 쓸까: Form + react-hook-form + Zod가 필요한데 Claude가 계속 오래된 shadcn import를 사용할 때.

사전 조건

shadcn/ui가 초기화된 Next.js / Vite 앱 — npx shadcn@latest init

흐름

현재 Form 소스 가져오기

shadcn-ui MCP: form (React)의 현재 소스와 의존성을 가져오세요. 설치 명령을 보여주세요.✓ 복사됨

→ 최신 소스 반환됨; 의존성 목록에 react-hook-form, zod 포함
폼 빌드

이 정확한 API를 사용하여 SignupForm을 빌드하세요. 이메일 + 비밀번호 + 이용약관 체크박스; 유효성 검사 메시지가 있는 Zod 스키마. 가짜 import 없음.✓ 복사됨

→ 컴포넌트가 현재 shadcn 버전에 대해 컴파일됨
확인

tsc --noEmit를 실행하고 미해결 import를 보고하세요.✓ 복사됨

→ 깨끗한 TS 검사

결과: 현재 shadcn/ui API에 대해 작동하는 Form — import { ... } from '@/components/ui/old-name' 실수 없음

함정

프로젝트가 이전 shadcn 버전에 있음 — --registry로 고정하거나 업그레이드를 수용하고 shadcn upgrade 실행

함께 쓰기: filesystem

shadcn 블록(인증/대시보드) 드롭인

👤 사전 제작된 레이아웃이 필요한 개발자 ⏱ ~15 min beginner

언제 쓸까: 단순 컴포넌트가 아닌 완전한 로그인 페이지나 대시보드 레이아웃이 필요할 때.

흐름

블록 탐색

shadcn-ui: 사용 가능한 블록을 나열하세요. 사이드바 대시보드 레이아웃을 원합니다.✓ 복사됨

→ 이름 + 미리보기가 있는 블록 목록
가져와서 적용

sidebar-07의 소스를 가져오세요. 내 라우트에 맞게 조정하세요 — 데모 링크를 /dashboard, /clients, /settings로 교체하세요.✓ 복사됨

→ 블록 코드 반환됨; 내 경로로 교체됨

결과: 10분 안에 내 앱에 맞게 커스터마이즈된 전체 대시보드 레이아웃 실행

함정

블록이 설치되지 않은 컴포넌트에 의존 — MCP가 의존성 목록을 반환함; 먼저 누락된 것 설치

함께 쓰기: filesystem

React 앱의 shadcn 사용법을 Svelte로 포팅

👤 프레임워크를 마이그레이션하는 개발자 ⏱ ~30 min advanced

언제 쓸까: Next에서 SvelteKit으로 이동 중이며 shadcn-svelte 동등물을 원할 때.

흐름

컴포넌트 매핑

앱이 @/components/ui에서 import하는 컴포넌트를 나열하세요. 각각에 대해 shadcn-ui MCP에서 Svelte 5 동등물을 가져오세요.✓ 복사됨

→ API 차이에 대한 메모가 있는 컴포넌트별 매핑
하나의 예시 번역

실제 현재 API를 사용하여 이 React Form 사용법을 Svelte 버전으로 번역하세요.✓ 복사됨

→ 관용적인 Svelte 5 코드

결과: 팀이 따를 마이그레이션 계획 + 참고 번역

함정

일부 컴포넌트가 아직 Svelte 포트에 존재하지 않음 — MCP가 '찾을 수 없음'이라고 알려줌; 수동 포팅 대상으로 표시

조합

다른 MCP와 조합해 10배 효율

shadcn-ui-mcp + filesystem

컴포넌트를 레포지토리에 직접 생성

shadcn: Form을 가져오세요. Filesystem: 내 스키마로 src/components/SignupForm.tsx에 코드를 작성하세요.✓ 복사됨

shadcn-ui-mcp + github

현재 shadcn API를 사용하는 UI 리팩토링 PR

현재 Dialog API를 가져오세요. src/components/Modal.tsx를 맞게 리팩토링하세요. PR을 열어주세요.✓ 복사됨

도구

이 MCP가 노출하는 것

도구	입력	언제 호출	비용
list_components	framework?: react\|vue\|svelte\|react-native	탐색	1 fetch
get_component	name: str, framework?: str	코드 작성 전에	1 fetch
get_component_demo	name: str, framework?: str	실제 사용법 확인	1 fetch
list_blocks	framework?: str	사전 제작된 레이아웃 찾기	1 fetch
get_block	name: str	레이아웃 드롭인	1 fetch

비용 및 제한

운영 비용

API 쿼터: GitHub raw 가져오기 (비인증 60/h, 인증 5000/h)
호출당 토큰: 300–4000 (컴포넌트 소스가 클 수 있음)
금액: 무료 OSS
팁: 60/h 제한을 피하려면 GITHUB_PERSONAL_ACCESS_TOKEN 전달

보안

권한, 시크릿, 파급범위

자격 증명 저장: 속도 제한을 높이기 위한 선택적 GitHub 토큰

데이터 외부 송신: github.com (raw 및 api)

절대 부여 금지: repo:write

MCP는 공개 코드만 가져옴 — filesystem과 결합하지 않는 한 레포지토리에 쓰지 않음

문제 해결

자주 발생하는 오류와 해결

속도 제한 초과

GITHUB_PERSONAL_ACCESS_TOKEN 환경 변수 설정

프레임워크에서 컴포넌트를 찾을 수 없음

Vue/Svelte 포트는 React보다 늦음; 해당 프레임워크에 대해 list_components 확인

반환된 소스가 내 프로젝트와 다른 API를 사용

프로젝트가 이전 shadcn에 있음; 업그레이드하거나 이전 레지스트리 버전으로 고정

대안