MCPサーバー

⚠️ 進行中の作業:Vize は積極的に開発中であり、まだ運用環境で使用する準備ができていません。 MCP サーバーの機能は予告なく変更される場合があります。

Vize は、AI を活用した開発ワークフロー用に Model Context Protocol (MCP) サーバーを提供します。 MCP サーバーは、コンポーネントギャラリー (Musea) と AI アシスタントの間のギャップを埋め、AI アシスタントが Vue コンポーネントを理解し、ナビゲートし、操作できるようにします。

インストール

Vite+ インストールガイドから vp を一度インストールし、サーバーをプロジェクトに追加します。

vp install -D @vizejs/musea-mcp-server

MCP とは何ですか?

モデルコンテキストプロトコルは、AI アシスタント (Claude、ChatGPT など) を開発ツールに接続するためのオープンスタンダードです。 AI アシスタントがコードベースを推測する代わりに、MCP は実際のコンポーネントデータ (プロップ、イベント、スロット、バリアント、ドキュメント) への構造化されたアクセスを提供します。

Vize の MCP サーバーは Musea ギャラリーからコンポーネント情報を公開するため、AI アシスタントはギャラリーを閲覧している開発者と同じようにコンポーネントを理解できます。

機能

MCP サーバーは、AI アシスタントに次のツールを提供します。

コンポーネントの検出

すべてのコンポーネントを一覧表示— 登録されているすべてのコンポーネントをカテゴリ、タグ、ステータスとともに参照します。
コンポーネントの検索— 名前、タグ、または説明でコンポーネントを検索します
コンポーネントメタデータの取得— 特定のコンポーネントに関する詳細情報を取得します

コンポーネント API

プロパティ— タイプ、デフォルト、必要なステータスを含む完全なプロパティ定義
イベント— ペイロードタイプを持つ発行されたイベント
スロット— スロットプロパティタイプを持つ名前付きスロット
公開— 公開されたメソッドとプロパティ

ストーリー情報

バリアントリスト— アートファイルで定義されているすべてのバリアント
バリアントソース— 各バリアントのテンプレートコード
デフォルトのバリアント— デフォルトで表示されるバリアント

デザイントークン

トークンリスト— トークンファイルからのすべてのデザイントークン
トークンカテゴリ- 色、タイポグラフィ、間隔、ブレークポイント
トークン解決— プリミティブ値に解決されたセマンティックトークン

設定

クロードコード付き

MCP サーバーをクロードコード構成に追加します。

// .claude/settings.json
{
  "mcpServers": {
    "vize-musea": {
      "command": "vp",
      "args": ["dlx", "@vizejs/musea-mcp-server"]
    }
  }
}

クロードデスクトップを使用

Claude デスクトップ MCP 構成に追加します。

{
  "mcpServers": {
    "vize-musea": {
      "command": "vp",
      "args": ["dlx", "@vizejs/musea-mcp-server"]
    }
  }
}

他の AI アシスタントとの併用

MCP 互換の AI アシスタントであれば、サーバーを使用できます。構成パターンは同じです。アシスタントに vp dlx @vizejs/musea-mcp-server を指定します。

使用例

コンポーネントの検出

AI アシスタントに適切なコンポーネントを見つけるように依頼します。

「どのようなボタンコンポーネントがありますか? VFButton のバリエーションを見せてください。」

AI は MCP サーバーにクエリを実行して、ボタン関連のすべてのコンポーネント、そのプロパティ、および利用可能なバリアントを検索し、正しい使用方法を提案します。

コード生成

正しい props を使用してコンポーネントの使用法を生成します。

"検証エラー状態を含む、VFInput コンポーネントと VFTextarea コンポーネントを使用してフォームを作成します。"

AI は、MCP サーバーからの正確なプロップ名、タイプ、利用可能なバリアントを認識し、プロップ名を幻覚させることなく正確なコードを生成します。

API リファレンス

コンポーネント API をプログラムでクエリします。

「VFNameBadgePreview はどのようなプロパティを受け入れますか? user-role の有効な値は何ですか?」

AI は、一般的な推測ではなく、コードベースから実際のプロップ定義を返します。

文書作成の支援

「SponsorGrid コンポーネントのプロパティとバリアントに基づいてドキュメントを作成します。」

AI は、MCP を通じて実際のコンポーネントのメタデータを検査することで、正確なドキュメントを生成できます。

仕組み

AI Assistant
  ↕ MCP Protocol (JSON-RPC over stdio)
@vizejs/musea-mcp-server
  ↕ Reads art files and component sources
Your Project (*.art.vue files + components)

MCP サーバー:

プロジェクト内のすべての *.art.vue ファイルを検出します
vize_musea を使用してそれらを解析し、コンポーネントのメタデータを抽出します
MCP ツールを通じてメタデータを公開する
AI アシスタントのクエリにリアルタイムで応答