Cloudflare AgentsとAI SDKでAIエージェントを作ってみた

by Sato Naoya

Slide 1

Slide 1 text

Cloudﬂare Agentsと AI SDKでAIエージェントを作ってみたクラウド事業本部サービス開発室佐藤直哉

Slide 2

Slide 2 text

⾃⼰紹介 2 ● 佐藤直哉（Sato Naoya） ● 所属 ○ クラウド事業本部サービス開発室 ● 業務 ○ サーバーサイドKotlin、Next.jsを利⽤したアプリケーション開発を担当 ● 表彰 ○ 2024 Japan AWS All Certiﬁcations Engineers ○ 2025 Japan AWS All Certiﬁcations Engineers

Slide 3

Slide 3 text

はじめに 3 ● 最近Cloudflareからリリースされた、Cloudflareのインフラ上でAIエージェントが動く、Cloudflare Agentsが⾯⽩そう ● 実際に動作するエージェントを作って試してみたので、実装のTIPSなどを共有できたらと思います

Slide 4

Slide 4 text

今⽇話すこと 4 ● Vercel AI SDKとCloudﬂare Agentsを使って、メールをトリガーに起動するAI エージェントを作ってみた話

Slide 5

Slide 5 text

AIエージェント 5 ● 与えられたToolとLLMを利⽤して、⾃律的にタスクを実⾏するシステム ● Claude CodeやCursorのようなコーディングエージェントが代表的 ● 例えば、コーディングエージェントは、Search（検索）, Bash（シェル）, Read（ファイル読み込み）, Edit（ファイル編集）などのToolを利⽤し、⾃律的にプログラミングを⾏ってくれるAIエージェントの⼀種

Slide 6

Slide 6 text

Cloudflare Agents （Agents SDK） 6 ● Cloudflare上でエージェントの開発に必要な基盤機能を提供してくれる JavaScriptライブラリ ● エージェント内の状態管理や独⽴した実⾏環境が提供され、Cloudflareのインフラ上でエージェントを実⾏することができる ● 現在は、主に3つのエージェントを実装可能 ○ チャットエージェント ○ メールエージェント ○ スケジュールエージェント

Slide 7

Slide 7 text

Vercel AI SDK 7 ● Next.jsの開発元のVercelが開発している、様々なLLMのプロバイダーを統⼀的に扱うためのJavaScriptライブラリ ○ OpenAI ○ Anthropic ○ Google Gemini ○ Amazon Bedrock ○ etc... ● 各LLMプロバイダーのAPIを抽象化することで、LLMをプログラム上から簡単に使うことができる

Slide 8

Slide 8 text

実際にメールをトリガーにしたAIエージェントを作ってみた

Slide 9

Slide 9 text

作成するAIエージェントの概要 9 領収書を添付したメールを送信すると、領収書を解析して⾃動的に経費登録してくれるAIエージェント ● Cloudﬂare上にあらかじめメールアドレスを作成 ● これに領収書を添付したメールを送信することで、エージェントが起動 ● メールに添付された領収書をAmazon Bedrockに送信し、テキスト情報を抽出 ● 抽出したテキストをクラウド経費システムのAPIを通して経費として登録 ● 結果をSlackに通知

Slide 10

Slide 10 text

システム構成 10

Slide 11

Slide 11 text

エージェントの実装

Slide 12

Slide 12 text

12 ● email関数を定義することで、メールを受信したら起動する Workerを作成 ● Agents SDKのrouteAgentEmail 関数を利⽤し、引数に起動するエージェントのクラス名を設定することで、エージェントを起動 Cloudﬂare Workersのエントリーポイント

Slide 13

Slide 13 text

13 ● Agents SDKのAgentクラスを継承したクラスを作成 ● onEmailメソッドを作成することで、引数にメールのrawデータが渡される ● この関数の中で具体的なエージェントの処理を記述していくエージェントクラスの作成

Slide 14

Slide 14 text

14 ● AI SDKのgenerateText関数を利⽤して、Bedrock経由で領収書のテキストを抽出 ● プロンプトには領収書の内容を抽出するための具体的なテキストと添付された領収書のバイナリデータを設定 ● textには領収書の内容が抽出されたテキストが返される領収書のテキストを抽出する

Slide 15

Slide 15 text

15 ● AI SDKのgenerateObject関数を利⽤して、抽出した領収書のテキストをJSON形式に変換 ● schemaには変換するJSONのスキーマを設定 ● プロンプトには先ほど抽出した領収書のテキストを設定することで、objectにスキーマに沿った形でJSONが返される抽出した領収書のテキストをJSON形式に変換

Slide 16

Slide 16 text

16 ● AI SDKのtool関数を利⽤し、ツールを定義する ● description: LLMがこのToolを利⽤する際に参考にするための説明 ● inputSchema: このToolを利⽤する際に必要なパラメーターを zodで定義 ● execute: LLMがこのToolを利⽤した際に実⾏される関数。引数にはinputSchemaで定義したパラメーターが渡される経費登録Toolの実装

Slide 17

Slide 17 text

17 ● AI SDKのgenerateText関数の toolsに先ほど作成したtoolを渡す ● promptには、toolを実⾏させるための具体的なテキストを設定し、先程抽出した領収書のJSON を設定 ● 設定したtoolを必ず利⽤したい場合には、toolChoiceに、 requiredを設定する Toolを利⽤して経費を登録

Slide 18

Slide 18 text

実際にエージェントを動かしてみた

Slide 19

Slide 19 text

19 実際に過去、経費登録したタクシーの領収書を使って実験してみました利⽤した領収書

Slide 20

Slide 20 text

20 ● Cloudﬂare上で作成したメールアドレスに対して、領収書を添付して送信 ● Workerのログを⾒てみると、かなり正確に領収書の内容が抽出されてJSON形式に変換されているがわかります。メールに領収書を添付して送信

Slide 21

Slide 21 text

領収書の内容が経費として登録されている 21 ● このJSONデータがTool経由でAPI連携 ● 利⽤しているクラウド経費システムの⼀覧画⾯に登録されていることを確認

Slide 22

Slide 22 text

まとめ 22 ● Agents SDKがCloudﬂare上でエージェントを実⾏するための基盤機能を提供してくれるため、開発者はインフラについてはほとんど意識する必要がなく、エージェントの実装に集中することができる ● 今回はお試しで経費登録⾃動化エージェントを作成してみましたが、アイデアによってはいろいろできそうで夢が広がります。

Slide 23

Slide 23 text

参考資料 23 ● Cloudﬂare Agents ● Cloudﬂare Agents Documentation ● Vercel AI SDK Core

Slide 24

Slide 24 text

No content