Cloudflare Workers AI

Page content

wrangler CLI で **Cloudflare の
workers-sdk テンプレート（cloudflare/workers-sdk/templates）を使う方法は、
👉 GitHub のテンプレートを指定してプロジェクトを生成します。💡

🚀 方法①（最も簡単・公式推奨）

✅ wrangler の init でテンプレート指定

npx wrangler init my-worker --from cloudflare/workers-sdk/templates/hello-world

🔹 TypeScript 版なら

npx wrangler init my-worker --from cloudflare/workers-sdk/templates/hello-world-ts

📦 方法② GitHub から直接クローン

git clone https://github.com/cloudflare/workers-sdk.git
cd workers-sdk/templates/hello-world
npm install

👉 ただし不要なファイルも多いので①推奨

🧠 よく使われるテンプレート一覧

⭐ 最小構成（初心者向け）

hello-world
hello-world-ts

⭐ Web アプリ系

worker-sites
scheduled-worker
queue-consumer
durable-object

⭐ AI / API 系

ai
openapi

⚙️ プロジェクト作成後

cd my-worker
npm install
npx wrangler dev

👉 ローカル起動 🌐

☁️ デプロイ

npx wrangler deploy

❗ 重要：Wrangler v3以降

古い記事のコマンドは動かないことがあります。
最新版では：

  • --type → 廃止

  • --from → 使用

🏆 一番おすすめ（2026年）

👉 TypeScript + 最小構成

npx wrangler init my-worker \
  --from cloudflare/workers-sdk/templates/hello-world-ts

💥 もしAIやSaaSを作るなら

用途別の最適テンプレ：

  • 🤖 AI API → ai

  • 🧠 Durable Object → durable-object

  • ⏰ 定期処理 → scheduled-worker

  • 📦 キュー処理 → queue-consumer

必要なら👇

✅ 「Cloudflare Workers 最短公開手順（2026完全版）」
✅ 「AI SaaSをWorkersだけで作る構成」
✅ 「Vercelより高速な構成テンプレ」
✅ 「Next.jsをWorkersに最適化する方法」

も具体的に解説できます。

Wrangler CLIでCloudflare Workers SDKのテンプレートを使う方法を説明します。

基本コマンド

npm create cloudflare@latest

または

npx create-cloudflare@latest

テンプレートを指定する場合

npm create cloudflare@latest my-ai-app – –template=

npm create cloudflare@latest my-app -- --template <テンプレート名またはURL>

GitHubリポジトリのテンプレートを直接指定

# cloudflare/workers-sdk の特定テンプレートを使う
npm create cloudflare@latest my-app -- --template cloudflare/workers-sdk/templates/hello-world

# またはフルURLで指定
npm create cloudflare@latest my-app -- --template https://github.com/cloudflare/workers-sdk/tree/main/templates/hello-world

主なテンプレート一覧

テンプレート名 用途
hello-world 基本的なWorker
hello-world-durable-object Durable Objects
hello-world-python Python Worker
worker-assets-react React + Assets
worker-assets-vue Vue + Assets
scheduled-worker Cron Triggers
worker-websocket WebSocket
openapi OpenAPI仕様のAPI

対話形式で選ぶ場合

npm create cloudflare@latest

を実行すると、プロジェクト名・テンプレートの種類をインタラクティブに選択できます。

wrangler init（非推奨）

古いバージョンでは wrangler init が使われていましたが、現在は create-cloudflare (C3) の使用が推奨されています。

# 非推奨（古い方法）
wrangler init my-worker

テンプレートの全リストは以下で確認できます： https://github.com/cloudflare/templates

🏆 目的

👉 AIに質問 → 回答が返る Worker を作る

使用：Cloudflare Workers AI

🧭 事前準備（まだなら）

Node.js 確認

node -v

Wrangler（CLI）確認

npx wrangler --version

Cloudflareログイン

npx wrangler login

👉 ブラウザが開く → 許可

🏆 ① Worker プロジェクト作成

npm create cloudflare@latest

表示された質問に回答

Project name:
→ ai-worker

What would you like to start with?
→ Worker only

Which language?
→ TypeScript（推奨）

🏆 ② フォルダ移動

cd ai-worker

🏆 ③ AIサンプルコードを書く

src/index.ts を開いて全削除 → これを貼る

interface Env {
  AI: any
}

export default {
  async fetch(
    request: Request,
    env: Env
  ): Promise<Response> {

    const result = await env.AI.run(
      "@cf/meta/llama-3-8b-instruct",
      {
        prompt: "AIとは何かを簡単に説明して"
      }
    )

    return Response.json(result)
  }
}

このコードは、Cloudflare Workers AI という機能を使って、ブラウザなどからアクセスがあった際に AI（Llama 3）に質問し、その回答を返すという最小構成のプログラムです。

各パーツがどのような役割を持っているか、分解して解説します。

1. 型定義セクション

TypeScript

interface Env {
  AI: any
}

  • 役割: Worker が使用できる「外部ツール（バインディング）」を定義しています。

  • 詳細: Cloudflare Workers では、環境変数や AI 機能、データベースなどはすべて env というオブジェクトの中にまとめられて渡されます。ここでは「env の中には AI という名前のツールが入っているよ」と TypeScript に教えています。

    • ※本来は Ai という専用の型がありますが、any と書くことで「何でもOK」としてエラーを回避しています。

2. メイン処理（fetch ハンドラー）

TypeScript

export default {
  async fetch(
    request: Request,
    env: Env
  ): Promise<Response> {

  • export default: このファイルが Worker のメインプログラムであることを示します。

  • fetch 関数: HTTP リクエスト（ブラウザからのアクセスなど）が発生したときに自動的に実行される関数です。

    • request: 届いたリクエストの情報（URLやヘッダーなど）。

    • env: 先ほど定義した Env オブジェクト。ここに AI 機能が入っています。

3. AI への命令セクション

TypeScript

const result = await env.AI.run(
  "@cf/meta/llama-3-8b-instruct",
  {
    prompt: "AIとは何かを簡単に説明して"
  }
)

  • env.AI.run(...): 実際に AI モデルを呼び出す命令です。

  • @cf/meta/llama-3-8b-instruct: 使用する AI モデルの ID です。Meta 社が開発した最新の軽量・高性能モデル「Llama 3」の 80 億パラメータ版を指定しています。

  • prompt: AI に投げる「お題」です。

  • await: AI が回答を生成するまでには少し時間がかかるため、完了するまでここで待機します。

4. レスポンス（返却）

TypeScript

return Response.json(result)

  • 役割: AI から返ってきた結果（result）を、JSON 形式でブラウザや呼び出し元に送り返します。

  • 結果のイメージ: 成功すると、画面には {"response": "AIとは、コンピュータに人間のような知能を持たせる技術のことです..."} といったテキストが表示されます。

全体の流れのまとめ

  1. アクセス: あなたが Worker の URL にアクセスする。

  2. 起動: fetch 関数が動き出す。

  3. 依頼: env.AI.run を通じて、Cloudflare のサーバー上で動いている Llama 3 に質問が飛ぶ。

  4. 回答生成: AI が文章を考える。

  5. 返却: 出来上がった文章が JSON としてあなたのブラウザに届く。

🏆 ④ ローカルで実行

npm run dev

または

npx wrangler dev

🏆 ⑤ ブラウザで確認

http://localhost:8787

👉 AIの回答が表示されれば成功 🎉

🏆 ⑥ 本番にデプロイ

[[npx wrangler deploy]]

発行されるURL

https://ai-worker.あなたのID.workers.dev

👉 これが公開AI API 💎

🧩 何が起きているか

ブラウザ
   ↓
Worker
   ↓
AIモデル（Cloudflare内）
   ↓
回答

🏆 ⑦ POSTで質問を送る版（実用）

コードをこれに変更：

interface Env {
  AI: any
}

export default {
  async fetch(request: Request, env: Env) {

    const { prompt } = await request.json() as { prompt: string }

    const result = await env.AI.run(
      "@cf/meta/llama-3-8b-instruct",
      { prompt }
    )

    return Response.json(result)
  }
}

curl テスト

curl -X POST http://localhost:8787 \
  -H "Content-Type: application/json" \
  -d "{\"prompt\":\"AIとは？\"}"

🏆 これで作れるもの

  • AIチャットAPI

  • 業務文書生成

  • AIツール

  • SaaSの核

💎 Cloudflare AI の強み

✔ APIキー不要
✔ サーバー不要
✔ Edge高速
✔ 安価
✔ 個人開発向き

🚀 次のステップ（業務用）

👉 ここから：

  • DB保存

  • ログイン

  • 管理画面

  • 課金

を追加すると 本格AI SaaS

必要なら👇

🔥 「Astro + Workers + AI 完全構成の手順」
🔥 「業務用AI SaaS完成テンプレ」
🔥 「D1 + 認証付き」
🔥 「Stripe課金まで含めた完全版」
🔥 「個人で年商1億に最短のAIツール」

👉 次に作りたいものは？
（チャット／文章生成／業務AI／SaaS など）

公開できるレベルまで最短手順を出します 🚀