Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Cloudflare Workersで進めるリモートMCP活用
Search
syumai
May 14, 2025
Programming
13
2.2k
Cloudflare Workersで進めるリモートMCP活用
元々考えていたよりCloudflare成分薄めになっちゃいました (あとで足すかも)
https://ai-developer-meetup.connpass.com/event/353962/
syumai
May 14, 2025
Tweet
Share
More Decks by syumai
See All by syumai
GoのGenericsによるslice操作との付き合い方
syumai
2
620
GoのWebAssembly活用パターン紹介
syumai
3
10k
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
2
490
StarlingMonkeyを触ってみた話 - 2024冬
syumai
3
430
初めてDefinitelyTypedにPRを出した話
syumai
1
690
利用者視点で考える、イテレータとの上手な付き合い方
syumai
7
860
ECMAScript仕様を読むのに必要な知識 - ダイジェスト版
syumai
8
4k
コード生成を活用したgqlgen+dataloaderの実装パターン解説
syumai
7
1k
Goのmultiple errorsについて (2024年4月版)
syumai
5
11k
Other Decks in Programming
See All in Programming
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
750
Passkeys for Java Developers
ynojima
3
860
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
1
740
Go Modules: From Basics to Beyond / Go Modulesの基本とその先へ
kuro_kurorrr
0
120
TypeScript LSP の今までとこれから
quramy
1
500
AIネイティブなプロダクトをGolangで挑む取り組み
nmatsumoto4
0
110
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
seike460
PRO
1
290
Enterprise Web App. Development (2): Version Control Tool Training Ver. 5.1
knakagawa
1
110
KotlinConf 2025 現地で感じたServer-Side Kotlin
n_takehata
1
220
関数型まつり2025登壇資料「関数プログラミングと再帰」
taisontsukada
2
820
GraphRAGの仕組みまるわかり
tosuri13
7
370
関数型まつりレポート for JuliaTokai #22
antimon2
0
110
Featured
See All Featured
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
The Cult of Friendly URLs
andyhume
79
6.4k
Code Reviewing Like a Champion
maltzj
524
40k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Producing Creativity
orderedlist
PRO
346
40k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
910
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
4
170
What's in a price? How to price your products and services
michaelherold
245
12k
Transcript
Cloudflare Workers で進めるリモートMCP 活用 syumai AI Developer Meetup in Tokyo
#1 (2025/5/14)
自己紹介 syumai ECMAScript 仕様輪読会 / Asakusa.go 主催 株式会社ベースマキナで管理画面のSaaS を開発中 Go
でGraphQL サーバー (gqlgen) や TypeScript でフロント エンドを書いています Software Design 2023 年12 月号から2025 年2 月号まで Cloudflare Workers の連載をしました Twitter ( 現𝕏): @__syumai Website: https://syum.ai
今日話すこと MCP のTools について ローカルMCP とリモートMCP リモートMCP の重要性 リモートMCP サーバーのアーキテクチャ
実装デモ ( 時間があれば)
MCP のTools について
MCP のおさらい Model Context Protocol https://modelcontextprotocol.io/ LLM に与えるコンテキストを標準化するオープンプロトコル
MCP サーバーが提供できるもの Resources https://modelcontextprotocol.io/docs/concepts/resources Prompts https://modelcontextprotocol.io/docs/concepts/prompts Tools https://modelcontextprotocol.io/docs/concepts/tools 今回扱うのはこれ
MCP のTools でできること 生成AI エージェントの能力の拡張 正確な計算 ( 本来、学習データからの推論のみでは不可能) 特定のツール、Web サービスの使用
( 本来、正確な使い方を知らないと不可能)
MCP のTools のざっくり理解 MCP のTools は、生成AI エージェント向けに以下を提供する ツール呼び出しのインタフェース 利用可能なツールの種類、呼び出し方法についての知識 道具と、その説明書をセットで渡すようなイメージ
MCP のTools のざっくり理解 nwtgck さん (Ota さん) のツイートがわかりやすい https://x.com/nwtgck_ja/status/1912095321053941857
ローカルMCP とリモートMCP
ローカルMCP とリモートMCP 仕様上に定義されているわけではない、俗称 MCP サーバー・クライアントの構成方法を区別するために使われる呼び方
ローカルMCP とリモートMCP の違い MCP サーバーがどこにあるかの違い ローカルMCP の場合、MCP サーバーがホスト・クライアントと同じマシン上にある 標準入出力 (stdio)
のトランスポートが主に使われる リモートMCP の場合、MCP サーバーがホスト・クライアントと別のマシン上にある Streamable HTTP (2025-03-26 ~ ) または SSE のトランスポートが使われる ※: Streamable HTTP から SSE へのアップグレードも可能 ※ これは発表者の理解であり、厳密な定義ではない点にご留意ください
MCP の基本アーキテクチャ ホスト・クライアント・サーバーの3 つの構成要素からなる ホスト: Claude Desktop, VS Code など
クライアント: Claude Desktop, VS Code などに内包 サーバー: Playwright MCP, BlenderMCP, PayPal MCP など クライアント対サーバーは必ず1 対1 で対応し、通信を行う ホストは複数のクライアントを管理する
MCP の基本アーキテクチャ 図は Model Context Protocol 仕様より引用 https://modelcontextprotocol.io/specification/2025-03-26/architecture/index#core- components
ローカル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
ローカルMCP の例 Playwright MCP Playwright を使ってローカルのマシン上のブラウザを操作する https://github.com/microsoft/playwright-mcp
リモートMCP の例 Cloudflare のMCP Demo Day (2025/5/1) で複数社によるデモがありました https://demo-day.mcp.cloudflare.com/
リモート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
ローカル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" } } }
リモートMCP の重要性
なぜリモートMCP が重要なのか? リモートMCP サーバーは接続元の環境に制限がほとんどない HTTP で接続できさえすればいい ホスト・クライアントがローカルにあってもいいし、ホスト・クライアントが丸 ごとリモートにあってもいい Claude 、ChatGPT
、Gemini などのWeb 上のUI からアクセスする生成AI エージ ェントの裏側にあってもいい → Web ブラウザや、スマートフォンアプリからもMCP のTools にアクセスするこ とが可能
なぜリモートMCP が重要なのか? ローカルMCP サーバーは、PC が主な接続元環境 開発者向けのMCP サーバーはローカルのソフトウェアと連携するシーンがあるの で、今後も使われるはず ただし、一般向けの用途はリモートMCP がほとんどになると考えられる
リモートMCP を取り巻く動向 2025/5/2 のリリースで、Claude にリモートMCP 連携の機能が追加 Web 版のClaude でもMCP サーバーに接続が可能に
( プランは限定的) この時の謳い文句が、 「Claude があなたの世界と接続できるようになりました」 ( 筆者 訳) というもの https://www.anthropic.com/news/integrations
生成AI とWeb サービスの連携の可能性 Gemini の例 (MCP の話ではないです) 画像などの曖昧な入力を元にした、Google カレンダーへの予定登録 生成AI
の得意な分野を活かしたWeb サービス利用が可能になっていく https://x.com/__syumai/status/1922143446560547241
リモートMCP サーバーのアーキテクチャ
リモートMCP サーバーのアーキテクチャ 次の例について考える 提供サービス: EC サイト 実現したいこと: 生成AI エージェントからの商品購入を可能にする 構成例
A: API サーバーにMCP を実装し、1 台で両方に対応する B: API サーバー自体には手を加えず、前段にリモートMCP サーバーを立て、後段のAPI サーバーを叩くようにする → 基本的には、B の方が望ましいと考えられる
リモートMCP サーバーをWeb サービス本体から分けるべき理由 スケーラビリティの観点の違い まだStreamable HTTP への移行が完了していないので、SSE のコネクションをク ライアント単位で維持する必要があるかもしれない Web
サービス本体にあてたいリソースと食い合う可能性がある MCP レイヤーのスケールをしたいだけなのに、API サーバー全体が水平スケール することの不都合がありうる DB へのコネクション数が無駄に増えてしまう、など
リモートMCP サーバーをWeb サービス本体から分けるべき理由 プロトコルが完全には安定していない MCP は新しいプロトコルで、2025-03-26 の最新仕様もリリースされたばかりであ り、今後も大きな変更がありうる 公式のSDK は、TypeScript,
Python, Java, Kotlin, C# のみ それ以外の言語での最新仕様への追従は、コミュニティの熱量に依存する → Web サービス本体と別の言語でリモートMCP サーバーを実装する選択 肢を考慮すべき
リモートMCP サーバーをWeb サービス本体から分けるべき理由 Web サービス本体との実装の重複 提供する機能がWeb サービス本体のAPI サーバーと重複したときに、同じ実装が必 要になるかもしれない →
API を叩くだけの構成にすれば、この懸念はない 以上を総合して、リモートMCP サーバーはWeb サービス本体へのプロキシ ( 兼プロトコル 変換レイヤー) として扱うのが適切 → Web サービス本体へのプロキシとしての用途に強く、リモートMCP サーバーのホストに も使える基盤としてCloudflare が有力
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 版などがここに相当
Cloudflare スタック上でリモートMCP サーバーを構築するメリット スケーラビリティ Cloudflare Workers は、世界中のエッジサーバー上で動作し、簡単にスケールする リモートMCP サーバーの需要が高まっても、Web サービス本体とは独立して水平
スケール可能 コスト ( 未検証) リモートMCP サーバーを実行するためのインスタンスを常時起動する必要がな く、リクエスト数に応じてWorker が起動するため、維持コストが低くなるはず
Cloudflare スタック上でリモートMCP サーバーを構築するメリット 充実したSDK Cloudflare の基盤を使ったリモートMCP サーバー実装を簡単に行うための充実し たSDK が提供されている https://github.com/cloudflare/agents
リモートMCP サーバーで多くの場合必須となる、認証認可関連のライブラリも提 供されている https://github.com/cloudflare/workers-oauth-provider ただし、ここまでで紹介したメリットは Vercel Functions 上のリモートMCP サーバーにも 当てはまるものが多そうなので、比較が必要 ( まだできていないです)
実装デモ
デモの手順 デモ用のリポジトリ https://github.com/syumai/mcp/tree/main/aidevmeetup-demo 以下のCloudflare のガイドをベースに作業します https://developers.cloudflare.com/agents/guides/remote-mcp-server/
デモの手順 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/
None
まとめ 一般向けの用途としては、ローカルMCP よりもリモートMCP が本命 リモートMCP サーバーはWeb サービス本体のAPI サーバーとは分離するのが望ましい リモートMCP サーバーはプロキシ兼プロトコル変換レイヤーとして扱う
構築には、Cloudflare を使うのが手軽でおすすめ
ご清聴ありがとうございました!
おまけ
おすすめ記事 azukiazusa さんの Cloudflare / Vercel にリモートMCP サーバーをデプロイしてみた記 事 https://azukiazusa.dev/blog/cloudflare-mcp-server/
https://azukiazusa.dev/blog/vercel-mcp-server/
Tips ローカルMCP サーバーにしか繋げないクライアントからリモートMCP サーバーに繋ぐ 方法 Cloudflare の方が作っている mcp-remote を使うのが一般的 https://www.npmjs.com/package/mcp-remote
npx mcp-remote でリモートMCP サーバーへのプロキシをローカルに立てて くれる