Magic UI MCP MCP — 사용 사례, 설치 & 라이브 데모

왜 쓰나요

핵심 기능

라이브 Magic UI 레지스트리에 대한 세 가지 도구
자연어 구성요소 검색(종류, 쿼리, 페이지 매김)
설치 명령 및 전체 사용 조각을 반환합니다.
정적 번들이 없음 — 항상 현재 레지스트리를 읽습니다.
모든 주요 MCP 클라이언트에서 작동

라이브 데모

실제 사용 모습

magic-ui-mcp.replay ▶ 준비됨

0/0

설치

클라이언트 선택

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

{
  "mcpServers": {
    "magic-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@magicuidesign/mcp@latest"
      ]
    }
  }
}

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

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

{
  "mcpServers": {
    "magic-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@magicuidesign/mcp@latest"
      ]
    }
  }
}

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

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "magic-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@magicuidesign/mcp@latest"
      ]
    }
  }
}

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

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "magic-ui-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@magicuidesign/mcp@latest"
      ]
    }
  }
}

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

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "magic-ui-mcp",
      "command": "npx",
      "args": [
        "-y",
        "@magicuidesign/mcp@latest"
      ]
    }
  ]
}

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

~/.config/zed/settings.json

{
  "context_servers": {
    "magic-ui-mcp": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "@magicuidesign/mcp@latest"
        ]
      }
    }
  }
}

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

claude mcp add magic-ui-mcp -- npx -y @magicuidesign/mcp@latest

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

사용 사례

실전 활용법: Magic UI MCP

Next.js 랜딩 페이지에 애니메이션 히어로 섹션 추가

👤 마케팅 페이지를 구축하는 프런트엔드 개발자 및 디자이너 ⏱ ~15 min beginner

언제 쓸까: 세련된 영웅 애니메이션이 필요하고 문서를 직접 탐색하고 싶지 않습니다.

사전 조건

Next.js 또는 React 프로젝트 — npx 생성-다음-app@latest
Tailwind + shadcn/ui — 매직 UI는 이를 기반으로 구축됩니다. 누락된 경우 설치

흐름

자연스럽게 물어보세요

내 영웅 섹션에 H1 및 CTA에 대한 흐림 페이드 인 애니메이션을 추가합니다.✓ 복사됨

→ 에이전트는 'blur fade'를 위해 searchRegistryItems를 호출하고 구성요소를 반환합니다.
설치 + 배선

구성요소를 설치하고 현재 Hero를 대체하여 app/page.tsx에 붙여넣습니다.✓ 복사됨

→ 설치 명령이 실행됩니다. 수입품이 추가되었습니다. 영웅이 업데이트되었습니다.
타이밍 조정

느린 진입 — H1과 CTA 사이에 600ms 지연.✓ 복사됨

→ 인라인으로 업데이트된 소품

결과: 편집자를 떠나지 않고 제작할 수 있는 영웅 애니메이션입니다.

함정

Tailwind가 아닌 설정과 Magic UI 혼합 — 대부분의 구성요소는 Tailwind 클래스를 가정합니다. 해당 작업을 수행할 준비가 된 경우에만 CSS 모듈로 포팅하세요.

함께 쓰기: mcp-echarts

카테고리별로 모든 Magic UI 구성 요소를 찾아보세요.

👤 도서관을 탐험하는 디자이너 ⏱ ~10 min beginner

언제 쓸까: 디자인 초기 단계이고 사용 가능한 항목을 검색하려고 합니다.

흐름

종류별로 나열

'애니메이션' 종류의 모든 Magic UI 구성 요소를 나열합니다. 최대 30개입니다.✓ 복사됨

→ listRegistryItems는 이름 + 제목을 반환합니다.
흥미로운 것을 확장하세요.

marquee, aurora-text, Shine-border에 대한 세부 정보를 보여주세요.✓ 복사됨

→ 포함된 전체 세부정보 설치 + 구성 요소당 사용량

결과: 다음 페이지에서 시도해 볼 가치가 있는 구성 요소의 간단한 목록입니다.

정적 로고 행을 로고 윤곽선으로 교체

👤 마케팅/랜딩 페이지 소유자 ⏱ ~10 min beginner

언제 쓸까: '신뢰할 수 있는 사람' 행에 날짜가 표시되어 보입니다. 스크롤하는 윤곽선이 움직임을 추가합니다.

흐름

천막을 찾아보세요

'신뢰할 수 있는 사람' 행을 로고 윤곽선으로 만듭니다.✓ 복사됨

→ 에이전트가 선택 윤곽 구성요소를 선택하고 조정합니다.
마우스 오버 시 일시중지

접근성을 위해 마우스를 올리면 움직이는 영역을 일시중지하세요.✓ 복사됨

→ 소품/클래스 조정; 움직임이 제한된 사용자를 보호합니다

결과: 현대적으로 보이고 동작 선호도를 존중하는 마퀴 행.

함정

선호 감소 모션 무시 — Magic UI 구성 요소는 일반적으로 이를 존중합니다. 사용자를 모르면 재정의하지 마세요.

함께 쓰기: motion-dev-animations-skill

조합

다른 MCP와 조합해 10배 효율

magic-ui-mcp + motion-dev-animations-skill

사전 구축된 구성 요소를 위한 Magic UI, 맞춤형 애니메이션을 위한 Motion.dev

영웅에 대해 Magic UI의 흐림 페이드를 사용한 다음 아래의 사용자 정의 스크롤 링크 시차에 대해 Motion.dev를 사용하십시오.✓ 복사됨

magic-ui-mcp + figma

Figma 디자인을 사용하여 가장 가까운 Magic UI 구성요소에 도달하세요.

이 Figma 카드 섹션은 Magic UI의 도시락 그리드처럼 보입니다. 설치하고 텍스트를 입력하세요.✓ 복사됨

magic-ui-mcp + claude-code-design-skills

Figma-코드 흐름 + Magic UI 향상

Figma를 React로 변환하세요. 합리적인 경우 스크래치 구성 요소 대신 Magic UI 구성 요소를 사용하십시오.✓ 복사됨

도구

이 MCP가 노출하는 것

도구	입력	언제 호출	비용
listRegistryItems	kind?, query?, limit?, offset?	사용 가능한 구성 요소를 찾아보거나 페이지를 매깁니다.	1 registry fetch
searchRegistryItems	query + pagination	자연어 구성요소 조회	1 registry fetch
getRegistryItem	id/name	설치하기 전에 정확히 무엇을 얻을 수 있는지 확인하려면	1 registry fetch

비용 및 제한

운영 비용

API 쿼터: 레지스트리는 공개 가져오기입니다. 일반적인 사용에서는 속도 문제가 없습니다.
호출당 토큰: 호출당 작은 메타데이터
금액: 무료
팁: 종류 필터와 함께 listRegistryItems를 사용하세요. 탐색하기 위해 모든 항목을 가져오지 마세요.

보안

권한, 시크릿, 파급범위

자격 증명 저장: 자격 증명 없음

데이터 외부 송신: 읽기 전용으로 Magic UI 레지스트리를 가져옵니다. 어디에도 쓰지 않습니다.

설치하는 모든 구성 요소는 프로젝트에 코드를 가져옵니다. 종속성과 마찬가지로 커밋하기 전에 생성된 파일을 한 번 읽습니다.

문제 해결

자주 발생하는 오류와 해결

도구가 빈 배열을 반환합니다.

네트워크에서 레지스트리 연결이 차단될 수 있습니다. 다시 시도하고 DNS를 확인하여 Magicui.design이 해결되도록 하세요.

확인: curl -I https://magicui.design/r/index.json

구성 요소가 설치되었지만 스타일이 적용되지 않은 것처럼 보입니다.

Tailwind 구성 또는 CSS 변수가 누락되었습니다. Magic UI의 일회성 설정(globals.css + tailwind.config.ts)을 따르세요.

확인: Check tailwind.config.ts for magicui plugin

애니메이션이 끊김

재렌더링 캐스케이드일 가능성이 높습니다. 상위 구성요소를 메모합니다. 레이아웃 스래시가 없는지 확인하세요.

확인: Chrome DevTools Performance → Frames

대안

Magic UI MCP 다른 것과 비교

대안	언제 쓰나	단점/장점
motion-dev-animations-skill	구성 요소 라이브러리가 아닌 사용자 정의 모션 로직을 원합니다.	더 많은 일; 더 많은 제어
figma	Figma에 포팅할 기존 디자인이 있습니다.	다른 방향: 디자인 → 코드, 라이브러리 우선이 아님
claude-code-design-skills	라이브러리 채택이 아닌 Figma-to-code를 수행하고 있습니다.	파이프라인의 다른 부분을 다룹니다.

Magic UI MCP