Vercel で MCP サーバーを構築する

Model Context Protocol (MCP) の 2025-03-26 の仕様では新たに Streamable HTTP が追加され、リモート MCP サーバーへの注目が集まっています。従来の MCP サーバーは stdio を使用してローカルで実行されることが一般的であったため、デスクトップアプリケーションや CLI ツールのみで利用されるなど、利用シーンが限られていました。

Streamable HTTP を使用することで、リモートの MCP サーバーを Web アプリケーションから利用されることが期待されます。Claude の Web 版ではリモート MCP サーバー経由で MCP サーバーにアクセスできるようになったことが発表されています。

Claude can now connect to your world

Today we're announcing Integrations, a new way to connect your apps and tools to Claude. We're also expanding Claude's Research capabilities with an advanced mode that searches the web, your Google Workspace, and now your Integrations too.

www.anthropic.com

この記事では Next.js を使用して Vercel 上に MCP サーバーを構築する方法を紹介します。完成したコードは以下のリポジトリで確認できます。

Next.js プロジェクトを作成する

まずは以下のコマンドを実行して Next.js プロジェクトを作成します。

npx create-next-app@latest my-mcp-server

続いて以下のパッケージをインストールします。

@vercel/mcp-adapter: Vercel 上で MCP サーバーを構築するためのアダプター。HTTP Streamable と従来の方式である SSE の両方に対応している
zod: バリデーションライブラリ。ツールのインターフェイスを定義するために使用する

npm install @vercel/mcp-adapter zod

API ルートを作成する

続いて Next.js の API Routes を使用して MCP サーバーのエンドポイントを作成します。app/[transport]/route.ts に以下のコードを追加します。

app/[transport]/route.ts

import { createMcpHandler } from "@vercel/mcp-adapter";
import { z } from "zod";
 
const handler = createMcpHandler((server) => {
  server.tool(
    // ツールの名前
    "dice_roll",
    // ツールの説明
    "サイコロを振った結果を返します",
    // ツールの引数のスキーマ
    {
      sides: z.number().min(1).max(100).default(6).describe("サイコロの面の数"),
    },
    // ツールの実行関数
    async ({ sides }) => {
      // サイコロを振る
      const result = Math.floor(Math.random() * sides) + 1;
      // 結果を返す
      return {
        content: [{ type: "text", text: result.toString() }],
      };
    }
  );
});
 
export { handler as GET, handler as POST, handler as DELETE };

createMcpHandler 関数を使用して MCP サーバーのハンドラーを作成します。引数のコールバック関数で server オブジェクトを受け取り、tool メソッドを使用してツールを定義します。

handler は GET、POST、DELETE メソッドのエンドポイントとしてエクスポートします。これにより、HTTP ストリーミングと従来の SSE の両方に対応した MCP サーバーが作成されます。

ローカルで実行する

まずはローカル環境で試してみましょう。SSE トランスポートに必要な状態を管理するために Redis が必要です。docker-compose.yml を使用して Redis を起動します。

docker-compose.yml

version: "3.8"
services:
  redis:
    image: redis:latest
    ports:
      - "6379:6379"

docker compose up -d

Redis が起動したら、以下のコマンドを実行して Next.js アプリケーションを起動します。

REDIS_URL=redis://localhost:6379 npm run dev

正しく MCP サーバーを構築できているか確認するために MCP Inspector を使用しましょう。これは GUI ベースで MCP サーバーのデバッグを行うためのツールです。

npx @modelcontextprotocol/inspector

http://127.0.0.1:6274 にアクセスして MCP Inspector を開きます。「Transport Type」で「Streamable HTTP」を選択し、URL 欄に http://localhost:3000/mcp を入力して「Connect」ボタンをクリックします。