Write text with AI

The useAI hook sends a prompt to an AI model and gives you its reply. Use it for content that is different every time, such as a daily poem, a fun fact or a summary of data your Widget already has.

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>;
};

Like useFetch, your Widget waits for the reply before it is drawn, so data is always there. No API key is needed.

Building the prompt from data

The prompt is an ordinary string, so you can fill it with Inputs or with data you have already fetched:

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>;
};

Tips

• Ask for the shape you want. The reply is plain text. Say how long it should be and how it should be laid out, such as "one sentence" or "three bullet points", so it fits your Widget.
• Expect a new reply every time. Each time the Frame is prepared, the prompt is sent again and the model writes a fresh reply.