MCPマジックUI

magicuidesign/magicuiリポジトリから Magic UI コンポーネントにアクセスして探索するための MCP (Model Context Protocol) サーバー。

MCP Magic UI とは何ですか?

MCP Magic UIは、Model Context Protocol（MCP）を実装し、Magic UIコンポーネントへのアクセスを提供するサーバーです。Magic UI GitHubリポジトリからコンポーネントデータを取得し、分類して、MCP APIを通じて利用できるようにします。これにより、AIアシスタントやその他のMCPクライアントは、Magic UIコンポーネントをアプリケーション内で簡単に発見し、利用できるようになります。

Related MCP server: SupaUI MCP Server

特徴

• コンポーネント検出: MCP ツールを通じてすべての Magic UI コンポーネントにアクセスします

• コンポーネントの分類: コンポーネントは名前と依存関係に基づいて自動的に分類されます

• キャッシュシステム: GitHub API呼び出しを減らし、オフラインで作業するためのコンポーネントデータのローカルキャッシュ

• 複数のトランスポートオプション: stdio と HTTP トランスポート方式の両方をサポート

• フォールバックメカニズム: GitHub APIが利用できない場合はモックデータが提供されます

インストール

構成

GitHub API のレート制限を回避するには、GitHub 個人アクセス トークンを設定することをお勧めします。

1. https://github.com/settings/tokensでトークンを作成します。

2. プロジェクトルートに.envファイルを作成します（または.env.exampleからコピーします）。

3. トークンを.envファイルに追加します。

使用法

サーバーの起動

stdio または HTTP トランスポートを使用してサーバーを起動できます。

サーバーに接続しています

任意のMCPクライアントを使用してサーバーに接続できます。例えば、MCP Inspectorを使用すると以下のようになります。

または、HTTP トランスポートを使用する場合:

利用可能なツール

サーバーは次の MCP ツールを提供します。

• get_all_components - 利用可能なすべての Magic UI コンポーネントとそのメタデータのリストを取得します。

• get_component_by_path - ファイルパスで特定のコンポーネントのソースコードを取得します

プロジェクト構造

• src/ - ソースコード

  • index.ts - サーバーのメインエントリポイント

  • cli.ts - コマンドラインインターフェース

  • server.ts - MCP サーバーの構成とツールの定義

  • services/ - サービスモジュール

    • github.ts - GitHub API のインタラクションとキャッシュ

    • component-parser.ts - コンポーネントの分類と処理

• cache/ - コンポーネントデータのローカルキャッシュ

• dist/ - コンパイルされたJavaScriptコード

仕組み

1. サーバーはMagic UI GitHubリポジトリからコンポーネントデータを取得します。

2. コンポーネントデータはローカルにキャッシュされ、API呼び出しを減らし、オフラインでの使用を可能にします。

3. コンポーネントは名前と依存関係に基づいて分類されます

4. サーバーはコンポーネントにアクセスして検索するためのMCPツールを公開します

5. クライアントはstdioまたはHTTPトランスポートを使用してサーバーに接続できます。

貢献

貢献を歓迎します！貢献できる方法は次のとおりです。

• 問題を作成してバグを報告したり機能を提案したりします

• ドキュメントの改善

• バグ修正や新機能のプルリクエストを送信する

ライセンス

マサチューセッツ工科大学