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 MCP ServerでClaude Desktop からWeb APIを構築
Search
kutakutat
December 12, 2024
Programming
1
1.1k
Cloudflare MCP ServerでClaude Desktop からWeb APIを構築
Cloudflare MCP Server を使って Claude Desktop から Cloudflare Workers で Web APIを構築
kutakutat
December 12, 2024
Tweet
Share
More Decks by kutakutat
See All by kutakutat
AI ファーストなコードエディター Cursor を導入してみた
kutakutat
0
1.3k
Bitcoinから学ぶブロックチェーン入門
kutakutat
0
250
AutoML Tables で コードを書かずに機械学習入門 / Introduction to Machine Learning without Writing Code with AutoML Tables
kutakutat
0
510
Other Decks in Programming
See All in Programming
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
760
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
2
150
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
390
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
170
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
650
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
160
5つのアンチパターンから学ぶLT設計
narihara
1
170
Deep Dive into ~/.claude/projects
hiragram
14
2.5k
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
12
4.4k
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.3k
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
550
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
250
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Designing Experiences People Love
moore
142
24k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Transcript
Cloudflare MCP ServerでClaude Desktop からWeb APIを構築してみた Taku Yoshida (FrontierTech 合同会社)
2 スピーカー紹介 吉田 拓 • テクノロジーで "はじめる" を "ささえる" を掲げる
FrontierTech 社 CEO • 最近ハマってる遊び: ポーカー、o1 pro mode に10~30年 後に発見される概念(妄想)を考えてもらうこと FrontierTech CEO
3 もう少し詳しく https://zenn.dev/kutakutat/scraps/b7747379dc6033
4 モチベーション 📢 Anthropic がなにやら "MCP" っていう概念を発表した 💡 Claude Desktop
を離れずに Cloudflare Workers にスクリプトをデ プロイできるらしい 👉 (実用性はともかく ) まずはやってみたい !!
5 MCP(Model Content Protocol) とは https://modelcontextprotocol.io/introduction MCP は、AI アプリケーション用の USB-C
ポートのようなものです。 USB-C がデバイスをさまざまな周辺機器やアクセサリに接続するための標準化された方法を提供するの と同様に、MCP は AI モデルをさまざまなデータ ソースやツールに接続するための標準化された方法を提 供します。 Model Content Protocol(MCP) は、LLM アプリケーションと外部データ ソースおよびツールとのシー ムレスな統合 を可能にするオープンプロトコル です。 AI 搭載 IDE の構築、チャット インターフェイスの強化、カスタム AI ワークフローの作成など、どのような場 合でも、MCP は LLM を必要なコンテキストに接続するための標準化された方法を提供 します。 https://spec.modelcontextprotocol.io/specification/
6 Claude Desktop、IDE、または MCP を介してリソースにアク セスする AI ツールなどのプログラム MCP Host
MCPを活用した一般的なアーキテクチャーの例 Server との 1:1 接続を維持するプロトコルクライアント MCP Client 標準化されたプロトコルを通じて特定の機能を公開する軽量 プログラム (仕様上はリモートにあってもOK) MCP Server
7 MCP に対応した Host, Client 機能が実装されたデスクトップアプリ。 claude.ai では利用できない。 ※ Claud
Desktop では現在マシン上で実行されているローカル MCP Server への接続のみをサポートしている。 Claude Desktop Claude Desktop: MCP Host, Client の代表格 公式ドキュメントにある MCP 対応した Client の一覧
8 MCP 仕様の概要 MCP Client MCP Server Sampling サーバーからクライアントの LLMを使える機能
Tool モデルが実行できるアクションを提供する機能 Prompt プロンプトテンプレート機能 Resource データやコンテンツを提供する機能 JSON-RPC 形式 ステートフルな接続 どの機能を使うかの交渉 MCP Client が機能に対応していれば MCP Server そのままに Client を 切り替えられる (逆もしかり) Roots サーバーからクライアントの ファイルシステムのルートを使える機能
9 Claude Desktop とサーバ機能 Tool モデルが実行できるアクションを提供する機能 Resource データやコンテンツを提供する機能 Prompt プロンプトテンプレート機能
10 Claude Desktop とサーバ機能 Tool モデルが実行できるアクションを提供する機能 Prompt プロンプトテンプレート機能 Resource データやコンテンツを提供する機能
11 Tool を利用する流れ 結果をLLMが利用 Clientから指示 サーバから提供された Toolsを一覧化 LLMがToolを選ぶ サーバの Toolを使用(コール)する
12 PC やりたかったこと MCP Server Cloudflare MCP Server MCP Host
Claude Desktop MCP Client Cloudflare API スクリプトの作成 Cloudflare Workers の作成 スクリプトのデプロイ
13 Cloudflare 公式の MCP Server を利用する セットアップ手順 1. npx @cloudflare/mcp-server-cloudflare
init を実行 2. /Library/Application Support/Claude/claude_desktop_config.json に設定が追加される 3. Cloud Desktop を再起動
14 mcp-server-cloudflare の中身(とても雑な紹介 ) サーバから提供された Toolsを一覧化 worker_list Toolを使用(コール)する
実行!
16 作成中...
17 …完成
18 たしかにできている !
19 作成されているスクリプトの中身
20 PC やりたかったこと MCP Server Cloudflare MCP Server MCP Host
Claude Desktop MCP Client Cloudflare API スクリプトの作成 Cloudflare Workers の作成 スクリプトのデプロイ
21 本当はやりたかったこと : Hono を使用する もともとはさくっと Hono の API 立てられたら最高
! と思っていた Cloudflare Workers にファイルをアップする時に、コードの中身がそのままリクエストに展開されるように なっている Claude から MCP Client 経由で Toolコールする際にバンドルしたファイルがトークンの上限にひっかかり 実行できなかった ※ Hono は十分に軽量で非常にすきなライブラリです。あくまでトークンの上限に対して 当初想定の流れ 1. ✅ Fetch MCP Server で Hono のクイックスタートを URL を渡してよみこむ 2. ✅ Claude にサンプルコードを作成してもらう 3. ✅ Filesysytem MCP Server でローカル PC の特定のディレクトリにコードを置く 4. ✅ (Claude Desktop を離れ) npx wrangler deploy --dry-run --outdir dist でバンドル (Claude Desktop に戻る) 5. ✅ Filesysytem MCP Server でバンドルした成果物のパスを指定して読み込んでもらう 6. ❌ Cloudflare MCP Server で Cloudflare Workers にコードをあげる
まとめ MCPはLLMをデータやツールに接続するための標準化された仕様 MCP Server を作れば Cloudflare連携、ファイル連携などいろい ろできてLLMがいい感じに制御してくれる オープンな仕様なのでサーバー /クライアント増える可能性 +
仕様にはもっと広範な内容があり今後も期待 ! Sampling すごそう