Vuetify MCP Server

Vuetify MCP Server とは？

Vuetify MCP Server は Vuetify チームによる公式のホスト型 MCP エンドポイントで、AI コーディングアシスタントに正確な Vuetify コンポーネント API、ドキュメントガイド、バージョンアップグレードルールを提供します。https://mcp.vuetifyjs.com/mcp で稼働しており、アカウントや API キーは不要です。

Vuetify は Vue 向けの Material Design コンポーネントフレームワークです。Vuetify MCP サーバーを使うと、アシスタントは記憶に頼って props を推測する代わりに、指定した Vuetify バージョンの実際の API 型を読み取り、インストールガイドや機能ガイドを取得し、リリースノートを確認し、Vuetify 2 から 3、3 から 4 への移行を構造化された手順で進められます。ヘッドレスなメタフレームワーク @vuetify/v0 のコンポーザブルとコンポーネントにも対応しています。

Vuetify MCP Server の使い方

公開エンドポイントは https://mcp.vuetifyjs.com/mcp（Streamable HTTP、認証不要）です。README には 2 つ目の URL https://mcp.vuetifyjs.com/one も記載されており、こちらは Vuetify One OAuth を使い、サブスクライバー向けに Vuetify One エコシステム全体を追加します。Vuetify One を契約していない場合は /mcp を使ってください。

Claude Code

claude mcp add --transport http vuetify-mcp https://mcp.vuetifyjs.com/mcp

任意、Vuetify One サブスクライバー向け（サインインはブラウザで行います）：

claude mcp add --transport http vuetify-one https://mcp.vuetifyjs.com/one

Claude Desktop と claude.ai

Settings → Connectors → Add custom connector を開き、名前を「Vuetify」として https://mcp.vuetifyjs.com/mcp を貼り付けます。

Cursor

~/.cursor/mcp.json に追加します：

{
  "mcpServers": {
    "vuetify-mcp": { "url": "https://mcp.vuetifyjs.com/mcp" }
  }
}

VS Code

.vscode/mcp.json に追加します：

{
  "servers": {
    "vuetify-mcp": { "type": "http", "url": "https://mcp.vuetifyjs.com/mcp" }
  }
}

ローカル実行

README では npx -y @vuetify/mcp によるローカル実行と、対話型セットアップツール npx -y @vuetify/mcp config --remote も紹介されています。後者は VS Code、Claude、Cursor、Trae、Windsurf を検出し、ホスト型の設定を自動で書き込みます。

Vuetify MCP Server の主な機能

• Vuetify チームが保守する公式サーバー（MIT ライセンス）。
• サインイン不要のホスト型エンドポイントで、リモート MCP 対応のあらゆるクライアントで利用可能。
• コンポーネントとディレクティブの API をバージョン別に参照。
• インストールガイド、機能ガイド、FAQ、エクスポート一覧、リリースノート。
• v1.5→v2、v2→v3、v3→v4 向けの機械実行可能なアップグレード計画とルール（複数段階の経路にも対応）。
• @vuetify/v0 のヘッドレスなコンポーザブルとコンポーネントをカバー。
• サブスクライバー向けの任意の Vuetify One エンドポイント（OAuth）。

Vuetify MCP Server のツール

ホスト型エンドポイントを調査したところ、28 個のツールが 5 つのグループに分かれていました：

• バージョン別 API リファレンス — get_vuetify_api_by_version、get_component_api_by_version、get_directive_api_by_version が特定の Vuetify リリースの API 型を返し、get_exposed_exports が npm パッケージのエクスポートを一覧表示します。
• ドキュメントとガイド — get_installation_guide、get_feature_guides、get_feature_guide、get_frequently_asked_questions、get_release_notes_by_version、get_vuetify_one_installation_guide。
• アップグレードと移行 — get_upgrade_plan は複数段階の移行を解決し（v2→v4 は v2→v3→v4 になります）、get_upgrade_rules は grep パターン、置換マッピング、codemod のヒントを返し、get_migration_receipt_schema はエージェントが結果を報告する形式を定義します。Vuetify 2 から 3 向けには get_v3_upgrade_playbook、get_v3_breaking_changes、get_v2_to_v3_component_map、get_v3_upgrade_baseline_recipe（Playwright のベースライン手順）があります。get_v4_breaking_changes は非推奨とされ、get_upgrade_rules の利用が推奨されています。
• Vuetify0（ヘッドレス） — get_vuetify0_composable_list、get_vuetify0_component_list、get_vuetify0_composable_guide、get_vuetify0_component_guide、get_vuetify0_exports_list、get_vuetify0_skill、およびインストールガイドとパッケージガイド。
• Issue 報告 — create_bug_report は、リポジトリとレポート種別があらかじめ選択された Vuetify の Issue サイトへのリンクを生成します。

Vuetify MCP Server のユースケース

• 正しい props でコンポーネントを生成：「Vuetify 3 の API を使って、サーバーサイドページネーション付きの VDataTable を作って。」
• 移行計画の作成：「このアプリを Vuetify 2 から 3 に移行する計画を作り、レイアウトコードの破壊的変更を一覧にして。」
• 変更点の確認：「最新の Vuetify 3 のリリースノートでは何が変わった？」
• プロジェクトのセットアップ：「Nuxt アプリに Vuetify をインストールするには？」
• @vuetify/v0 で独自デザインシステムを構築：「選択処理を扱う v0 のコンポーザブルはどれで、どう使う？」
• バグ報告：「この描画の問題について Vuetify のバグ報告リンクを用意して。」

Vuetify MCP Server のトラブルシューティング

• CLI コマンドを使うクライアントが違う。 README によると claude CLI は Claude Code であり、Claude Desktop ではありません。Claude Desktop ではカスタムコネクタを追加してください。
• 予期せず認可を求められる。 /one を追加した可能性があります。公開ドキュメントのツールには /mcp を使い、/one は Vuetify One サブスクライバー向けです。
• API キーを貼り付けない。 README では API キーは使わないとされています。公開エンドポイントにキーは不要で、/one は OAuth を使います。
• クライアントがリモート MCP に非対応。 代わりに npx -y @vuetify/mcp でローカルにサーバーを起動してください。