Magic UI MCP
메타데이터
설정 스니펫
{
"mcpServers": {
"magic-ui": {
"type": "stdio",
"command": "npx",
"args": ["-y", "@magicuidesign/mcp"]
}
}
}
제공 도구
| 도구명 | 설명 | Claude Code 호출 |
|---|
list_components | Magic UI 컴포넌트 목록 조회 | mcp__magic-ui__list_components |
get_component | 특정 컴포넌트 코드/문서 조회 | mcp__magic-ui__get_component |
search_components | 키워드로 컴포넌트 검색 | mcp__magic-ui__search_components |
get_installation | 컴포넌트 설치 방법 조회 | mcp__magic-ui__get_installation |
사용 사례
- 애니메이션 UI 컴포넌트 즉시 검색 및 코드 삽입
- 랜딩 페이지, 마케팅 사이트 구축 시 시각 효과 컴포넌트 활용
- shadcn/ui 기반 프로젝트에서 Magic UI 확장 컴포넌트 통합
- React + Tailwind CSS + Framer Motion 컴포넌트 자동 생성
주의사항
- 환경변수 불필요 — 무료 공개 서비스
- shadcn/ui와 호환 — 기존 shadcn 프로젝트에 바로 통합 가능
- Tailwind CSS v4, React 19 지원 확인 후 사용
- 컴포넌트 코드는 프로젝트에 직접 복사되는 방식 (의존성 없음)