Claude Media
Vuetify MCPをClaude Codeに接続する手順と/mcp・/oneの違い
Claude CodeMCPClaude連携チュートリアル

Vuetify MCPをClaude Codeに接続する手順と/mcp・/oneの違い

Vuetify MCPをClaude Codeに登録する1行コマンドと、認証なしの/mcpとVuetify One OAuthの/oneの使い分け、v4移行で引くツールをまとめます。

読了目安 約12分

Claude CodeでVuetify MCPを使うなら、ターミナルでclaude mcp add --transport http vuetify-mcp https://mcp.vuetifyjs.com/mcpを1回実行すれば足ります。このURLは認証なしで、コンポーネントAPI、インストールガイド、アップグレードガイドを引けます。Vuetify Oneのアカウントで入る/oneは、BinやPlaygroundを作りたいときだけの2本目です。

Vuetify MCPで何が引けるか

Vuetify MCPは、Vuetify 3/4とVuetify0のAPI、インストール・アップグレード・破壊的変更のドキュメントをAIに構造化して渡すMCPサーバーです。Vuetifyのドキュメントは、静的なllms.txtと違って「リアルタイムで問い合わせできる」点を特徴に挙げています。Claude向けコネクタの一覧にも、Anthropic verifiedの表示つきで載っています。

ホスト版のURLは2つあります。

くらべる

2つのホスト版URL

認証なし

https://mcp.vuetifyjs.com/mcp

ドキュメントとAPI、インストール・アップグレードのガイドを引けます。多くのエディターはこちらだけで足ります。

Vuetify One OAuth

https://mcp.vuetifyjs.com/one

ドキュメントのツールに加え、Vuetify Oneのエコシステム向けツールが使えます。サブスクライバーが対象です。

2つを同じ接続として共有してはいけない、と公式は注意しています。OAuthを接続時に一括で行うクライアント(Grok Bot、Cursor Agents)があるためで、/oneは別のサーバーとして足します。

Claude Codeに登録する

登録はclaude mcp addで行います。

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

空の設定ディレクトリで--scope projectを付けて試すと、次のように表示され、プロジェクト直下の.mcp.jsonに書き込まれました(Claude Code 2.1.304で確認、パスは省略)。

claude mcp add --scope project --transport http vuetify-mcp https://mcp.vuetifyjs.com/mcp
# Added HTTP MCP server vuetify-mcp with URL: https://mcp.vuetifyjs.com/mcp to project config
{
  "mcpServers": {
    "vuetify-mcp": {
      "type": "http",
      "url": "https://mcp.vuetifyjs.com/mcp"
    }
  }
}

スコープを指定しない場合の既定はlocalで、そのプロジェクトだけ・自分だけに効きます。チームで共有するなら--scope projectを付け、.mcp.jsonをコミットします。ただし.mcp.jsonのサーバーは初回に承認が必要で、未承認のうちはclaude mcp listに「Pending approval」と出ます。claudeを対話モードで起動して承認します。

Vuetify側にも自動設定の手段があります。

  • npx -y @vuetify/mcp config --remote: IDEを自動検出して、ホスト版の設定を書き込みます
  • npx @vuetify/cli mcp install: Vuetify CLIで接続設定を書き込みます(旧vuetify add mcpは非推奨で、こちらに転送されます)

どちらのコマンドもClaude Code以外のエディターを含めて設定を書く道具です。Claude Codeだけならclaude mcp addの1行のほうが、何が書かれるかを読めます。

/oneを足してVuetify Oneで認証する

/oneは、/mcpとは別のサーバー名で追加します。

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

OAuthが要るリモートサーバーは、Claude Codeの/mcpコマンドで認証します。/oneだけで利用できるツールは、BinやPlayground、vtfy.linkの短縮URLを作る系統です。

系統主なツール/mcp/one
ドキュメント・API主なツールget_component_api_by_version、get_installation_guide、get_upgrade_guide、get_v4_breaking_changes/mcp使える/one使える
Vuetify One主なツールcreate_vuetify_bin、create_vuetify_link、create_vuetify_playground、get_all_bins/mcp使えない/one使える

公式は、ホスト版でAPIキーを貼り付ける設定は主たる道ではないとしています。ローカルや自前ホスティングではVUETIFY_API_KEYを渡せますが、通常のホスト版では、OAuthが認証の道です。

破壊的変更やAPIを引かせる

Vuetify 3/4の作業は、次のツールから始めます。

Vuetify 3/4

最初に使うツール

  • get_installation_guide

    Vite、Nuxt、Laravel、CDNなど、環境別のインストールガイドを返します。

  • get_component_api_by_version

    コンポーネントのprops、slots、eventsをバージョン指定で引きます。

  • get_upgrade_guide

    メジャーバージョン間のアップグレードガイドです。

  • get_v4_breaking_changes

    Vuetify 4の破壊的変更を引きます。

公式の例文には「VBtnのAPIを教えて」「このリポジトリからVuetify 3のパターンでv4で壊れるものを探して」があります。後者は、Claude Codeの得意なリポジトリ走査と組み合わせるのに向いています。

指示が曖昧だと、Claudeは学習済みの知識で答えてしまうことがあります。CLAUDE.mdに、引き先を書いておく方法があります。

## Vuetify
- コンポーネントのprops・slots・eventsは、答える前にVuetify MCPの
  get_component_api_by_version で確認する
- v3からv4への移行は get_v4_breaking_changes と get_upgrade_guide を先に引く
- 推測で書いたAPIを使わない。MCPで見つからなければ、そう伝える

これは設定例で、効き方はモデルの判断に左右されます。呼ばれたかどうかは、Claudeのツール呼び出しの表示で確かめられます。

つながったかを確かめる

登録後はclaude mcp listで状態を見ます。接続できていれば「Connected」、OAuthが要る状態なら「Needs authentication」、失敗なら「Failed to connect」と表示される仕様です。個別の詳細はclaude mcp get vuetify-mcpで見られます。Claudeのセッション内では/mcpで同じ状態を確認できます。

登録済みの接続を外すにはclaude mcp remove vuetify-mcpを使います。リモートサーバーを外すと、保存されたOAuthトークンも一緒に消えます。

Claude Desktopでは直接つながらない

Claude Desktopのclaude_desktop_config.jsonはstdioのサーバーだけを受け付け、url:によるHTTP接続は書けません。公式は2つの設定を示しています。

  • npx -y @vuetify/mcpでローカルのstdioサーバーとして動かす
  • npx -y mcp-remote https://mcp.vuetifyjs.com/mcpでホスト版にブリッジする

Windows+WSL2では、commandにwslを置き、argsの先頭にnpxを並べる形が紹介されています。編集後はClaude Desktopを完全に終了して再起動します。Claude Codeには、この制約はありません。

Vuetify0のツールを使うとき

同じサーバーはVuetify0(ヘッドレスなコンポーネントとコンポーザブル)の資料も返します。get_vuetify0_composable_list、get_vuetify0_composable_guide、get_vuetify0_component_list、get_vuetify0_component_guide、get_vuetify0_skillなどです。

公式が示すヘッドレスコンポーネント作成の流れは3段階です。

  1. 探す: get_vuetify0_composable_listで使えるプリミティブを一覧する
  2. 学ぶ: get_vuetify0_composable_guideで詳細なドキュメントを読む
  3. 参照する: get_vuetify0_component_guideで実装パターンを確かめる

従来のVuetify 3/4のコンポーネントを使う作業は、この流れではなく、前節のインストール・API・アップグレード系のツールから入ります。Claude向けコネクタのページには、全部で31のツールが載っています。

ローカル実行と自前ホスティング

ホスト版を使わない選択肢もあります。npx -y @vuetify/mcpでローカルのサーバーを起動すれば、オフラインや独自設定で使えます。チームや組織に配るなら、npx -y @vuetify/mcp --transport=http --port=3000 --host=0.0.0.0 --statelessでHTTPサーバーを立て、クライアント側のURLを自分のサーバーに差し替えます。

Claude Codeの設定ファイルは、ユーザー・ローカルスコープなら~/.claude.json、プロジェクト共有なら.mcp.jsonです。ローカル版を登録する場合の.mcp.jsonは次の形になります(公式の例に沿った形)。

{
  "mcpServers": {
    "vuetify-mcp": {
      "command": "npx",
      "args": ["-y", "@vuetify/mcp"]
    }
  }
}

Node.jsが入った環境でnpxの初回取得を待てること、ネットワークに依存したくないことがローカル版を選ぶ理由になります。それ以外は、更新を意識しなくてよいホスト版が楽です。

公式の例文とつまずきやすい点

公式が挙げる依頼の例は次の6つです。

  • Vite+Vueの新規プロジェクトにVuetify 4をドキュメントどおりに入れる
  • VBtnの現行API(props、slots、events)を教える
  • このリポジトリからVuetify 3のパターンでv4で壊れるものを探す
  • Vuetify0の選択系コンポーザブルと使い分けを一覧する
  • VDataTableの例でPlayのBinを作る(Vuetify Oneが必要)
  • このPlaygroundのvtfy.linkを作る(Vuetify Oneが必要)

後ろの2つだけは/oneが前提で、/mcpだけを登録した状態で頼んでも、Binを作るツールが存在しません。

つまずきやすいのは次の3点です。

  • 「Pending approval」のまま使えない: .mcp.jsonに書いたサーバーは未承認だと接続されません。claudeを対話モードで起動して承認します
  • 同じ名前を別のスコープに重複登録した: エンドポイントが違うと、claude mcp listと/mcpに警告が出ます。残したい側だけにして、claude mcp remove <name> --scope <scope>で消します
  • 起動に時間がかかる: 起動タイムアウトはMCP_TIMEOUT環境変数で変えられます。たとえばMCP_TIMEOUT=10000 claudeで10秒です

Vuetify MCPはContext7やMUI MCPと何が違うか

ライブラリごとに最新ドキュメントを渡す系統のMCPは他にもあります。Material UIならMUI MCPの設定手順、ライブラリを横断するならContext7のMCP設定があります。Vuetify MCPは、ライブラリを1つに絞った公式のホスト版で、APIの版指定やv4破壊的変更の専用ツールを持つ点が違いです。

NuxtでVuetifyを使う場合の検証ループはClaude CodeでNuxtアプリを開発するにあります。get_installation_guideはNuxt向けのガイドも返せるので、型検証と組み合わせられます。claude mcpコマンドの全体はClaude CodeのMCP設定ガイドで扱っています。

まとめ

登録は/mcpの1行で、これだけでAPIとアップグレードのドキュメントが引けます。/oneは、BinやPlaygroundを作る必要が出てから足せば十分です。残る手間は、Claudeが推測で書かずに必ずMCPを引くよう、CLAUDE.mdへ引き先を書いておくことです。

この記事を共有:XはてブLinkedIn

関連する記事

Claude Code をもっと見る →