CloudflareのChat Agent Starter Kitで簡単！AIチャットボット構築

Cloudflare Workers Tech Talks in Hokkaido #1 の発表資料です
https://workers-tech.connpass.com/event/365479/

Transcript

1. Cloudflare のChat Agent Starter Kit で 簡単！AI チャットボット構築 syumai Cloudflare Workers Tech Talks in Hokkaido #1
2. 自己紹介 syumai ECMAScript 仕様輪読会 / Asakusa.go 主催 株式会社ベースマキナで管理画面のSaaS を開発中 Go でGraphQL サーバー (gqlgen) や TypeScript でフロン トエンドを書いています Software Design 2023 年12 月号から2025 年2 月号まで Cloudflare Workers の連載をしました Twitter ( 現𝕏): @__syumai Website: https://syum.ai
3. Agents SDK
4. Agents SDK Cloudflare のインフラ上で、AI 駆動型エージェント (AI-powered agents) のアプリケ ーションを簡単に構築できる
5. Agents SDK 公式ドキュメントの冒頭の説明 The Agents SDK enables you to build and deploy AI-powered agents that can autonomously perform tasks, communicate with clients in real time, call AI models, persist state, schedule tasks, run asynchronous workflows, browse the web, query data from your database, support human-in-the-loop interactions, and a lot more.
6. Agents SDK 日本語訳して箇条書きにしたもの ( 重要なものは太字) 1. 自律的なタスク実行 2. クライアントとのリアルタイムなコミュニケーション 3. AI モデルの呼び出し 4. 状態の永続化 5. タスクのスケジューリング 6. 非同期ワークフローの実行 7. ウェブブラウジング 8. データベースからデータをクエリ 9. human-in-the-loop のインタラクション
7. Agents SDK ( 筆者の所感として) AI エージェントが最低限持つべき機能は上から4 つ 1. 自律的なタスク実行 2. クライアントとのリアルタイムなコミュニケーション 3. AI モデルの呼び出し 4. 状態の永続化 5. タスクのスケジューリング 6. 非同期ワークフローの実行 7. ウェブブラウジング 8. データベースからデータをクエリ 9. human-in-the-loop のインタラクション
8. Agents SDK Agents SDK で、AI エージェントとして最低限の機能を満たせる よりリッチなAI エージェントを作りたくなった時にも、Cloudflare のインフラだけで 豊富な機能を実装できる ことが示されている
9. 実際にAI チャットボットを構築してみる
10. Chat Agent Starter Kit 今回はこれを使います Agents SDK の Agent class 自体を全く触らずチャットボットが作れる 入門向け https://github.com/cloudflare/agents-starter
11. 構築手順 1. ( 事前準備) Cloudflare アカウントを作っておく 2. ( 事前準備) OpenAI のAPI キーを発行しておく 3. Cloudflare のChat Agent Starter Kit ( 以下、Starter Kit) のリポジトリを開き、 「Deploy to Cloudflare 」ボタンをクリックし、必要事項を入力する
12. デモ
14. Starter Kit に含まれるもの チャットUI AI との対話 ツールの利用
15. チャットUI 親しみのある、よくあるチャット UI ツール利用の確認UI も組み込まれて いる チャット履歴の削除が可能 Light / Dark mode 切り替えあり
16. AI との対話 プロジェクトの作成時に入力したOpenAI のAPI キーを使ってAI と対話する形 Cloudflare AI Gateway を使わないし、Cloudflare のホストするモデルでもない ( ちょっと意外)
17. ツールの利用 Vercel AI SDK のtool を登録して使う 以下のツールが組み込みで利用可能 i. getWeatherInformation 指定された都市の天気情報を表示 ii. getLocalTime 指定された場所の現地時間を取得 iii. scheduleTask 後で実行するタスクをスケジュール (Durable Objects を利用) iv. getScheduledTasks スケジュール済みの全タスクをリスト表示 v. cancelScheduledTask ID を指定してスケジュール済みタスクをキャンセル
18. カスタマイズ方法
19. ツールの追加 先述の通り、tool はVercel AI SDK のtool https://ai-sdk.dev/docs/ai-sdk-core/tools-and-tool-calling これに従ってtool を実装して組み込むだけでOK
20. ツールの種類 ツールには2 種類ある 1. 実行に確認が不要なツール 2. 実行に確認が必要なツール 必ず実行前の確認を挟みたい（確認UI を表示したい）場合は、2 を使う
21. 1. 実行に確認が不要なツールの実装 execute のコールバックを実装したら、確認なしで実行される
22. 2. 実行に確認が必要なツールの実装 execute のコールバックを実装しない
23. 2. 実行に確認が必要なツールの実装 代わりに、 executions オブジェクト側に実装する
24. モデルの切り替え モデルも、結局Vercel AI SDK のモデルを使っているので、互換性があれば簡単に差し 替え可能 詳細な方法について、README に記載があります https://github.com/syumai/agents-starter-demo/blob/main/README.ja.md# 異な るai モデルプロバイダーの使用
26. UI のカスタマイズ ただのReact アプリケーションなので、自由にいじれる 自分はまだできていない… ドキュメントによると、以下が変更可能 テーマカラー ( styles.css ) チャットコンテナ内への新規UI コンポーネントの追加 メッセージの表示形式 ツール確認ダイアログ ヘッダー部分へのコントロールUI 追加
27. AIChatAgent class について
28. AIChatAgent class このStarter Kit で使われているAgent の実装は、Agents SDK 内蔵の「AIChatAgent 」 というclass AIChatAgent は Agent class を継承している（普通のAgent と同じ） useAgentChat というReact Hook とセットで使われる想定のつくりになっている ドキュメントがほぼ無い https://developers.cloudflare.com/agents/api-reference/agents-api/#chat-agent
29. 簡素なドキュメントの様子
30. AIChatAgent class とどう付き合っていくべきか？ 普通に便利ではある 本来なら自分で全部実装しないといけないセッション管理や、メッセージ履歴の 管理などを全部任せられる UI まで付いてくる ただ、これでどこまで戦えるかは未知数 作り込まれ過ぎているので、細かい部分をカスタマイズして使えるかが不明瞭 これはエージェントのデモをしやすくするところまでが目的のツールかも？
32. AIChatAgent class とどう付き合っていくべきか？ あくまでエージェントの実装は自分でやりつつ、部分的にコードを読んで参考にするくら いが落としどころかも？（意見、感想求む）
33. まとめ Cloudflare のChat Agent Starter Kit を使うと、一瞬でリッチなAI チャットボットが構 築できる Cloudflare のAgents SDK がVercel AI SDK との組み合わせが良く、カスタマイズが楽 UI もReact なので簡単にいじれる AIChatAgent class でどこまで戦えるか未知数だが、実装内容は非常に参考になる
34. ご清聴ありがとうございました！
35. おまけ
36. Starter Kit を試す上でのTips ドメイン設定 デフォルトで、 {アプリケーション名}.{ユーザー名}.workers.dev にデプロイされてし まう 誰でもエージェントを使える状態になる URL を共有したりして試すなら、 wrangler.json で "workers_dev": false に設 定し、カスタムドメインを割り当ててCloudflare Access で制限をかけておくのがおす すめ ( 気になるようならPreview URLs も別途無効化可能です: "preview_urls": false )