Cloudflare Workersで進めるリモートMCP活用

元々考えていたよりCloudflare成分薄めになっちゃいました (あとで足すかも)
https://ai-developer-meetup.connpass.com/event/353962/

Transcript

1. Cloudflare Workers で進めるリモートMCP 活用 syumai AI Developer Meetup in Tokyo #1 (2025/5/14)
2. 自己紹介 syumai ECMAScript 仕様輪読会 / Asakusa.go 主催 株式会社ベースマキナで管理画面のSaaS を開発中 Go でGraphQL サーバー (gqlgen) や TypeScript でフロント エンドを書いています Software Design 2023 年12 月号から2025 年2 月号まで Cloudflare Workers の連載をしました Twitter ( 現𝕏): @__syumai Website: https://syum.ai
3. 今日話すこと MCP のTools について ローカルMCP とリモートMCP リモートMCP の重要性 リモートMCP サーバーのアーキテクチャ 実装デモ ( 時間があれば)
4. MCP のTools について
5. MCP のおさらい Model Context Protocol https://modelcontextprotocol.io/ LLM に与えるコンテキストを標準化するオープンプロトコル
6. MCP サーバーが提供できるもの Resources https://modelcontextprotocol.io/docs/concepts/resources Prompts https://modelcontextprotocol.io/docs/concepts/prompts Tools https://modelcontextprotocol.io/docs/concepts/tools 今回扱うのはこれ
7. MCP のTools でできること 生成AI エージェントの能力の拡張 正確な計算 ( 本来、学習データからの推論のみでは不可能) 特定のツール、Web サービスの使用 ( 本来、正確な使い方を知らないと不可能)
8. MCP のTools のざっくり理解 MCP のTools は、生成AI エージェント向けに以下を提供する ツール呼び出しのインタフェース 利用可能なツールの種類、呼び出し方法についての知識 道具と、その説明書をセットで渡すようなイメージ
9. MCP のTools のざっくり理解 nwtgck さん (Ota さん) のツイートがわかりやすい https://x.com/nwtgck_ja/status/1912095321053941857
10. ローカルMCP とリモートMCP
11. ローカルMCP とリモートMCP 仕様上に定義されているわけではない、俗称 MCP サーバー・クライアントの構成方法を区別するために使われる呼び方
12. ローカルMCP とリモートMCP の違い MCP サーバーがどこにあるかの違い ローカルMCP の場合、MCP サーバーがホスト・クライアントと同じマシン上にある 標準入出力 (stdio) のトランスポートが主に使われる リモートMCP の場合、MCP サーバーがホスト・クライアントと別のマシン上にある Streamable HTTP (2025-03-26 ~ ) または SSE のトランスポートが使われる ※: Streamable HTTP から SSE へのアップグレードも可能 ※ これは発表者の理解であり、厳密な定義ではない点にご留意ください
13. MCP の基本アーキテクチャ ホスト・クライアント・サーバーの3 つの構成要素からなる ホスト: Claude Desktop, VS Code など クライアント: Claude Desktop, VS Code などに内包 サーバー: Playwright MCP, BlenderMCP, PayPal MCP など クライアント対サーバーは必ず1 対1 で対応し、通信を行う ホストは複数のクライアントを管理する
14. MCP の基本アーキテクチャ 図は Model Context Protocol 仕様より引用 https://modelcontextprotocol.io/specification/2025-03-26/architecture/index#core- components
15. ローカルMCP の例 BlenderMCP ローカルのマシン上のBlender を操作して、生成AI によって3D モデルを作る https://github.com/ahujasid/blender-mcp Blender MCP Demo: AI Prompting a dragon in a dungeon https://www.youtube.com/watch?v=DqgKuLYUv00
16. ローカルMCP の例 Playwright MCP Playwright を使ってローカルのマシン上のブラウザを操作する https://github.com/microsoft/playwright-mcp
17. リモートMCP の例 Cloudflare のMCP Demo Day (2025/5/1) で複数社によるデモがありました https://demo-day.mcp.cloudflare.com/
18. リモートMCP の例 PayPal MCP Server 請求書の一覧取得や、発行ができる https://developer.paypal.com/tools/mcp-server/ Atlassian Remote MCP Server Jira やConfluence の内容を取得や、アイテム / ページの作成ができる https://www.atlassian.com/blog/announcements/remote-mcp-server
19. ローカルMCP とリモートMCP への接続設定例 ローカルMCP サーバーは、標準入出力でやり取りをするため、MCP クライアントとや り取りをするプロセスを起動するためのコマンドを登録する リモートMCP サーバーは、HTTP で繋ぎに行くだけなので、接続先のURL を登録する VS Code での設定例 "servers": { "local-server": { // "type": "stdio", // VS Code では必要 "command": "npx", "args": ["-y", "@syumai/example-mcp-server"] }, "remote-server": { // "type": "sse", // VS Code では必要 "url": "http://mcp.syum.ai/sse", "headers": { "VERSION": "1.0" } } }
20. リモートMCP の重要性
21. なぜリモートMCP が重要なのか？ リモートMCP サーバーは接続元の環境に制限がほとんどない HTTP で接続できさえすればいい ホスト・クライアントがローカルにあってもいいし、ホスト・クライアントが丸 ごとリモートにあってもいい Claude 、ChatGPT 、Gemini などのWeb 上のUI からアクセスする生成AI エージ ェントの裏側にあってもいい → Web ブラウザや、スマートフォンアプリからもMCP のTools にアクセスするこ とが可能
22. なぜリモートMCP が重要なのか？ ローカルMCP サーバーは、PC が主な接続元環境 開発者向けのMCP サーバーはローカルのソフトウェアと連携するシーンがあるの で、今後も使われるはず ただし、一般向けの用途はリモートMCP がほとんどになると考えられる
23. リモートMCP を取り巻く動向 2025/5/2 のリリースで、Claude にリモートMCP 連携の機能が追加 Web 版のClaude でもMCP サーバーに接続が可能に ( プランは限定的) この時の謳い文句が、 「Claude があなたの世界と接続できるようになりました」 ( 筆者 訳) というもの https://www.anthropic.com/news/integrations
24. 生成AI とWeb サービスの連携の可能性 Gemini の例 (MCP の話ではないです) 画像などの曖昧な入力を元にした、Google カレンダーへの予定登録 生成AI の得意な分野を活かしたWeb サービス利用が可能になっていく https://x.com/__syumai/status/1922143446560547241
25. リモートMCP サーバーのアーキテクチャ
26. リモートMCP サーバーのアーキテクチャ 次の例について考える 提供サービス: EC サイト 実現したいこと: 生成AI エージェントからの商品購入を可能にする 構成例 A: API サーバーにMCP を実装し、1 台で両方に対応する B: API サーバー自体には手を加えず、前段にリモートMCP サーバーを立て、後段のAPI サーバーを叩くようにする → 基本的には、B の方が望ましいと考えられる
27. リモートMCP サーバーをWeb サービス本体から分けるべき理由 スケーラビリティの観点の違い まだStreamable HTTP への移行が完了していないので、SSE のコネクションをク ライアント単位で維持する必要があるかもしれない Web サービス本体にあてたいリソースと食い合う可能性がある MCP レイヤーのスケールをしたいだけなのに、API サーバー全体が水平スケール することの不都合がありうる DB へのコネクション数が無駄に増えてしまう、など
28. リモートMCP サーバーをWeb サービス本体から分けるべき理由 プロトコルが完全には安定していない MCP は新しいプロトコルで、2025-03-26 の最新仕様もリリースされたばかりであ り、今後も大きな変更がありうる 公式のSDK は、TypeScript, Python, Java, Kotlin, C# のみ それ以外の言語での最新仕様への追従は、コミュニティの熱量に依存する → Web サービス本体と別の言語でリモートMCP サーバーを実装する選択 肢を考慮すべき
29. リモートMCP サーバーをWeb サービス本体から分けるべき理由 Web サービス本体との実装の重複 提供する機能がWeb サービス本体のAPI サーバーと重複したときに、同じ実装が必 要になるかもしれない → API を叩くだけの構成にすれば、この懸念はない 以上を総合して、リモートMCP サーバーはWeb サービス本体へのプロキシ ( 兼プロトコル 変換レイヤー) として扱うのが適切 → Web サービス本体へのプロキシとしての用途に強く、リモートMCP サーバーのホストに も使える基盤としてCloudflare が有力
30. Cloudflare スタック上のリモートMCP サーバー構成例 リモートMCP サーバーだけをCloudflare 内に置き、後段にAPI サーバーを設置 Build and deploy Remote Model Context Protocol (MCP) servers to Cloudflare https://blog.cloudflare.com/remote-model-context-protocol-servers-mcp/ ※ 引用した図中のClient の例は恐らく誤り: Claude のWeb 版などがここに相当
31. Cloudflare スタック上でリモートMCP サーバーを構築するメリット スケーラビリティ Cloudflare Workers は、世界中のエッジサーバー上で動作し、簡単にスケールする リモートMCP サーバーの需要が高まっても、Web サービス本体とは独立して水平 スケール可能 コスト ( 未検証) リモートMCP サーバーを実行するためのインスタンスを常時起動する必要がな く、リクエスト数に応じてWorker が起動するため、維持コストが低くなるはず
32. Cloudflare スタック上でリモートMCP サーバーを構築するメリット 充実したSDK Cloudflare の基盤を使ったリモートMCP サーバー実装を簡単に行うための充実し たSDK が提供されている https://github.com/cloudflare/agents リモートMCP サーバーで多くの場合必須となる、認証認可関連のライブラリも提 供されている https://github.com/cloudflare/workers-oauth-provider ただし、ここまでで紹介したメリットは Vercel Functions 上のリモートMCP サーバーにも 当てはまるものが多そうなので、比較が必要 ( まだできていないです)
33. 実装デモ
34. デモの手順 デモ用のリポジトリ https://github.com/syumai/mcp/tree/main/aidevmeetup-demo 以下のCloudflare のガイドをベースに作業します https://developers.cloudflare.com/agents/guides/remote-mcp-server/
35. デモの手順 calculator のリモートMCP サーバーをテンプレートから作成 pnpm create cloudflare@latest calculator -- template=cloudflare/ai/demos/remote-mcp-authless ローカルでMCP サーバーを起動し、インスペクタから呼び出す npx @modelcontextprotocol/inspector@latest calculator に、数値のべき乗を計算する機能を追加する Cloudflare にデプロイする Cloudflare のAI Playground で動作確認する https://playground.ai.cloudflare.com/
37. まとめ 一般向けの用途としては、ローカルMCP よりもリモートMCP が本命 リモートMCP サーバーはWeb サービス本体のAPI サーバーとは分離するのが望ましい リモートMCP サーバーはプロキシ兼プロトコル変換レイヤーとして扱う 構築には、Cloudflare を使うのが手軽でおすすめ
38. ご清聴ありがとうございました！
39. おまけ
40. おすすめ記事 azukiazusa さんの Cloudflare / Vercel にリモートMCP サーバーをデプロイしてみた記 事 https://azukiazusa.dev/blog/cloudflare-mcp-server/ https://azukiazusa.dev/blog/vercel-mcp-server/
41. Tips ローカルMCP サーバーにしか繋げないクライアントからリモートMCP サーバーに繋ぐ 方法 Cloudflare の方が作っている mcp-remote を使うのが一般的 https://www.npmjs.com/package/mcp-remote npx mcp-remote でリモートMCP サーバーへのプロキシをローカルに立てて くれる