✨

CloudflareでWebアプリ開発[3/3] Cloudflare Workers AIを使用して、文章生成AIアプリを作成する

2025/01/02に公開

React

 はじめに今回は、Cloudflare Workers AIを使用して、文章生成AIのWebアプリを作成したいと思います。
!Cloudflare Workers AIの文章生成は1万 トークン / 日の制限があります。

詳しくはPricing · Cloudflare Workers AI docsを確認してください。

 この記事はこんな人におすすめ！React（Vite）でWebサイトを作成したい人
Cloudflare PagesでWebサイトを公開したい人
Cloudflare Workers AIを使用して、文章生成AIのWebアプリを作成したい人

 前の記事前回は、React（Vite）のプロジェクトでCloudflare Pages Functionsを作成することができました。

https://zenn.dev/kinakokyoryu/articles/0331fed1df7504

 1. Cloudflare Pages Functionsを編集する「helloworld.ts」を以下コードで上書きします。ここでは、LLMモデルはLlama 3.3を使用しました。使用可能なモデルはModels · Cloudflare Workers AI docsを確認してください。 helloworld.ts
interface Env {
  AI: any;
}
interface OnRequestPost {
  request: Request;
  env: Env;
}

export const onRequestPost = async ({ request, env }: OnRequestPost): Promise<Response> => {
  const { input } = await request.json();

  const messages = [
    {
      role: "user",
      content: input,
    },
  ];

  const response = await env.AI.run("@cf/meta/llama-3.3-70b-instruct-fp8-fast",
    { messages }
  );
  const output = response.response;
  return new Response(JSON.stringify({ output: output }), {
    headers: { "Content-Type": "application/json" },
  });
};
src/App.tsxを以下コードで上書きし、入力欄にテキストを入力して「送信」ボタンを押すと、Cloudflare Pages FunctionsにPOSTリクエストし、Cloudflare Workers AIを使用できるようにします。 App.tsx
import { useState } from "react";

interface Data {
  output: string;
}

function App() {
  const [input, setInput] = useState<string>("");
  const [output, setOutput] = useState<string>("");

  const send = async () => {
    const response = await fetch("/helloworld", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ input }),
    });

    const data: Data = await response.json();
    setOutput(data.output);
  };

  return (
    <>
      <input value={input} onChange={(e) => setInput(e.target.value)} />
      <button onClick={send}>送信</button>
      <p>{output}</p>
    </>
  )
}

export default App
ブラウザでCloudflare Pagesのプロジェクトを開き、「設定 > バインディング > 追加 >Workers AI」を選択します。
変数名を「AI」と入力し、「保存」ボタンを押下します。
Cloudflare Pagesにデプロイして確認してみます。 ターミナル
npm run git
Cloudflare PagesのWebサイトを開くと、入力欄と「送信」ボタンが表示されます。


入力欄にテキストを入力して「送信」ボタンを押し、ボタンの下に文章生成AIからの返信が表示されたら成功です。



 さいごにCloudflare Workers AIを使用して、文章生成AIのWebアプリを作成することができました。

見た目が簡素なので、Material UIやYamada UIなどのReactのUIコンポーネントライブラリを使用して美しいUIを目指してみてください。

はじめに

この記事はこんな人におすすめ！

前の記事

1. Cloudflare Pages Functionsを編集する

さいごに

Discussion