Findy Campus Hackathon #2
Cloudflare - Senior Developer Advocate
Yusuke Wada
大事なリンク
Yusuke Wada
- 和田裕介
- Cloudflare - Senior Developer Advocate
- 2023年4月入社
- Honoの作者
::right::
ハッカソンです！
これから軽く話します（なるべく開発に時間を割きましょう）。
これから話すこと
- 何が作れるか？
- Cloudflareの機能
- Cloudflareを使った開発の最初
- エージェント・スキル
何が作れるか？
分岐
- Cloudflareを使うか？使わないか？
- ローカルでデモか、デプロイするか？
- Webアプリか、AIエージェントか？
Cloudflareを使うか？使わないか？
- Cloudflareを無理して使わなくてもいいと思います！
- ですが、Cloudflareを使うと⋯
- 開発から公開までが楽
- バックエンドもUIも作れる
- AIアプリも作れる
- 無料で始められる
ローカルでデモか、デプロイするか？
- 無理して公開しなくてもいいと思います！
- ですが、公開すると⋯
- 全世界から見れる！
- Cloudflareなら秒
- 見せたくなくなったら消せば良い
Webアプリか、AIエージェントか？
- 何でも（デスクトップアプリとかでも）いいですが、WebアプリかAIエージェントがいいと思います！
Webアプリとは？
- ブラウザ => Webアプリ => Webページ
- 「Discordボット」とかでもいい
- ロジック・データベース・UIがある
AIエージェントとは？
ここ重要なんで詳しく
AIエージェントは、AIを活用したコンピュータプログラムで、明示的な指示がなくても自律的にタスクを実行して人間のユーザーを支援することができます。
https://www.cloudflare.com/ja-jp/learning/ai/what-is-agentic-ai/
AIの変遷
AIが考えるだけじゃなくて行動する
AIエージェントの活用シーン
- ビジネス業務
- 競合のリサーチ、データの分析からレポート（資料）の作成までを一貫して実行
- 旅行・スケジュール管理
- 「来月出張に行きたい」と伝えるだけで、航空券やホテルの検索・比較・予約までを自動で完了
- カスタマーサポート
- 顧客ごとの過去の購入履歴や問い合わせ状況をシステムで自律的に調べ、適切な対応を自動提案・実行
コーディングエージェント
- 自ら実行する
- 実行した結果を学習する
- 外部のツールと連動する
::right::
AI「エージェント」であるのが大事
- AIを使ったコーディングだけでもないし⋯
- プロンプトを変えるだけ、チャットボットでもないし⋯
- AIが行動する
めちゃくちゃシンプルな例
- memo2task
- https://github.com/yusukebe/memo2task
- 雑なメモをAIがタスクにしてくれる
- タスクのタイトル
- 期限
- ブラウザ通知
詳しくは言わないけど、CloudflareはAIエージェントを作るのに最適な場所
AIエージェントに必要な3つの要素
- 推論モデル - エージェントが考える
- サンドボックス - エージェントが（コードetc.を）実行する
- 実行環境 - エージェントを置く環境
Cloudflareには3つが揃っている
- 推論モデル - Workers AI
- サンドボックス - Sandboxes / Dynamic Workers / Browser Run
- 実行環境 - Workers / Durable Objects / Workflows / Agents SDK
参考文献
Cloudflareの機能
Cloudflareは機能がたくさん
- その中でも開発者プラットフォーム（Developer Platform）を使うことになるでしょう！
- Workers / D1 / R2 / KV / Queues / Workflows / Workers AI / AI Gateway / AI Search / Vectorize / Browser Run / Containers / Sandboxes ...
- いくつか軽く紹介
デモ
cloudflare-demos - https://cf-demos.yusuke.run/
Cloudflare Workers
- サーバーレスのWebアプリ開発環境
- AIエージェントの実行環境としても使える
- Workersを起点にいろんな機能を使う
- Honoも動く
D1
- SQLデータベース
- SQLiteの文法が使える
- Workersからつなげてデータを入れる、取ってくる etc.
R2
- オブジェクトストレージ
- 画像、音声、動画、設定ファイル、なんでも置ける
- Workersからつなげて、データを置く、取ってくる etc.
- 直接配信もできる
Browser Run
- Cloudflare上でヘッドレスブラウザが動く
- スクリーンショット、PDFの生成、自動化したブラウザタスク
- Quick Actionsが使いやすい
const response = await env.BROWSER.quickAction('screenshot', {
url: 'https://example.com',
})
Workers AI
- 推論モデルがCloudflareネットワーク上で動く
- 80以上のモデル、外部のモデルも合わせると160以上
- たくさんの種類
- LLM
- 画像生成
- スピーチ to テキスト
- Embedding
- etc.
- AIエージェントが「考える」ために
::right::
Agents SDK
- AIエージェントを作るためのSDK
- WorkersとDurable Objectsをベースに作られている
- ステートフルなサーバサイドを作れる
- タスクのやり取りを覚えておく => 状態の保持
- デバイス、ユーザー間で共有する => リアルタイムで同期
- ユーザーが離れたら休止する、再開もする => 休止と再開
::right::
- あとは自分で調べて
- Cloudflare Developer Docs が正なので迷ったら見る
Cloudflareを使った開発の最初
Wrangler
- 開発、デプロイ、管理のためのCLI
- これさえあれば全部できる
- 皆さんのPCに入って入れてもらっているはず⋯
コマンド
# 開発サーバーを立ち上げる
wrangler dev
# デプロイ
wrangler deploy
ログインだけはやっておいて
npx wrangler login
エージェント・スキル
コーディングエージェント
- コーディングエージェント使う前提でよいです
- デプロイまでやってもらってOK！
- Wranglerだとパスワードなしにデプロイできるので安全
スキル
- CloudflareとHonoを使った開発に便利なスキルがあります
- Cloudflareスキル - https://github.com/cloudflare/skills
- Honoスキル - https://github.com/yusukebe/hono-skill
- さらにこのハッカソン向けのスキルも作りました
始め方
レポジトリ
https://github.com/yusukebe/findy-campus-hackathon-02
これをやればOK
npx degit yusukebe/findy-campus-hackathon-02 my-hackathon-app
cd my-hackathon-app && npm install
npm run setup:skills
さあ始めよう！
Cloudflare Workers Tech Talksについて
Cloudflare Workers / 開発者プラットフォームに特化したミートアップ
https://workers-tech.connpass.com/
