概要
Nuxt / Vite Plugin MCPはantfu氏によって開発されたOSSです。
既存のNuxt、Viteアプリに組み込むことで生成AIがMCPを経由し、アプリケーションの解析や操作・セットアップなど幅広くサポートを行えるようになります。
Nuxt / Vite Plugin MCPは2025/4/13時点で Experimentalのため、導入時は注意が必要です。
MCPとは?
モデルコンテキストプロトコル（MCP）は、LLMアプリケーションと外部データソースおよびツールとのシームレスな統合を可能にするオープンプロトコルです。AI搭載IDEの構築、チャットインターフェースの拡張、カスタムAIワークフローの作成など、MCPはLLMと必要なコンテキストを接続する標準化された方法を提供します。
つまりMCPを提供するサービスとCursorやClineなどAIエージェントを連携することで柔軟かつ容易にシステムを跨いだタスク実行ができるようになります。
例えばGoogle Drive MCPでDrive内に配置された設計ファイルを検索・解析し、Github MCPで設計書と実際のリポジトリ状況から必要なIssue・PRを作成する...のようなフローを組むことができ、これらを自然言語の指示で実施できるようになります。
特徴
Nuxtアプリの構造や設定を解説してくれる
既存アプリの構造・設定を解析するtoolが提供されているため、仕様把握が容易になります。
利用可能なNuxt Modulesを教えてくれる
Nuxt Modules に登録されているmodulesから利用可能なものをサジェストしてくれます。
従来だと存在しない、利用できないModulesを提案してしまうことがありますが、このMCPにより解消できる可能性が見込めます。
導入しているVite Pluginの具体的な仕様について解説してくれる
importしたVite Pluginがどのような依存関係を持ち、どのようにコンパイルされているかを解説してくれます。
Nuxt Modules開発者がMCP Toolsを簡単に拡張できる
Module開発者がhooksにmcp:setup を追加してtoolsを登録することでNuxtユーザはパッケージインストール&MCPサーバを起動するだけで各モジュールのtoolsを利用できるようになります。
//実装例)
// src/module.ts
export default defineNuxtModule({
meta: {
name: 'my-module',
},
async setup(options, nuxt) {
nuxt.hook('mcp:setup', ({ mcp }) => {
// Setup your MCP tools here
// For example
mcp.tool('get-nuxt-root', 'Get the Nuxt root path', {}, async () => {
return {
content: [{
type: 'text',
text: nuxt.options.rootDir,
}],
}
})
})
},
})
今後VueUseのような多数のutilsを提供するライブラリがvueuse/nuxtに上記のhooksを提供することで「ここではこういうutilが使えるよ」のような解像度の高いサジェストを受けることができるかもしれません。
Nuxt MCPができること
Nuxt / Vite Plugin MCPは以下のtoolsを提供しています。
| tools | 機能（日本語） | 原文 |
|---|---|---|
get-vite-config |
ルート、リゾルブ、プラグイン、環境名など、Viteの設定ダイジェストを取得します。 | Get the Vite config digest, including the root, resolve, plugins, and environment names. |
get-vite-module-info |
モジュールの依存関係（インポーター、インポートされたモジュール、コンパイル結果）を取得します。 | Get graph information of a module, including importers, imported modules, and compiled result. |
get-nuxt-config |
SSR、appDir、srcDir、rootDir、alias、runtimeConfig、modulesなど、Nuxtの設定を取得します。 | Get the Nuxt configuration, including the ssr, appDir, srcDir, rootDir, alias, runtimeConfig, modules, etc. |
list-nuxt-auto-imports-items |
新しい関数をコードにインポートする際に使用可能なオートインポート項目を一覧表示します。 | List auto-imports items, when importing new functions to the code, check available items from this tool. |
list-nuxt-components |
Nuxtアプリに登録されているコンポーネントを一覧表示します。新しいコンポーネントを追加・インポートする際に確認します。 | List registered components in the Nuxt app. When adding importing new components, check available components from this tool. |
list-nuxt-pages |
Nuxtアプリに登録されているページとそのメタデータを一覧表示します。 | List registered pages and their metadata in the Nuxt app. |
list-remote-nuxt-modules |
nuxi module add {module-name} コマンドでプロジェクトに追加できる全てのNuxtモジュール（公式およびコミュニティ）を一覧表示します。 |
List all available Nuxt modules that can be added to your project using the 'nuxi module add {module-name}' command. This provides a comprehensive list of official and community modules. |
get-nuxt-module-info |
モジュール名を指定してNuxtモジュールの情報を取得します。 | Get information about a Nuxt module by name |
nuxt-scaffold |
現在のNuxtプロジェクトに新しいコンポーネント／ページ／レイアウト／ミドルウェアなどをスキャフォールド（自動生成）します。 | Scaffold a new component/page/layout/middleware etc. in the current Nuxt project. |
素のAIエージェントで解析させた時との違い
Github Copilot AgentやClineなど開発をサポートするAIエージェントはいくつか存在しますが、Nuxt MCPを利用しなくてもソースコードを解析してアドバイスを出すこと自体は可能です。
ただしLLMの特性から特定のライブラリにおいて知識が古かったり、Deprecatedの構文を利用してしまう、間違ったサジェストを提案してしまうなどの問題がしばしば起きます。
このMCPを利用することでNuxtやNuxt Modulesのより細かい実装・仕様を考慮した上でAIがサジェストを出したり、ライブラリの更新によって使えなくなった構文などの通知が期待できます。
セットアップ手順
GithubにNuxt,Vite Pluginそれぞれのセットアップ手順が記載されています。
Nuxt MCP
手順
https://github.com/antfu/nuxt-mcp/tree/main/packages/nuxt-mcp#nuxt-mcp
-
以下コマンドを実行
npm i -D nuxt-mcp -
nuxt.config.tsに以下設定を追加// nuxt.config.ts export default defineNuxtConfig({ modules: ['nuxt-mcp'], //Insert here }) -
Nuxtアプリを起動
Nuxtアプリ起動時、MCPサーバは以下パスで同時に起動します。
http://localhost:3000/__mcp/sse
Vite Plugin MCP
手順
https://github.com/antfu/nuxt-mcp/tree/main/packages/vite-plugin-mcp#vite-plugin-mcp
- 以下コマンドでインストール
-
vite.config.tsに以下を追加//vite.config.ts import { defineConfig } from 'vite' import { ViteMcp } from 'vite-plugin-mcp' //Insert here export default defineConfig({ plugins: [ ViteMcp() // Insert here ], }) - Viteアプリを起動
Viteアプリ起動時、MCPサーバは以下パスで同時に起動します。
http://localhost:5173/__mcp/sse
MCPの利用方法
Nuxt MCPはSSEで起動します。
起動したMCPサーバの利用方法はAIエージェントによって異なります。
VS Code (Github Copilot Agent)
.vscode/mcp.json に以下を追加
{
"servers": {
"nuxtServer": {
"type": "sse",
"url": "http://localhost:3000/__mcp/sse"
}
}
}
VS Codeの CopilotでAgentモードを有効化し、MCPを適用する方法は この記事 で解説しています。
Cursor
.cursor/mcp.json に以下を追加
{
"mcpServers": {
"nuxtMCP": {
"url": "http://localhost:3000/__mcp/sse"
}
}
}
以下のようにMCPが認識されていればOK。エラーが出る場合はNuxtアプリを再起動した後にCursor側で再読み込みする。
Cline
- VS Codeの左側メニューからClineを選択し、 上部アイコンの
MCP Serversを選択
-
Remote Serversを選択し、Nuxt MCPの接続先を入力して追加
-
利用可能なツールが一覧として表示される
Claude Desktop
Claude DesktopでSSEのMCPサーバを登録するにはclaude_desktop_config.jsonに以下を追記します。
{
"mcpServers": {
"nuxtServer": {
"command": "npx",
"args": ["mcp-remote", "http://localhost:3000/__mcp/sse"]
}
}
}
nuxt-scaffoldを呼び出し、middleware下にサンプルファイルを作成できました。
Windsurf
~/.codeium/windsurf/mcp_config.jsonに以下を記載
{
"mcpServers": {
"nuxt-mcp": {
"serverUrl": "http://localhost:3000/__mcp/sse"
}
}
}
魅力
導入してみて感じた魅力は以下の通りです。
1. 導入から利用までが簡単
2. 仕様理解が速くなる
3. 検索サーバの代用として優秀
4. 拡張性が高い
5. Nuxt/Modulesの知らなかった機能を学びやすくなる
最後に
Nuxt/Vite Plugin MCPは2025/4/13時点でExperimentalですが、既に得られるメリットが多々あります。
実際に利用する際には大規模アプリに対して導入することが多くなると思います。
なぜなら大規模化したアプリほど仕様を１から理解するには時間がかかり、それらを補助するのが本MCPだからです。
フロントエンドの構成についてREADMEやVitePressと組み合わせることで仕様理解をサポートしたり、新たにセットアップする際に標準ルールに従って構築することができるため品質向上にも繋がると思いました。
また、Nuxt v3.17.0 では本MCP開発者であるantfu氏が提案した @nuxt/docs がリリースされ、yml,markdown形式のdocumentを追加できるようになります。
このような標準化されたドキュメントを提供することで、MCPだけでなくLLMなどからもアプリ仕様へ参照しやすくする狙いがあるそうです。
v3.17.0 は現在ドラフトで、 @nuxt/docs の今後の動向に期待です！
Vibe Codingと呼ばれる手法も登場し、AIエージェントにコーディングを全て任せてエンジニアは一切コードに触れないという試みもちらほら見かけるようになりました。
MCPを活用することで、AIがより少ない試行回数で目標達成することが期待できそうです。
Special Thanks
記事をレビューしていただいた Anthony Fu氏 に感謝を