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.4k
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製CLIツールをnpmで配布するには
syumai
2
1k
MCPで実現できる、Webサービス利用体験について
syumai
7
2.3k
GoのGenericsによるslice操作との付き合い方
syumai
3
790
GoのWebAssembly活用パターン紹介
syumai
3
11k
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
2
580
StarlingMonkeyを触ってみた話 - 2024冬
syumai
3
440
初めてDefinitelyTypedにPRを出した話
syumai
1
730
利用者視点で考える、イテレータとの上手な付き合い方
syumai
7
900
ECMAScript仕様を読むのに必要な知識 - ダイジェスト版
syumai
9
4.1k
Other Decks in Programming
See All in Programming
What's new in Adaptive Android development
fornewid
0
130
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
250
バイブコーディングの正体——AIエージェントはソフトウェア開発を変えるか?
stakaya
5
620
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
910
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
130
Comparing decimals in Swift Testing
417_72ki
0
160
대규모 트래픽을 처리하는 프론트 개발자의 전략
maryang
0
110
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
180
Strands Agents で実現する名刺解析アーキテクチャ
omiya0555
1
110
知って得する@cloudflare_vite-pluginのあれこれ
chimame
1
130
AIのメモリー
watany
12
1.2k
QA x AIエコシステム段階構築作戦
osu
0
230
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
40
1.9k
Facilitating Awesome Meetings
lara
54
6.5k
Six Lessons from altMBA
skipperchong
28
3.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Agile that works and the tools we love
rasmusluckow
329
21k
Unsuck your backbone
ammeep
671
58k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
410
How GitHub (no longer) Works
holman
314
140k
Optimizing for Happiness
mojombo
379
70k
Balancing Empowerment & Direction
lara
1
520
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
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 サーバーへのプロキシをローカルに立てて くれる