はじめに

LLM(大規模言語モデル)がコードやデータを深く理解し、開発支援を行う時代が始まっています。その中で利用されている、Anthropic発のModel Context Protocol(MCP)はAI(LLM)がアプリケーションの状態や構造を柔軟に扱えるようになります。
本記事では、NuxtアプリケーションをMCPサーバー化する実験的なモジュールnuxt-mcpが気になりましたので、入門のため試してみたいと思います。
なお、nuxt-mcp 2025/07現時点ではExperimental段階のため、利用時は安定性・安全性の観点から注意が必要です。

まずはMCPについて

Model Context Protocol(MCP)は、Anthropicが2024年11月25日にオープンソースプロトコルを発表しました、LLMと外部ツールとデータを連携するための標準プロトコルで、従来チャットAIやプログラミング支援などでLLMがツールや情報を使うには、ツールごとに独自のラッパーや関数呼び出しを実装する必要がありました。

MCPはこれをMCPクライアントとMCPサーバーという構成に分け、JSON‑RPC2.0のメッセージで通信を行うプロトコルとして設計。一度クライアント側をMCP対応にしておけば、後は新しいツール(サーバー)が出てもクライアントの追加実装は不要で、プロトコルを通じて「どのサーバーに接続するか」を選択し、必要に応じて複数のサーバー(複数のツール)にアクセスできます。

たとえば、Gmail・Figma・GitHubなどのMCPに対応したサーバーがあれば、
LLMは「最新のメールを確認して」や「このデザインを開いて編集して」といった人間の言葉による指示を理解し、各ツールの操作やデータ取得を実行します。
これにより、行動・記憶・計画などの機能を持つAIエージェント(LLM＋周辺機能)が、文脈を維持しながら複数ツールを横断的に扱える「エージェント型AI」の構築が容易になります。

nuxt-mcpについて

nuxt‑mcpは、Antfu(Anthony Fu)氏が開発したNuxtモジュール及びViteプラグインで、Nuxt/ViteアプリケーションをMCPサーバーとして機能させるためのツールです。
これにより、LLMクライアント(VSCode、Cursor、Claude Desktopなど)が、開発中のNuxtアプリの構造やメタ情報、ファイルなどを動的に読み込み、
開発中のコードベースをAIに読み解かせ、リアルタイムで対話しながら開発を進めるという新しいワークフローへの第一歩なのかと思われます。

nuxt-mcpの構築

1.構築環境について

VSCode Version: 1.101.2
(拡張機能 GitHub Copilot、GitHub Copilot Chat)

Nuxtバージョン 3.17.6
nuxt-mcp 0.2.3
vite-plugin-mcp 0.2.3

2.まずはVSCodeにて、.vscode/mcp.jsonを追加しておく

{
  "servers": {
    "nuxt": {
      "type": "sse",
      "url": "http://localhost:3000/__mcp/sse"
    },
    "nuxt-docs": {
      "type": "sse",
      "url": "https://mcp.nuxt.com/sse"
    }
  }
}

3.nuxt.config.tsの設定
公式READMEに従いつつ構築したNuxtアプリケーションに以下を追加していきます。

nuxt.config.ts

export default defineNuxtConfig({
  compatibilityDate: '2025-05-15',
  devtools: { enabled: true },
  modules: ['nuxt-mcp'], // 追加
})

上記追加後、Nuxt(Nitro)サーバー起動(npm run dev)後に以下のようなMCPサーバー起動ログが出力されます。

  ➜ MCP:      Mcp server is running at http://localhost:3000/__mcp/sse                            23:37:25
ℹ [MCP] Updated config file /Users/xxxx/nuxtmcp-sample/nuxt-app/.vscode/mcp.json (x2)             23:37:25

MCPサーバーエンドポイント
(http://localhost:3000/__mcp/sse)が公開されます。以下のようなsessionIdが取得されています。

$ curl localhost:3000/__mcp/sse
event: endpoint
data: /__mcp/messages?sessionId=333feaa5-caaa-40ab-8bb2-6fb93314b3d7

4.vite-plugin-mcpの設定
こちらも公式READMEに従いつつvite.config.tsに追加

vite.config.ts

import { defineConfig } from 'vite'
import { ViteMcp } from 'vite-plugin-mcp'

export default defineConfig({
  plugins: [
    ViteMcp()
  ],
});

// 今回の記事ではViteMcpの操作は未確認です。

動作を確認してみる

VSCodeにて以下の図のようにCopilotChatを開いて、Agentモードに
mcp.jsonの画面にてRunningになっているのを確認、RunningになっていなければStart or RestartをクリックするとMCPサーバーが起動します。

上図のチャット欄右下のスパナのアイコンをクリックすると登録しているMCP Toolsが確認できます。

チャット欄にて登録されているnuxt-mcpのToolsの一つである#list-nuxt-componentsと入力すると実行許可を求めてきますので「Continue」をクリックして実行

独自で追加しておいたHello.vue、またNuxtに組み込まれているビルドインコンポーネント一覧を提示してくれています。

人が頭を抱えながら1つ1つのファイルを分析して仕様を把握していくということが、MCPサーバーを介してAIエージェントにNuxtアプリケーションのコード全体を理解させて、質問を行なって仕様、コンポーネント構造、依存関係、ルーティング情報やAPI情報を教えてもらったり、実装に関して提案してもらうというフローが見えてきますね。

MCP ToolsにカスタムToolを追加

こちらもREADMEを参考にしつつ追加

src/module.ts

import { defineNuxtModule } from '@nuxt/kit'
import fs from 'fs/promises'
import path from 'path'

export default defineNuxtModule({
  meta: { name: 'mcp-tools-deps' },
  async setup(options, nuxt) {
    nuxt.hook('mcp:setup', ({ mcp }) => {
      mcp.tool(
        'list-dependencies',
        'List dependencies and devDependencies from package.json',
        {},
        async () => {
          const pkgPath = path.join(nuxt.options.rootDir, 'package.json')
          try {
            const pkg = JSON.parse(await fs.readFile(pkgPath, 'utf-8'));
            const lines: { type: "text"; text: string }[] = [];

            const printDeps = (deps: Record<string, string> | undefined, label: string) => {
              if (deps && Object.keys(deps).length > 0) {
                lines.push({ type: "text", text: `${label}:` });
                Object.entries(deps).forEach(([name, ver]) => {
                  lines.push({ type: "text", text: `  - ${name}: ${ver}` });
                });
              }
            };

            printDeps(pkg.dependencies, 'dependencies');
            printDeps(pkg.devDependencies, 'devDependencies');

            return { content: lines };
          } catch (err: unknown) {
            if (err instanceof Error) {
              return { content: [{ type: 'text', text: err.message }] };
            } else {
              return { content: [{ type: 'text', text: String(err) }] };
            }
          }
        }
      )
    });
  },
});

そして、以下のようにnuxt.config.tsでカスタムモジュールを読み込むようにします。

nuxt.config.ts

  modules: [
    '~/src/module', // 追加
    'nuxt-mcp'
  ]

サーバー起動後、先ほどのTools一覧にlist-dependenciesが追加され利用できるようになります。
このようにMCP Toolsを関数として登録しておくことで、AIエージェントがそれらを関数のように呼び出せるようになり、Nuxtプロジェクトの構成や状態を保持しながら操作可能な自律的アシスタントとして機能させることができます。
例えば上記はpacakge.jsonを読み取って、今使っているパッケージ構成をLLMに明示させていますが、さらに発展させて指定パッケージの最新互換版を探すということをエージェントに質問して、エージェントにパッケージのバージョンアップなどを依頼していくことができるのかなと思われます。

最後に

nuxt-mcpを導入、開発中のNuxtアプリケーションのコードを解析することにより仕様の把握から、より適したNuxtフレームワークの使い方の提案、そしてAIエージェントと二人三脚で実装(抽象度が高いところは人とAIが協働して形にしていき、実装が完成に近づきより具体的になった後はAIエージェントにユニットテストをお願いしたり)、また他のMCP、例えばGitHub MCPを利用してPRやコードレビュー、issue作成、issuからタスクの実施、Playwright MCPを利用してE2Eの実施と幅広いユースケースに柔軟に対応して開発していくことが想像できました。
そして、Agent2Agent Protocol(A2A)を用いたエージェント同士の連携によりどんどん自動化が進んでいくんでしょうか。

さらに理解を深めるため、以下の資料をみつつ自分でもMCPサーバー、クライアントを作成してみたいと思います。

もちろん便利になる一方で、様々なリスクもあるためセキュリティ面についてもしっかりと学んでいきたいですね。

最後までお読みいただきありがとうございます。

参考資料