shadcn-svelte-mcp와 함께 Svelte 개발을 가속화하세요

Source: Dev.to

(번역할 텍스트를 제공해 주시면 한국어로 번역해 드리겠습니다.)

소개

Svelte로 최신 웹 애플리케이션을 구축하고 있다면, 인기 있는 shadcn/ui 라이브러리를 멋지게 포팅한 shadcn-svelte를 이미 접해봤을 것입니다. 이 라이브러리는 개발자가 접근성이 뛰어나고 커스터마이징 가능한 컴포넌트를 손쉽게 만들 수 있도록 도와줍니다.

코드 편집기 안에 shadcn‑svelte 전문가가 있어 질문에 답하고, 컴포넌트를 스캐폴딩하며, 설정 과정을 안내해준다면 어떨까요? 바로 그때 shadcn-svelte-mcp가 등장합니다.

shadcn-svelte-mcp란?

shadcn-svelte-mcp는 shadcn‑svelte 문서와 개발자 유틸리티를 위해 특별히 제작된 Mastra MCP 서버입니다. AI 어시스턴트(예: Claude, Cursor, Windsurf)와 공식 shadcn‑svelte 리소스 사이의 간극을 메워, 어시스턴트가 필요할 때 정확하고 Svelte‑우선 정보를 가져올 수 있도록 합니다.

왜 중요한가

• 정확하고 최신 문서 – 어시스턴트가 최신 컴포넌트 문서를 직접 소스에서 가져와, 환각(hallucination)이나 오래된 제안을 줄여줍니다.
• Svelte‑우선 출력 – 원본 shadcn/ui 문서에 학습된 React‑지향 패턴(예: asChild)이 응답에 섞이는 것을 방지합니다.
• 컨텍스트 인식 조언 – 프로젝트 설정과 스타일에 맞춘 베스트 프랙티스 가이드를 제공합니다.

주요 기능

일반적인 사용 사례

• Component discovery – “컴포넌트가 어떤 props를 받나요?”
• Composition guidance – “추천하는 컴포지션 패턴은 무엇인가요?”
• Setup reminders – “어떤 설치 단계(Tailwind config, adapters 등)를 놓쳤나요?”

예시 프롬프트

“SvelteKit에서 shadcn‑svelte를 사용해 관리자 대시보드 페이지 만들기: 사이드바 + 상단 네비게이션 + 카드 + 테이블 + 페이지네이션 + 로딩 상태”

“사용자 관리 화면 만들기: DataTable + 검색 입력 + 필터 + ‘사용자 생성’ 다이얼로그 + 폼 검증 + 성공 시 토스트”

“설정 페이지 생성: 탭(프로필/청구/보안) 각각에 폼 포함, 파괴적 작업을 위한 확인 다이얼로그”

“재사용 가능한 UserInviteDialog 컴포넌트 스캐폴드: Dialog, Input, Select, Button 사용 — 열고 닫는 깔끔한 API 제공”

“반응형 레이아웃 필요: 모바일에서는 Sheet, 데스크톱에서는 사이드바, 그리고 브레드크럼 헤더 — shadcn‑svelte 컴포넌트만 사용”

팁: 어시스턴트가 React 전용 props를 제안한다면, 반드시 다음을 추가하세요: “Svelte 5 + shadcn‑svelte only (no React patterns)”.

설치

서버를 MCP 구성에 추가합니다:

{
  "mcpServers": {
    "shadcn-svelte": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-remote",
        "https://shadcn-svelte.mastra.cloud/api/mcp/shadcn/sse"
      ]
    }
  }
}

이 설정은 shadcn‑svelte용으로 호스팅된 Mastra MCP 서버에 연결하여 컴포넌트 문서와 유틸리티에 실시간으로 접근할 수 있게 합니다. 저장소의 README에는 대체 엔드포인트 참조, HTTP 전송 옵션 및 백업 호스트 세부 정보가 포함되어 있습니다.

워크플로 패턴

UI를 만들 때는 두 단계 접근 방식을 시도하세요:

1. X에 대한 정식 문서 예시를 보여줍니다
2. 그 예시를 내 정확한 제약 조건에 맞게 조정합니다 (예: SvelteKit 라우트, 폼 라이브러리, Tailwind 설정)

이렇게 하면 구현이 기반을 유지하면서 어시스턴트가 “접합” 작업을 처리하게 됩니다.

시작하기

프로젝트는 GitHub에서 오픈소스입니다:

Michael-Obele/shadcn-svelte-mcp

유용하다고 생각되면, 저장소에 별표를 달아 주세요.