mcpField
M
MCP Magic UI

MCP Magic UI

ローカル
github.com/idcdev開発ツール1486 週間前に更新
リポジトリ

MCP Magic UI について

MCP Magic UIは、AIアシスタントなどのMCPクライアントがMagic UIリポジトリのコンポーネントを検索・取得できるサーバーです。コンポーネントを分類してローカルにキャッシュし、stdioとHTTPのトランスポートに対応します。

主な機能

  1. 01Magic UIコンポーネントの検索
  2. 02コンポーネントの自動分類
  3. 03オフライン利用向けのローカルキャッシュ
  4. 04stdioとHTTPのトランスポート
  5. 05代替用モックデータ

活用シーン

  1. 01アプリ用コンポーネントの検索
  2. 02パスを指定したソースコード取得
  3. 03GitHub利用不可時のコンポーネント閲覧

MCP 対応

コンポーネントのメタデータ一覧と、ファイルパスを指定したソースコード取得のツールを提供します。クライアントはstdioまたはHTTPで接続できます。

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

mcp.json · 共通設定
{
  "mcpServers": {
    "magic-ui": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/inspector"
      ]
    }
  }
}
起動コマンドnpx -y @modelcontextprotocol/inspector

ローカルサーバーにはマシン上の実行環境（Node.js 18 以上など）が必要です。設定ファイルの場所はクライアントごとに異なります。

パッケージ
npm@modelcontextprotocol/inspector

ツール

ツール一覧はまだ取得されていません

ローカルサーバーのツールはマシン上で起動して初めて取得できます。メンテナーはまだツール一覧を提供していません。

詳細

MCP Magic UI

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

MCP Magic UI とは？

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

機能

  • コンポーネントの検索：MCP ツールを通じて、すべての Magic UI コンポーネントにアクセスできます
  • コンポーネントの分類：コンポーネントは名前と依存関係に基づいて自動的に分類されます
  • キャッシュシステム：コンポーネントデータをローカルにキャッシュして、GitHub API の呼び出しを減らし、オフラインでの動作を可能にします
  • 複数のトランスポート方式：stdio と HTTP の両方のトランスポート方式に対応しています
  • フォールバック機構：GitHub API を利用できない場合に、モックデータを提供します

インストール

# Clone the repository
git clone https://github.com/idcdev/mcp-magic-ui.git
cd mcp-magic-ui

# Install dependencies
npm install

# Build the project
npm run build

設定

GitHub API のレート制限を避けるため、GitHub パーソナルアクセストークンを設定することをおすすめします。

  1. https://github.com/settings/tokens でトークンを作成します
  2. プロジェクトのルートに .env ファイルを作成します（または .env.example からコピーします）
  3. .env ファイルにトークンを追加します。
GITHUB_TOKEN=your_github_token_here

使用方法

サーバーの起動

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

# Using stdio transport (default)
npm start

# Using HTTP transport
TRANSPORT_TYPE=http npm start
サーバーへの接続

任意の MCP クライアントを使用してサーバーに接続できます。たとえば、MCP Inspector を使用する場合は次のとおりです。

npx @modelcontextprotocol/inspector mcp-magic-ui

HTTP トランスポートを使用する場合は、次のとおりです。

npx @modelcontextprotocol/inspector http://localhost:3000

利用可能なツール

サーバーは次の 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 トランスポートを使用してサーバーに接続できます

貢献

貢献を歓迎します。以下の方法で貢献できます。

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

ライセンス

MIT

コメント

Markdown 対応

MCP は初めてですか？

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。