AIで文章を書く

useAIフックは、プロンプトをAIモデルに送り、その返答を返します。毎日の詩や豆知識、ウィジェットがすでに持っているデータの要約など、毎回違う内容を表示したいときに使います。

import { useAI } from "~lib/use-ai";

export const Widget = () => {
  const { data } = useAI({ prompt: "Write a haiku about autumn" });

  return <p className="whitespace-pre-line">{data.output}</p>;
};

useFetchと同じく、ウィジェットは返答を受け取ってから描画されるので、dataは常にそろっています。APIキーは必要ありません。

データからプロンプトを組み立てる

プロンプトはただの文字列なので、入力項目の値や、すでに取得したデータを埋め込めます。

import { useAI } from "~lib/use-ai";
import { useFetch } from "~lib/use-fetch";

type Forecast = {
  readonly temperature: number;
  readonly summary: string;
};

export const Widget = () => {
  const { data: forecast } = useFetch<Forecast>(
    "https://api.example.com/forecast",
  );

  const { data } = useAI({
    prompt: `In one short sentence, suggest what to wear today. It will be ${forecast.temperature}°C and ${forecast.summary}.`,
  });

  return <p>{data.output}</p>;
};

ヒント

• ほしい形を指定しましょう。返答はプレーンテキストです。ウィジェットに収まるよう、「1文で」「箇条書きで3点」のように、長さと書き方を指定してください。
• 返答は毎回変わります。フレームの表示内容が準備されるたびにプロンプトが送り直され、モデルが新しい返答を書きます。