Magic UI MCP

Magic UI MCP

Magic UI MCPは、Magic UIの公式モデルコンテキストプロトコル（MCP）サーバーです。MCPベースのツールを使用して、LLM駆動アプリやIDEで直接呼び出せるインタラクティブでアニメーションされたUIコンポーネントの統合スイートを提供します。

Author: magicuidesign


プロトコルを表示

Magic UI MCPとは？

Magic UI MCPは、言語モデルやAIエージェントがMagic UIの現代的なフロントエンドコンポーネントの豊富なコレクションを発見、取得、および対話することを可能にするプロトコルサーバーです。標準化されたMCPエンドポイントを通じて、ユーザーは実装の詳細を取得し、例を取得し、AIワークフロー内の迅速なUI開発のために高度なコンポーネントビルディングブロックを利用できます。

Magic UI MCPの設定方法

Magic UI MCPは、自動CLIインストールまたは手動設定を通じて設定できます。

  • 自動: 次のコマンドを実行します。 
    npx @magicuidesign/cli@latest install <client>
    <client>をアプリケーション名に置き換えます（例：cursor、windsurf、claude、cline、またはroo-cline）。
  • 手動: 次のブロックをIDEまたはアプリのMCP設定ファイルに追加します： 
    {
  "mcpServers": {
    "@magicuidesign/mcp": {
      "command": "npx",
      "args": ["-y", "@magicuidesign/mcp@latest"]
    }
  }
}

Magic UI MCPの使い方

設定が完了したら、LMM駆動のアプリにUI関連のタスクを実行するように依頼できます。例：「ロゴのマルキーを作成」や「ぼかしフェードテキストアニメーションを追加」。サーバーはリクエストを分類されたツールのスイートを通じてルーティングし、Magic UIコンポーネントの実装詳細、コードスニペット、統合ガイドを提供します。

主な機能

  • 豊富なコンポーネントアクセス：ユニークなMagic UIコンポーネントの実装詳細を即座に取得。
  • カテゴリー別ツール：コンポーネントを機能別に整理し、効率的なツール発見とコンテキスト制限された環境を提供。
  • シームレスなLLM統合：MCP互換のアプリやエージェントとネイティブに動作し、AI駆動のUIプロトタイピングに即対応。
  • 軽量設定：迅速なインストールとローカルまたはリモートでの呼び出し機能。
  • 拡張性：Magic UIが進化するにつれて、新しいコンポーネントやグループのサポートを展開するように設計。

ユースケース

  • AI UIコード生成：IDEで自然言語プロンプトを使用してインタラクティブなUIやアニメーションを即座に生成。
  • コンポーネントクエリ：プロトタイピングや学習の際にMagic UIコンポーネントの実装詳細を検索、探査、取得。
  • 自動設計からコードへ：エージェントがデザインアイデアやインスピレーションを直接実装準備が整ったUIコードに翻訳します。

FAQ

Q1: Magic UI MCPをアウト・オブ・ザ・ボックスでサポートするアプリケーションは？
A1: サーバーは、cursor、windsurf、claude、cline、roo-clineなどの人気クライアントにネイティブにインストールできます。

Q2: ツールカテゴリに直接リストされていない特定のコンポーネントの詳細が必要な場合は？
A2: MCPサーバーをローカルで実行し、グループ化ロジックをカスタマイズすることで、より詳細または特定のコンポーネント情報にアクセスしたり、公開したりできます。

Q3: ツールの使用に制限はありますか？
A3: はい、一部のクライアントはリクエストごとのツール呼び出し数に制限を設ける場合があります。Magic UI MCPは、これらの制限に最適に対応するためにツールをカテゴリー別にグループ化します。

Q4: 自分のコンポーネントでMagic UI MCPを拡張できますか？
A4: サーバーはオープンソースでMITライセンスのため、コードベースをフォークし、カスタムコンポーネントやカテゴリーを含めるように適応できます。