Cloudflare AgentsでMCPサーバーを作ってClaude Desktopで使ってみる

Last updated at 2025-06-14Posted at 2025-06-14

はじめに

MCPを理解するために、加算・減算をしてくれるMCPを作ってみる。
説明を見るんじゃなくて、手を動かして作ること大事（自戒）。

今回は、Cloudflare Agentsを利用して、MCPサーバーを作っていく。

Cloudflare Agentsとは

Cloudflare Agentsは、Cloudflareの開発者プラットフォーム上でAIエージェントを構築・デプロイするためのフレームワークである。

環境構築とMCPサーバーの作成

まずは、以下のコマンドを実行し、MCPテンプレートをダウンロード（参考）

npm create cloudflare@latest -- my-mcp-server --template=cloudflare/ai/demos/remote-mcp-authless

次に、以下のコマンドを実行してMCPサーバーを起動する

npm start

MCPサーバーの動作確認

次に、MCPを呼び出すためのクライアントを実行して、ブラウザで開く

npx @modelcontextprotocol/inspector@latest

画面はこんな感じ

Transport TypeをSSEにして、MCPサーバーのアドレス+/sseを入力してConnectボタンを押下

接続できた

すでに「さんすうMCP」が作られていた

コードの確認

コードを確認してみる

index.ts

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

// Define our MCP agent with tools
export class MyMCP extends McpAgent {
	server = new McpServer({
		name: "Authless Calculator",
		version: "1.0.0",
	});

	async init() {
		// Simple addition tool
		this.server.tool(
			"add",
			{ a: z.number(), b: z.number() },
			async ({ a, b }) => ({
				content: [{ type: "text", text: String(a + b) }],
			})
		);

		// Calculator tool with multiple operations
		this.server.tool(
			"calculate",
			{
				operation: z.enum(["add", "subtract", "multiply", "divide"]),
				a: z.number(),
				b: z.number(),
			},
			async ({ operation, a, b }) => {
				let result: number;
				switch (operation) {
					case "add":
						result = a + b;
						break;
					case "subtract":
						result = a - b;
						break;
					case "multiply":
						result = a * b;
						break;
					case "divide":
						if (b === 0)
							return {
								content: [
									{
										type: "text",
										text: "Error: Cannot divide by zero",
									},
								],
							};
						result = a / b;
						break;
				}
				return { content: [{ type: "text", text: String(result) }] };
			}
		);
	}
}

export default {
	fetch(request: Request, env: Env, ctx: ExecutionContext) {
		const url = new URL(request.url);

		if (url.pathname === "/sse" || url.pathname === "/sse/message") {
			return MyMCP.serveSSE("/sse").fetch(request, env, ctx);
		}

		if (url.pathname === "/mcp") {
			return MyMCP.serve("/mcp").fetch(request, env, ctx);
		}

		return new Response("Not found", { status: 404 });
	},
};

this.server.tool〜という部分で、実際の処理部分を記載している感じですね。

この記事とかが参考になりますね
https://zenn.dev/zenn_tkc/articles/7bef6a7a2d4b57

新しいツールの追加

累乗計算を行う、新しいToolを登録してみます。
以下をtoolsに登録。

this.server.tool(
    "exponentiation",
    { base: z.number(), exponent: z.number() },
    async ({ base, exponent }) => {
        let result = 1;
        for(let i=0; i<exponent; i++) result *= base;
        return {
            content: [{ type: "text", text: String(result) }],
        };
    }
)