Nuxt MCP を Claude Code に接続する設定と使い分けの手順
Nuxt で開発していて「Claude Code に Nuxt の最新仕様を正しく理解させたい」と感じたことはないだろうか。その答えの一つが Nuxt MCP だ。ただし「Nuxt MCP」と呼ばれるものは複数あり、接続方法も目的もそれぞれ異なる。本記事では、公式リモート MCP・ローカル開発向けモジュール・自作サーバーの3系統を整理し、Claude Code への接続手順と、そもそも導入すべきかの判断基準までを解説する。
Nuxt MCP には「公式リモート MCP（nuxt.com/mcp）」「antfu の nuxt-mcp（ローカルアプリ解析）」「@nuxtjs/mcp-toolkit（自作）」の3系統がある。Claude Code へは claude mcp add 一行で接続でき、最新ドキュメント参照が目的なら公式リモートを選ぶのが最短だとわかる。
Contents (8)
Nuxt MCP とは何か：混同しやすい3つの系統
MCP（Model Context Protocol）は、AI アシスタントに外部のツールやリソースを渡すための共通規格だ。Claude Code はこの MCP に対応しており、Nuxt 関連の MCP サーバーを接続すると、Nuxt の知識やプロジェクト情報を参照しながらコードを書けるようになる。
ここで重要なのは、「Nuxt MCP」という言葉が指す対象が3つに分かれる点だ。
- Nuxt 公式リモート MCP サーバー（
https://nuxt.com/mcp）— Nuxt.js 公式が提供する、ドキュメント・ブログ・デプロイ情報を返すホスト型サーバー - antfu 製 nuxt-mcp（github.com/antfu/nuxt-mcp）— ローカルの Nuxt / Vite アプリの構造を AI に理解させる開発用モジュール（実験的）
- @nuxtjs/mcp-toolkit（github.com/nuxt-modules/mcp-toolkit）— 自分のアプリに独自の MCP サーバーを組み込むための公式モジュール
目的が「Nuxt の最新仕様を Claude Code に教えたい」のか「自分のアプリの中身を理解させたい」のか「独自ツールを公開したい」のかで、選ぶべき系統が変わる。まずはこの違いを押さえておきたい。
Nuxt 公式リモート MCP を Claude Code に接続する
最も手軽なのが、Nuxt 公式が運用するリモート MCP サーバーへの接続だ。ローカルに何もインストールする必要はなく、Claude Code に1行追加するだけで使える。
公式ドキュメント（nuxt.com/docs/4.x/guide/ai/mcp）が案内している接続コマンドは次のとおりだ。
claude mcp add --transport http nuxt-remote https://nuxt.com/mcp
- ターミナルでプロジェクトディレクトリに移動する
- 上記の
claude mcp addコマンドを実行する - Claude Code を再起動し、
/mcpコマンドでnuxt-remoteが登録されたことを確認する
これで Claude Code は、Nuxt の最新ドキュメントやブログ記事をサーバー側から取得できるようになる。ローカルのバージョンに縛られず、常に最新版（既定は v4.x）の情報を引ける点が強みだ。
公式リモート MCP が公開するツールとリソース
接続後、Claude Code から利用できる主なリソースとツールは以下のとおりだ（出典：nuxt.com/docs/4.x/guide/ai/mcp）。
リソース（AI が探索できる情報源）
resource://nuxt-com/documentation-pages— ドキュメントページ一覧（既定は v4.x）resource://nuxt-com/blog-posts— リリースやチュートリアルを含むブログ記事resource://nuxt-com/deploy-providers— デプロイ先・ホスティング一覧
ツール（AI が呼び出せる操作）
- ドキュメント系：
list_documentation_pages/get_documentation_page/get_getting_started_guide - ブログ系：
list_blog_posts/get_blog_post - デプロイ系：
list_deploy_providers/get_deploy_provider
加えて、ドキュメント検索・デプロイ支援・バージョン移行支援といった定型作業向けの「ガイド付きプロンプト」も用意されている。Nuxt 3 から Nuxt 4 への移行など、バージョン差分でつまずきやすい作業では特に効果を発揮する。
antfu 製 nuxt-mcp でローカルアプリを解析させる
「公式ドキュメント」ではなく「自分が今開発しているアプリそのもの」を Claude Code に理解させたいなら、antfu 製の nuxt-mcp が候補になる。これは、ローカルの Nuxt / Vite アプリの構成をモデルに伝える開発用モジュールだ（github.com/antfu/nuxt-mcp）。
導入は Nuxt モジュールとして追加する。
- 開発依存としてモジュールを追加する（
npm i -D nuxt-mcp） nuxt.config.tsのmodules配列に'nuxt-mcp'を加えるnpm run devで開発サーバーを起動する- MCP エンドポイント
/__mcp/sse（例：http://localhost:3000/__mcp/sse）が有効になる
Claude Code へは、この SSE エンドポイントを登録する。
claude mcp add --transport sse nuxt-local http://localhost:3000/__mcp/sse
これにより、Claude Code はプロジェクトの設定や構成を参照しながら回答できる。ただし公式リポジトリには「Experimental. Use with caution.（実験的。注意して使うこと）」と明記されており、API や挙動が変わる可能性がある。本番運用ではなく、あくまで開発補助として捉えるのが安全だ。
@nuxtjs/mcp-toolkit で自作 MCP サーバーを組み込む
自分のアプリに独自の MCP ツールを持たせたい場合は、公式モジュール @nuxtjs/mcp-toolkit を使う。これは Nuxt アプリ自体を MCP サーバー化するためのもので、Cursor・VS Code・Claude といったクライアントに、アプリ固有の機能を公開できる。
このモジュールは server/mcp/ ディレクトリを走査し、そこに置いたツール・リソース・プロンプトの定義を自動登録する。トランスポート設定やサーバーの手組みは不要で、既定では /mcp に HTTP エンドポイントが追加される。「ファイルを正しい場所に置くだけで公開できる」という設計思想だ。
antfu 製 nuxt-mcp が「既存アプリを AI に理解させる」道具なのに対し、@nuxtjs/mcp-toolkit は「AI に渡すツールを自分で設計する」ための土台という位置づけになる。用途が異なるので、混同しないようにしたい。
Claude Code で Nuxt MCP は本当に必要か
導入手順を知ったうえで、あえて立ち止まりたい論点がある。「Claude Code を使うなら Nuxt MCP は不要」という主張だ。開発者 Alex Op は、その理由として コンテキストの肥大化 を挙げている（alexop.dev）。
MCP を常時接続すると、Nuxt の広範な情報が Claude Code のコンテキストに載り続ける。コンテキストが膨らむほど応答は遅くなり、処理コストも上がる。Alex の代替案は、必要なときだけ Nuxt ドキュメントの特定ページを直接読み込ませる、というものだ。
一方で Nuxt MCP に利点がないわけではない。判断の目安を整理すると次のようになる。
| やりたいこと | 向いている選択肢 |
|---|---|
| 最新ドキュメントを常に参照したい | 公式リモート MCP |
| 開発中アプリの構造を理解させたい | antfu 製 nuxt-mcp |
| チーム全員で同じ知識ベースを共有したい | 公式リモート MCP + スキル併用 |
| 軽さ・低コストを最優先したい | MCP を使わずドキュメント直参照 |
「とりあえず全部つなぐ」ではなく、目的に応じて必要な系統だけを接続するのが、Claude Code を快適に保つコツだ。
スキル・DevTools 連携との使い分け
Nuxt と Claude Code の連携手段は MCP だけではない。DevTools パネルから Claude Code を呼び出すモジュールや、Nuxt 4 のベストプラクティスを Claude Code に持たせるスキルも存在する。これらと MCP は競合ではなく、レイヤーの異なる補完関係にある。
- MCP：ドキュメントやアプリ構成という「情報源」を接続する
- スキル：Nuxt 4 移行など「特定タスクのノウハウ」を注入する
- DevTools 連携：ブラウザ上のコンポーネント文脈を渡して対話する
各手段の詳細な比較や DevTools モジュールのセットアップは、別記事「Claude Code × Nuxt.js｜DevTools 連携とスキル設定の使い方」で扱っている。本記事の MCP 接続と併せて読むと、Nuxt × Claude Code の連携像が立体的に見えてくるはずだ。
導入時の注意点とトラブルシューティング
最後に、実際に接続する際につまずきやすいポイントを挙げておく。
/mcpで登録を確認する — 追加後に Claude Code を再起動し、/mcpコマンドでサーバーが認識されているかを最初に確かめる- ローカル版はサーバー起動が前提 — antfu 製 nuxt-mcp の
/__mcp/sseはnpm run dev中のみ有効。開発サーバーを止めると接続も切れる - バージョンを合わせる — 公式リモート MCP の既定は v4.x。Nuxt 3 案件では取得情報とのズレに注意し、必要なら参照バージョンを意識する
- 実験的モジュールは過信しない — antfu 製 nuxt-mcp は実験段階。挙動が不安定なら一度切り離し、公式リモート MCP に切り替えて切り分ける
Nuxt MCP は「入れれば賢くなる魔法」ではなく、目的に合った系統を選んで初めて効く道具だ。まずは公式リモート MCP を claude mcp add で1行つなぎ、必要に応じてローカル版や自作サーバーを足していくのが、無理のない導入手順といえる。
出典
- Nuxt 公式ドキュメント「Nuxt MCP Server v4」: https://nuxt.com/docs/4.x/guide/ai/mcp
- antfu/nuxt-mcp（GitHub）: https://github.com/antfu/nuxt-mcp
- @nuxtjs/mcp-toolkit（GitHub）: https://github.com/nuxt-modules/mcp-toolkit
- Alex Op「Why You Don't Need Nuxt MCP with Claude Code」: https://alexop.dev/posts/why-you-dont-need-nuxt-mcp-claude-code/