@magicuidesign/mcp について
@magicuidesign/mcp は Magic UI の公式 MCP サーバーで、AI エディターから Magic UI コンポーネントを検索・導入できます。Cursor、Windsurf、Claude、Cline などを使うフロントエンド開発者向けです。ライブの Magic UI レジストリを直接参照します。
主な機能
- 01キーワードによる Magic UI レジストリ項目の検索
- 02種類や件数指定によるページネーション付き一覧表示
- 03単一項目のインストール手順と例の取得
- 04CLI によるクライアント向け MCP 設定の導入
活用シーン
- 01エディター上でアニメーションテキストや背景コンポーネントを探す
- 02コンポーネントのインストール手順とソース例を取得する
- 03AI アシスタントに Magic UI コンポーネントの追加を依頼する
MCP 対応
本プロジェクトは MCP サーバーであり、Magic UI レジストリの閲覧と検索のため、listRegistryItems、searchRegistryItems、getRegistryItem の 3 つのツールをクライアントに公開します。
設定
ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。
ツール
ローカルサーバーのツールはマシン上で起動して初めて取得できます。メンテナーはまだツール一覧を提供していません。
詳細
@magicuidesign/mcp
Magic UI の公式 ModelContextProtocol（MCP）サーバーです。
MCP の設定をインストールする
npx @magicuidesign/cli@latest install <client>
対応クライアント
- cursor
- windsurf
- claude
- cline
- roo-cline
手動インストール
IDE の MCP 設定に追加します。
{
"mcpServers": {
"magicuidesign-mcp": {
"command": "npx",
"args": ["-y", "@magicuidesign/mcp@latest"]
}
}
}
使用例
設定すると、次のようなリクエストができます。
「ロゴのマーキーを作成して」
「ぼかしとフェードのテキストアニメーションを追加して」
「グリッド背景を追加して」
利用可能なツール
このサーバーは、MCP 経由で呼び出せる次のツールを提供します。
| ツール名 | 説明 |
|---|---|
listRegistryItems | kind、query、limit、offset などの任意のフィルターを使って、Magic UI のレジストリアイテムを一覧表示します。レジストリの閲覧におすすめです。 |
searchRegistryItems | 名前、タイトル、説明、レジストリの種類を対象にキーワードで Magic UI のレジストリアイテムを検索します。ページネーションにも対応しています。 |
getRegistryItem | 1 つのレジストリアイテムの詳細を返します。インストール手順に加え、ソース、関連アイテム、使用例を任意で含めることができます。 |
MCP の制限事項
一部のクライアントには、呼び出せるツール数に上限があります。このサーバーは汎用的なツールを少数に絞り、あらかじめ定義されたカテゴリ分類に頼るのではなく、Magic UI のライブレジストリから直接読み込みます。widgets、media、devices などの広範な意味的検索の概念は、現在 MCP API の第一級カテゴリとしてモデル化されていません。
クレジット
MCP サーバーを作成してくださった @beaubhp に心より感謝します 🙏
コメント
AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。