Cloudflare Workers AI を使ってAIアプリケーションを開発する方法を、具体的な手順と画像で解説します。
📦 フェーズ1：HonoでCloudflare Workerプロジェクトを作成
まずは、Cloudflare Workers プロジェクトの基盤を構築しましょう。
1. Cloudflareプロジェクトの初期化
ターミナルで次のコマンドを実行し、Cloudflare Workers プロジェクトを初期化します。
npm create cloudflare@latest
すると、いくつかの質問に答えるプロンプトが表示されます。以下の選択肢と画像を参考に進めてください。
・保存先ディレクトリ: 任意の名前を入力
・What would you like to start with? → Framework Starter
・Which development framework do you want to use? → Hono
・Do you want to use git version control? → 適宜選択（Yes または No）
・Do you want to deploy your application? → No
2. 開発サーバーを起動
プロジェクトのディレクトリに移動し、必要なパッケージをインストールしてから開発サーバーを起動します。
cd 作成したディレクトリ名
npm install # 初回のみ必要
npm run dev
ブラウザで http://localhost:8787 にアクセスすると、以下のように「Hello Hono!」と表示されます。
🧠フェーズ2：AIエンドポイントを追加しよう！
いよいよCloudflare Workers AIの力をアプリケーションに組み込みます。
1. wrangler.jsonc を編集してAI機能を有効化
wrangler.jsonc ファイルをエディタ（例：VS Code）で開き、"observability" の閉じ波括弧 } の後にカンマ , を追加し、その次に "ai" セクションを追加してください。これにより、CloudflareのAI機能にアクセスできるようになります。
"observability": {
"enabled": true
}, // ここにカンマを追加すること！
"ai": {
"binding": "AI"
}
これにより、CloudflareのAI機能にアクセスできるようになります。
2. src/index.ts にAIエンドポイントを追加
次に、src/index.ts ファイルを修正し、/hello-ai エンドポイントでAIモデルを利用できるようにします。
import { Hono } from "hono";
import { Ai } from "@cloudflare/ai";
type Bindings = {
AI: Ai; // 型定義（`AI: any;`でも可）
};
const app = new Hono<{ Bindings: Bindings }>();
app.get("/", (c) => c.text("Hello Hono!"));
// AIエンドポイント
app.get("/hello-ai", async (c) => {
try {
const ai = new Ai(c.env.AI);
const response = await ai.run("@cf/meta/llama-3.1-8b-instruct", {
messages: [
{ role: "user", content: "晩ご飯な何作るか教えて" }// AIへの依頼内容
],
});
return c.json(response);
} catch (error) {
console.error("AI実行エラー:", error);
return c.text("AIの応答を取得できませんでした。", 500);
}
});
export default app;
✅ 補足TIP: ターミナルでnpm run cf-typegen を実行すると、c.env.AI などの型を自動生成してくれるので便利です！
3. 使用するAIモデルについて
Cloudflare Workers AIでは、複数の大規模言語モデル（LLM）を無料で利用できます。今回はその中から @cf/meta/llama-3.1-8b-instruct を使います。
このモデルは 軽量かつ高速 に動作し、無料で試せるのが魅力です。会話や文章生成など幅広い用途に対応しており、初めてのAIアプリ開発にも最適です。
モデルの詳細はこちら： 公式ドキュメント
4. デプロイして動作を確認
ローカルで問題がなければ、以下のコマンドでCloudflare上にアプリケーションをデプロイします：
npm run deploy
デプロイが完了すると、表示されるURL（例：https://xx.xxx.workers.dev）にアクセスし、パスに /hello-ai を追加してみてください。すると、LLMからのレスポンスがJSON形式で返ってくるはずです！🎉
これで、Cloudflare Workers AI を使ったAIアプリケーションの基本的な開発は完了です。この基盤をベースに、さらに多彩なAI機能を実装してみましょう！
Discussion