Magic UI MCP MCP — ユースケース, インストール & ライブデモ

なぜ使うのか

主な機能

ライブ Magic UI レジストリ上の 3 つのツール
自然言語コンポーネントの検索 (種類、クエリ、ページネーション)
インストールコマンドと完全な使用法のスニペットを返します
静的バンドルなし - 常に現在のレジストリを読み取ります
すべての主要な 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 create-next-app@latest
追い風 + shadcn/ui — Magic UI はこれらに基づいて構築されています。不足している場合はインストールする

フロー

自然に求めてください

ヒーローセクションの H1 と CTA にブラーフェードインアニメーションを追加します。✓ コピーしました

→ エージェントは「ブラーフェード」の searchRegistryItems を呼び出し、コンポーネントを返します。
取り付け+配線

コンポーネントをインストールし、現在のヒーローと置き換えて app/page.tsx に貼り付けます。✓ コピーしました

→ インストールコマンドが実行されます。輸入品が追加されました。ヒーローが更新されました
タイミングを調整する

入口が遅い - H1 と CTA の間で 600 ミリ秒の遅延。✓ コピーしました

→ インラインで更新された小道具

結果： エディターを離れることなく、艦船にふさわしいヒーローアニメーションが完成します。

注意点

Magic UI と非 Tailwind セットアップの混合 — ほとんどのコンポーネントは Tailwind クラスを想定しています。 CSS モジュールへのポートは、その作業の準備ができている場合にのみ行ってください。

組み合わせ： mcp-echarts

カテゴリ別にすべての Magic UI コンポーネントを参照する

👤 図書館を探索するデザイナー ⏱ ~10 min beginner

使うタイミング： あなたは設計の初期段階にあり、利用可能なものをざっと調べたいと考えています。

フロー

種類別一覧

種類「アニメーション」のすべての Magic UI コンポーネントをリストします (最大 30)。✓ コピーしました

→ listRegistryItems は名前とタイトルを返します
興味のあるものを拡張します

マーキー、オーロラテキスト、シャインボーダーの詳細を表示します。✓ コピーしました

→ 詳細を含む。コンポーネントごとのインストール + 使用量

結果： 次のページでは、試してみる価値のあるコンポーネントの短いリストを示します。

静的なロゴ行をロゴのマーキーに置き換えます

👤 マーケティング/ランディングページの所有者 ⏱ ~10 min beginner

使うタイミング： 「Trusted by」行は時代遅れに見えます。スクロールするマーキーが動きを加えています。

フロー

マーキーを見つける

「Trusted by」行をロゴのマーキーにします。✓ コピーしました

→ エージェントはマーキーコンポーネントを選択して適応させます
ホバーで一時停止

アクセシビリティを確保するために、カーソルを合わせたときにマーキーを一時停止します。✓ コピーしました

→ プロパティ/クラスの微調整。動きを抑えたユーザーを維持します

結果： モダンに見え、動きの好みを尊重したマーキー列。

注意点

優先モーションを無視する — 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 レジストリに読み取り専用でフェッチします。どこにも書き込みはありません。

インストールするコンポーネントはすべて、プロジェクトにコードをプルします。他の依存関係と同様に、コミットする前に生成されたファイルを 1 回読み取ります。

トラブルシューティング

よくあるエラーと対処法

ツールは空の配列を返します

ネットワーク内でレジストリへの到達がブロックされている可能性があります。再試行し、DNS から magicui.design が解決されることを確認します。

確認： curl -I https://magicui.design/r/index.json

コンポーネントはインストールされますが、スタイルが設定されていないように見えます

Tailwind 設定または CSS 変数がありません — Magic UI の 1 回限りのセットアップ (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 からコードへの変換を行っているのです	パイプラインの別の部分をカバーします

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

🔍 400以上のMCPサーバーとSkillsを見る