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 AgentsとAI SDKでAIエージェントを作ってみた
Search
Sato Naoya
September 26, 2025
Programming
890
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Cloudflare AgentsとAI SDKでAIエージェントを作ってみた
DevelopersIO 2025 Sapporoでの登壇です
Sato Naoya
September 26, 2025
More Decks by Sato Naoya
See All by Sato Naoya
Cloudflare Workersのユースケースと開発方法
briete
0
3.8k
【Developers.IO 2020 CONNECT】AWS CDK + Step Functions 入門
briete
0
3.2k
re:Invent 2019 サーバーレス関連アップデート
briete
0
1.1k
Other Decks in Programming
See All in Programming
Skillsは効率化、Agentsは"自分の拡張"——Builder時代のエージェント編成(CC Night 2026)
wemra
1
130
jQueryをバージョンアップする前に使いたいjQuery Migrate
matsuo_atsushi
0
500
Agentic UI
manfredsteyer
PRO
0
160
Dataformのリポジトリを立ち上げるときにまずやること / dataform-day0-2026
snhryt
0
160
Mujeres en SEO Summit 2026 - Greatest Disaster Hits en Web Performance
guaca
0
180
Strategic Design in the Frontend: Moduliths & Micro Frontends @DDDEurope
manfredsteyer
PRO
0
100
気づいたらRubyで100作品 ー クリエイティブコーディングが生活の一部になるまで / 100 Ruby Sketches Later: How Creative Coding Became Part of My Life
chobishiba
3
580
気圧・高度・GPSを記録&可視化するアプリ「Koudo」を作った話
hjmkth
1
260
ふつうのFeature Flag実践入門
irof
7
4k
Oxlintのカスタムルールの現況
syumai
6
1.1k
「AIで開発し、AIを届ける」をEvalでつなぐ 〜AIネイティブに始めるプロダクト開発の実践〜 / Connecting "Develop with AI, deliver AI" with Eval
rkaga
4
5.1k
スマートグラスで並列バイブコーディング
hyshu
0
140
Featured
See All Featured
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
davidcarrasco
3
160
Marketing Yourself as an Engineer | Alaka | Gurzu
gurzu
0
240
The Spectacular Lies of Maps
axbom
PRO
1
810
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
helenjbeal
1
240
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4.3k
Into the Great Unknown - MozCon
thekraken
41
2.6k
What Being in a Rock Band Can Teach Us About Real World SEO
427marketing
0
250
Facilitating Awesome Meetings
lara
57
7k
Abbi's Birthday
coloredviolet
2
8.1k
Large-scale JavaScript Application Architecture
addyosmani
515
110k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
250
1.3M
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
17k
Transcript
Cloudflare Agentsと AI SDKでAIエージェン トを作ってみた クラウド事業本部サービス開発室 佐藤直哉
⾃⼰紹介 2 • 佐藤 直哉(Sato Naoya) • 所属 ◦ クラウド事業本部サービス開発室
• 業務 ◦ サーバーサイドKotlin、Next.jsを利⽤したアプリケーション開発を担当 • 表彰 ◦ 2024 Japan AWS All Certifications Engineers ◦ 2025 Japan AWS All Certifications Engineers
はじめに 3 • 最近Cloudflareからリリースされた、Cloudflareのインフラ上でAIエージェ ントが動く、Cloudflare Agentsが⾯⽩そう • 実際に動作するエージェントを作って試してみたので、実装のTIPSなどを共 有できたらと思います
今⽇話すこと 4 • Vercel AI SDKとCloudflare Agentsを使って、メールをトリガーに起動するAI エージェントを作ってみた話
AIエージェント 5 • 与えられたToolとLLMを利⽤して、⾃律的にタスクを実⾏するシステム • Claude CodeやCursorのようなコーディングエージェントが代表的 • 例えば、コーディングエージェントは、Search(検索), Bash(シェル),
Read(ファイル読み込み), Edit(ファイル編集)などのToolを利⽤し、⾃ 律的にプログラミングを⾏ってくれるAIエージェントの⼀種
Cloudflare Agents (Agents SDK) 6 • Cloudflare上でエージェントの開発に必要な基盤機能を提供してくれる JavaScriptライブラリ • エージェント内の状態管理や独⽴した実⾏環境が提供され、Cloudflareのイ
ンフラ上でエージェントを実⾏することができる • 現在は、主に3つのエージェントを実装可能 ◦ チャットエージェント ◦ メールエージェント ◦ スケジュールエージェント
Vercel AI SDK 7 • Next.jsの開発元のVercelが開発している、様々なLLMのプロバイダーを統⼀ 的に扱うためのJavaScriptライブラリ ◦ OpenAI ◦
Anthropic ◦ Google Gemini ◦ Amazon Bedrock ◦ etc... • 各LLMプロバイダーのAPIを抽象化することで、LLMをプログラム上から簡単 に使うことができる
実際にメールをトリガーにしたAIエー ジェントを作ってみた
作成するAIエージェントの概要 9 領収書を添付したメールを送信すると、領収書を解析して⾃動的に経費登録して くれるAIエージェント • Cloudflare上にあらかじめメールアドレスを作成 • これに領収書を添付したメールを送信することで、エージェントが起動 • メールに添付された領収書をAmazon
Bedrockに送信し、テキスト情報を抽 出 • 抽出したテキストをクラウド経費システムのAPIを通して経費として登録 • 結果をSlackに通知
システム構成 10
エージェントの実装
12 • email関数を定義することで、 メールを受信したら起動する Workerを作成 • Agents SDKのrouteAgentEmail 関数を利⽤し、引数に起動する エージェントのクラス名を設定
することで、エージェントを起 動 Cloudflare Workersのエントリーポイント
13 • Agents SDKのAgentクラスを継 承したクラスを作成 • onEmailメソッドを作成するこ とで、引数にメールのrawデータ が渡される •
この関数の中で具体的なエー ジェントの処理を記述していく エージェントクラスの作成
14 • AI SDKのgenerateText関数を利 ⽤して、Bedrock経由で領収書 のテキストを抽出 • プロンプトには領収書の内容を 抽出するための具体的なテキス トと添付された領収書のバイナ
リデータを設定 • textには領収書の内容が抽出さ れたテキストが返される 領収書のテキストを抽出する
15 • AI SDKのgenerateObject関数を 利⽤して、抽出した領収書のテ キストをJSON形式に変換 • schemaには変換するJSONのス キーマを設定 •
プロンプトには先ほど抽出した 領収書のテキストを設定するこ とで、objectにスキーマに沿っ た形でJSONが返される 抽出した領収書のテキストをJSON形式に変換
16 • AI SDKのtool関数を利⽤し、 ツールを定義する • description: LLMがこのToolを 利⽤する際に参考にするための 説明
• inputSchema: このToolを利⽤ する際に必要なパラメーターを zodで定義 • execute: LLMがこのToolを利⽤ した際に実⾏される関数。引数 にはinputSchemaで定義したパ ラメーターが渡される 経費登録Toolの実装
17 • AI SDKのgenerateText関数の toolsに先ほど作成したtoolを渡 す • promptには、toolを実⾏させる ための具体的なテキストを設定 し、先程抽出した領収書のJSON
を設定 • 設定したtoolを必ず利⽤したい 場合には、toolChoiceに、 requiredを設定する Toolを利⽤して経費を登録
実際にエージェントを動かしてみた
19 実際に過去、経費登録したタクシーの 領収書を使って実験してみました 利⽤した領収書
20 • Cloudflare上で作成したメール アドレスに対して、領収書を添 付して送信 • Workerのログを⾒てみると、か なり正確に領収書の内容が抽出 されてJSON形式に変換されてい るがわかります。
メールに領収書を添付して送信
領収書の内容が経費として登録されている 21 • このJSONデータがTool経由でAPI連携 • 利⽤しているクラウド経費システムの⼀覧画⾯に登録されていることを確認
まとめ 22 • Agents SDKがCloudflare上でエージェントを実⾏するための基盤機能を提供 してくれるため、開発者はインフラについてはほとんど意識する必要がな く、エージェントの実装に集中することができる • 今回はお試しで経費登録⾃動化エージェントを作成してみましたが、アイデ アによってはいろいろできそうで夢が広がります。
参考資料 23 • Cloudflare Agents • Cloudflare Agents Documentation •
Vercel AI SDK Core
None