koukiitou.com

Cloudflare WorkersでMCPサーバーを実装する

Cloudflare WorkersでMCPサーバーを実装する方法について書きます。
実装したMCPサーバーは、Gemini CLIなどから呼び出すことができるので便利です。

目次

パッケージをインストールする

まずは下記のパッケージが必要になるため、インストールします。
Cloudflare Workersの開発用のサーバーを動かすために必要なwranglerはインストール済みとします。

$ npm install zod agents @modelcontextprotocol/sdk

MCPサーバーの処理を記述する

index.jsのファイルに、下記のコードを記述します。
index.jsのファイルは、wrangler.jsoncのmainのフィールドで指定されているファイルとなりますので、環境により異なります。

import { createMcpHandler } from "agents/mcp";
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { z } from "zod";

export default {
	fetch: async (request, env, ctx) => {
		const server = new McpServer({
			name: "Example MCP Server",
			version: "1.0.0",
		});

		server.tool(
			"hello",
			"Returns a greeting",
			{ name: z.string().optional().describe("The name to greet") },
			async ({ name }) => {
				return {
					content: [{ type: "text", text: `Hello, ${name ?? "World"}!` }],
				};
			},
		);

		const handler = createMcpHandler(server);
		return handler(request, env, ctx);
	}
};

Gemini CLIにMCPサーバーの設定を記述する

Gemini CLIの設定ファイルに、MCPサーバーを記述します。
今回はカレントディレクトリに.gemini/settings.jsonというファイルを作成します。
それから、下記のように設定を記述しますが、systemPromptやurlのフィールドは適宜変更してください。

{
	"systemPrompt": "あなたは熟練のフルスタックエンジニアです。日本語で回答をおこなってください。",
	"mcpServers": {
		"example": {
			"url": "http://127.0.0.1:8787/mcp"
		}
	}
}

Gemini CLIからMCPサーバーを呼び出す

Gemini CLIを起動したら、下記のコマンドを実行します。
そうすると、接続済みのMCPサーバー一覧が表示されます。

$ /mcp list

MCPサーバーの接続を確認できたら、下記のような指示を与えます。
下記のように出力されたら、MCPサーバーを呼び出すことができたということになります。

$ helloというMCPサーバーを呼び出してください。名前は“タナカ”にしてください。
✦ Hello, タナカ!

現在時刻を返すツールを実装する

下記のコードを追記すると、現在時刻を返すツールを追加することができます。
いつでも現在時刻を確認することができるようになるので便利かもしれません。

server.tool(
	"get_current_time",
	"現在時刻（ISO形式）を返します",
	{},
	async () => {
		const now = new Date().toISOString();
		return {
			content: [{ type: "text", text: `現在の時刻は ${now} です。` }],
		};
	},
);

APIキーでアクセスに制限をかける

アクセスに制限をかけるような場合には、APIキーを用いたほうがいいと考えました。
そのようにExa MCPでもしていましたので、一般的な方法なのかもしれません。

export default {
	fetch: async (request, env, ctx) => {
		const apiKey = "1234567890"
		const url = new URL(request.url);

		const requestKey = url.searchParams.get("key");
		const expectedKey = apiKey;

		if (!requestKey || requestKey !== expectedKey) {
			return new Response("Unauthorized: Invalid API Key", { status: 401 });
		}

		const server = new McpServer({
			name: "Example MCP Server",
			version: "1.0.0",
		});

		server.tool(
			"hello",
			"Returns a greeting",
			{ name: z.string().optional().describe("The name to greet") },
			async ({ name }) => {
				return {
					content: [{ type: "text", text: `Hello, ${name ?? "World"}!` }],
				};
			},
		);

		const handler = createMcpHandler(server);
		return handler(request, env, ctx);
	}
};

APIキーでアクセスに制限をかける処理を追記したら、Gemini CLIの設定ファイルも編集します。
MCPサーバーのURLにkeyのパラメーターを追加して、設定したAPIキーを記述します。

{
	"systemPrompt": "あなたは熟練のフルスタックエンジニアです。日本語で回答をおこなってください。",
	"mcpServers": {
		"example": {
			"url": "http://127.0.0.1:8787/mcp?key=1234567890"
		}
	}
}

参考記事