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コンポーネントをアプリケーション内で簡単に発見し、利用できるようになります。

特徴

• コンポーネント検出: 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トランスポートを使用してサーバーに接続できます。

貢献

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

• 問題を作成してバグを報告したり機能を提案したりします
• ドキュメントの改善
• バグ修正や新機能のプルリクエストを送信する

ライセンス

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