Stream AI Responses With useChat: A Custom React UI That Handles Every State

// components/OldTutorialChat.tsx (does not compile on @ai-sdk/react 4)
"use client";

import { useChat } from "@ai-sdk/react";

// What older tutorials (and a lot of AI-generated code) still write.
export function OldTutorialChat() {
  const { messages, input, handleInputChange, handleSubmit } = useChat();

  return (
    <form onSubmit={handleSubmit}>
      {messages.map((m) => (
        <p key={m.id}>{m.content}</p>
      ))}
      <input value={input} onChange={handleInputChange} />
    </form>
  );
}

components/OldTutorialChat.tsx(7,21): error TS2339: Property 'input' does not exist on type 'UseChatHelpers<UIMessage<unknown, UIDataTypes, UITools>>'.
components/OldTutorialChat.tsx(7,28): error TS2339: Property 'handleInputChange' does not exist on type 'UseChatHelpers<UIMessage<unknown, UIDataTypes, UITools>>'.
components/OldTutorialChat.tsx(7,47): error TS2339: Property 'handleSubmit' does not exist on type 'UseChatHelpers<UIMessage<unknown, UIDataTypes, UITools>>'.
components/OldTutorialChat.tsx(12,26): error TS2339: Property 'content' does not exist on type 'UIMessage<unknown, UIDataTypes, UITools>'.

// app/api/chat/route.ts
import { convertToModelMessages, streamText, type UIMessage } from "ai";
import { model } from "./model"; // swap in your provider, e.g. openai("gpt-5")

export async function POST(req: Request) {
  const { messages }: { messages: UIMessage[] } = await req.json();

  const result = streamText({
    model,
    messages: await convertToModelMessages(messages),
  });

  return result.toUIMessageStreamResponse({
    // Without this the client only gets "An error occurred."
    onError: (error) => (error instanceof Error ? error.message : "Something went wrong"),
  });
}

// app/api/chat/model.ts
import { simulateReadableStream } from "ai";
import { MockLanguageModelV4 } from "ai/test";

// Test stand-in for a real model. It waits 1.2 s before the first token
// (the "thinking" gap), then streams one word every 40 ms.
// Ask for "long" to get a reply that overflows the card, "reason" to get a
// second of reasoning tokens before the answer, or "fail" for an error.
const REPLY =
  "Churn went from 2.1% to 3.4% last week. Most cancels came from the Starter plan, " +
  "right after the price email went out. A win-back offer for those accounts is the quickest fix.";

export const model = new MockLanguageModelV4({
  doStream: async ({ prompt }) => {
    const asked = JSON.stringify(prompt.at(-1) ?? "").toLowerCase();
    if (asked.includes("fail")) throw new Error("Model unavailable");
    const text = asked.includes("long") ? Array(8).fill(REPLY).join("\n\n") : REPLY;
    const words = text.split(/(?<= )/);
    const reasoning = asked.includes("reason")
      ? [
          { type: "reasoning-start" as const, id: "r1" },
          ...Array.from({ length: 25 }, () => ({ type: "reasoning-delta" as const, id: "r1", delta: "checking… " })),
          { type: "reasoning-end" as const, id: "r1" },
        ]
      : [];
    return {
      stream: simulateReadableStream({
        initialDelayInMs: 1200,
        chunkDelayInMs: 40,
        chunks: [
          ...reasoning,
          { type: "text-start", id: "t1" },
          ...words.map((delta) => ({ type: "text-delta" as const, id: "t1", delta })),
          { type: "text-end", id: "t1" },
          {
            type: "finish",
            finishReason: { unified: "stop", raw: undefined },
            usage: {
              inputTokens: { total: 10, noCache: 10, cacheRead: undefined, cacheWrite: undefined },
              outputTokens: { total: words.length, text: words.length, reasoning: undefined },
            },
          },
        ],
      }),
    };
  },
});

// components/AnswerChat.tsx
"use client";

import { useEffect, useRef, useState } from "react";
import { useChat } from "@ai-sdk/react";
import type { UIMessage } from "ai";

function textOf(message: UIMessage) {
  return message.parts
    .filter((part) => part.type === "text")
    .map((part) => part.text)
    .join("");
}

export function AnswerChat() {
  const [input, setInput] = useState("");
  const { messages, sendMessage, status, stop, error, regenerate } = useChat({
    experimental_throttle: 50, // re-render at most every 50 ms while tokens arrive
  });

  const last = messages.at(-1);
  const answer = last?.role === "assistant" ? textOf(last) : "";
  const busy = status === "submitted" || status === "streaming";
  // "streaming" starts before the first word, so check for text too.
  const thinking = busy && answer.length === 0;

  // Follow new text unless the reader has scrolled up.
  const scroller = useRef<HTMLDivElement>(null);
  const pinned = useRef(true);
  useEffect(() => {
    const el = scroller.current;
    if (el && pinned.current) el.scrollTop = el.scrollHeight;
  }, [answer]);

  return (
    <div data-status={status} className="space-y-3">
      <div
        ref={scroller}
        onScroll={(e) => {
          const el = e.currentTarget;
          pinned.current = el.scrollHeight - el.scrollTop - el.clientHeight < 24;
        }}
        className="max-h-96 space-y-3 overflow-y-auto overscroll-contain rounded-2xl border bg-white p-4"
      >
        {messages.map((m) =>
          m.role === "user" ? (
            <p key={m.id} className="ml-auto w-fit max-w-[85%] rounded-xl bg-neutral-900 px-3 py-2 text-white">
              {textOf(m)}
            </p>
          ) : (
            <p key={m.id} className="whitespace-pre-wrap leading-relaxed" data-answer>
              {textOf(m)}
              {status === "streaming" && m.id === last?.id && answer && (
                <span className="ml-0.5 inline-block h-4 w-1.5 animate-pulse bg-neutral-400 align-middle" />
              )}
            </p>
          ),
        )}

        {thinking && (
          <p role="status" className="text-sm text-neutral-500" data-thinking>
            Thinking…
          </p>
        )}

        {error && (
          <div role="alert" className="rounded-lg bg-red-50 p-3 text-sm text-red-700">
            {error.message}{" "}
            <button type="button" onClick={() => regenerate()} className="underline">
              Try again
            </button>
          </div>
        )}
      </div>

      <form
        onSubmit={(e) => {
          e.preventDefault();
          if (!input.trim() || busy) return;
          sendMessage({ text: input });
          setInput("");
        }}
        className="flex gap-2"
      >
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          placeholder="Ask about your metrics"
          aria-label="Message"
          className="min-w-0 flex-1 rounded-xl border px-3 py-2"
        />
        {busy ? (
          <button type="button" onClick={() => stop()} className="rounded-xl border px-4">
            Stop
          </button>
        ) : (
          <button type="submit" className="rounded-xl bg-neutral-900 px-4 text-white">
            Send
          </button>
        )}
      </form>
    </div>
  );
}