Vercel AI SDK 5 streamText: how do you stream LLM chat to React?

// The AI SDK 5 chat pipeline in miniature: model parts -> UI message chunks
// (the shapes toUIMessageStreamResponse sends, as SSE) -> a useChat-style
// reducer that builds message.parts. Stub model, fake clock, no "ai" package.

const words = "It is 18 degrees in Paris right now, mild enough for a light jacket.".split(" ");

// 1) Server: what a streamText result would turn into, one UI chunk per event.
const chunks = [
  { type: "start", messageId: "msg_1" },
  { type: "start-step" },
  { type: "tool-input-start", toolCallId: "call_1", toolName: "getWeather" },
  { type: "tool-input-delta", toolCallId: "call_1", inputTextDelta: '{"city":' },
  { type: "tool-input-delta", toolCallId: "call_1", inputTextDelta: '"Paris"}' },
  { type: "tool-input-available", toolCallId: "call_1", toolName: "getWeather", input: { city: "Paris" } },
  { type: "tool-output-available", toolCallId: "call_1", output: { tempC: 18 } },
  { type: "finish-step" },
  { type: "start-step" },
  { type: "text-start", id: "txt_1" },
  ...words.map((w, i) => ({ type: "text-delta", id: "txt_1", delta: (i ? " " : "") + w })),
  { type: "text-end", id: "txt_1" },
  { type: "finish-step" },
  { type: "finish" },
];
const sse = chunks.map((c) => "data: " + JSON.stringify(c) + "\n\n").join("") + "data: [DONE]\n\n";
console.log("server sent " + chunks.length + " chunks as " + sse.length + " characters of SSE");
console.log("first frame:  " + sse.split("\n\n")[0]);
console.log("a text frame: " + sse.split("\n\n")[11]);

// 2) Client: parse frames and fold them into one assistant UIMessage.
const msg = { id: null, role: "assistant", parts: [] };
const statusLog = ["submitted"];
let status = "submitted";
const setStatus = (s) => { if (s !== status) { status = s; statusLog.push(s); } };
const toolPart = (id) => msg.parts.find((p) => p.toolCallId === id);
const textPart = () => msg.parts[msg.parts.length - 1];

function apply(c) {
  switch (c.type) {
    case "start": msg.id = c.messageId; break;
    case "start-step": msg.parts.push({ type: "step-start" }); break;
    case "tool-input-start": msg.parts.push({ type: "tool-" + c.toolName, toolCallId: c.toolCallId, state: "input-streaming" }); break;
    case "tool-input-delta": break; // a real client may parse partial JSON for a live preview
    case "tool-input-available": Object.assign(toolPart(c.toolCallId), { state: "input-available", input: c.input }); break;
    case "tool-output-available": Object.assign(toolPart(c.toolCallId), { state: "output-available", output: c.output }); break;
    case "text-start": msg.parts.push({ type: "text", text: "", state: "streaming" }); break;
    case "text-delta": textPart().text += c.delta; break;
    case "text-end": textPart().state = "done"; break;
    case "finish": setStatus("ready"); break;
  }
}

// Chunks arrive 10 ms apart starting at t = 400 ms. Count React re-renders
// with no throttle, and with a 50 ms throttle (leading + trailing).
const frames = sse.split("\n\n").filter(Boolean).map((f) => f.slice(6));
let renders = 0, throttled = 0, lastRender = -Infinity, pending = null;
frames.forEach((data, i) => {
  const now = 400 + i * 10;
  if (data === "[DONE]") return;
  if (pending !== null && pending <= now) { throttled++; lastRender = pending; pending = null; }
  apply(JSON.parse(data));
  if (status === "submitted") setStatus("streaming");
  renders++;
  if (now - lastRender >= 50) { throttled++; lastRender = now; } else if (pending === null) pending = lastRender + 50;
});
if (pending !== null) throttled++;

console.log("");
console.log("status: " + statusLog.join(" -> "));
console.log("message.id: " + msg.id);
msg.parts.forEach((p, i) => console.log("parts[" + i + "] " + JSON.stringify(p)));
console.log("");
console.log("re-renders, one per chunk:      " + renders);
console.log("re-renders, 50 ms throttle:     " + throttled);