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



## はじめに

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

今回は、[Cloudflare Agents](https://agents.cloudflare.com/)を利用して、MCPサーバーを作っていく。

## Cloudflare Agentsとは

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

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

まずは、以下のコマンドを実行し、MCPテンプレートをダウンロード（[参考](https://developers.cloudflare.com/agents/guides/remote-mcp-server/)）

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

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

```bash
npm start
```

## MCPサーバーの動作確認

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

```bash
npx @modelcontextprotocol/inspector@latest
```

画面はこんな感じ

![MCP Inspector初期画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654759/b7c61109-bf63-43e1-9a84-a5c66b7f7cc5.png)

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

![接続設定画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654759/5873cae0-f3ef-4580-96b6-92d0d7e775a0.png)

接続できた

![接続成功画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654759/0f29c7eb-b13d-4815-b20f-252348df127b.png)

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

![デフォルトツール一覧](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654759/8470ba5b-f8f6-46af-8a4d-812479678f73.png)

## コードの確認

コードを確認してみる

```typescript: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に登録。

```typescript
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) }],
        };
    }
)
```

登録できました。

![累乗計算ツール追加後](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654759/c5f78a76-7726-4f1d-b05c-9a5087038592.png)

## デプロイとClaude Desktopでの利用

これをデプロイして、MCPサーバーとして使えるようにします。
以下のコマンドでデプロイする。

```bash
npx wrangler@latest deploy
```

デプロイが完了した後、Claude DesktopでデプロイしたMCPサーバーを使えるようにします。
（ここで苦戦した...）

### Claude Desktopの設定

まず、Claude Desktopの「インテグレーションを追加」を押下します。

![Claude Desktop インテグレーション画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654759/50425bff-cae7-4035-b00d-21b0aeef97ee.png)

次に、「インテグレーションを追加」を押下します。

![インテグレーション追加ボタン](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654759/226a1fea-6d07-4ad4-8bc1-65b723f8c909.png)

先ほどデプロイしたMCPサーバーのURLに`/sse`を追加したものを入れます。

![URL入力画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654759/8933821c-fdc3-4601-a831-b1408c1df910.png)

登録できました。

![登録完了画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654759/af875ffe-bb80-4109-86b8-369ff730e52d.png)

作ったツールも表示されてますね。

![ツール一覧表示](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654759/0c185840-0d32-427b-b204-3e144a3b48ca.png)

## 実際に使ってみる

ちゃんと使えました！

![累乗計算実行結果](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/654759/0b553d0d-c004-4b38-a5fd-d576e376db1c.png)

## まとめ

Cloudflare Agentsを使うことで、簡単にMCPサーバーを作成・デプロイして、Claude Desktopから利用できることが確認できました。`this.server.tool`でツールを定義するだけで、新しい機能を追加できるのも便利ですね。

どんどん作っていきましょう！

## 参考リンク

- [Cloudflare Agents](https://agents.cloudflare.com/)
- [Remote MCP Server Guide](https://developers.cloudflare.com/agents/guides/remote-mcp-server/)
- [MCPの基本的な仕組みについて](https://zenn.dev/zenn_tkc/articles/7bef6a7a2d4b57)