Streaming

POST /chats/{id}/messages antwortet mit einem Stream im UI Message Stream-Format des Vercel AI SDK. Der Stream enthält den Antworttext, Tool Calls mit ihren Ergebnissen und Freigabe-Anfragen, während der Assistent noch arbeitet.

Format

Server-Sent Events: ein JSON-Objekt pro data:-Zeile, am Ende data: [DONE]. Der Content-Type ist text/plain. Lies den Body als Stream, nicht erst nach Abschluss.

data: {"type":"start","messageId":"msg_1"}
data: {"type":"start-step"}
data: {"type":"tool-input-start","toolCallId":"call_1","toolName":"createReport"}
data: {"type":"tool-input-available","toolCallId":"call_1","toolName":"createReport","input":{...}}
data: {"type":"tool-output-available","toolCallId":"call_1","output":{...}}
data: {"type":"finish-step"}
data: {"type":"start-step"}
data: {"type":"text-start","id":"t1"}
data: {"type":"text-delta","id":"t1","delta":"Letzte Woche "}
data: {"type":"text-delta","id":"t1","delta":"lagen die Verkäufe ..."}
data: {"type":"text-end","id":"t1"}
data: {"type":"finish-step"}
data: {"type":"finish"}
data: [DONE]

Part	Inhalt
`text-start` / `text-delta` / `text-end`	Antworttext
`reasoning-*`	Reasoning des Modells, falls vorhanden. Wird normalerweise nicht angezeigt.
`tool-input-start` / `tool-input-delta` / `tool-input-available`	Tool Call mit Argumenten
`tool-output-available` / `tool-output-error`	Ergebnis oder Fehler des Tools
`tool-approval-request`	Tool, das eine Freigabe des Nutzers braucht (siehe unten)
`start-step` / `finish-step`	Schrittgrenzen. Der Assistent kann mehrere Tool-Runden vor der Antwort machen.
`error`	Fehlermeldung. Danach endet der Stream.

React: `useChat`

@ai-sdk/react parst den Stream und verwaltet die Nachrichtenliste. Transport auf die Messages-Route zeigen lassen, Token in prepareSendMessagesRequest setzen:

ChatView.tsx

import { useChat } from "@ai-sdk/react";
import {
  DefaultChatTransport,
  lastAssistantMessageIsCompleteWithApprovalResponses,
  lastAssistantMessageIsCompleteWithToolCalls,
  type UIMessage,
} from "ai";

const transport = new DefaultChatTransport<UIMessage>({
  api: `${BASE}/chats/${chatId}/messages`,
  prepareSendMessagesRequest: ({ messages, body }) => ({
    headers: { Authorization: `Bearer ${token}` },
    body: { messages, ...body },
  }),
});

const { messages, sendMessage, status, stop, addToolApprovalResponse } = useChat<UIMessage>({
  id: chatId,
  transport,
  messages: initialMessages, // aus GET /chats/{id}
  sendAutomaticallyWhen: (args) =>
    lastAssistantMessageIsCompleteWithToolCalls(args) ||
    lastAssistantMessageIsCompleteWithApprovalResponses(args),
});

sendMessage({ text: "Wie haben sich die Verkäufe letzte Woche entwickelt?" });
sendMessage({ text: prompt.prompt }, { body: { promptId: prompt.id } });

Zum Rendern über message.parts iterieren: Text-Parts durch einen Markdown-Renderer, Tool-Parts als Status-Anzeige.

Die Versionen müssen zum Service passen: ai@6 und @ai-sdk/react@3. Ältere Major-Versionen verwenden ein anderes Stream-Protokoll.

Tool-Freigaben

Manche Tools verändern Daten (Prompt speichern, Automation anlegen, in eine Integration schreiben). Dafür fragt der Assistent vorher nach: Der Tool-Part kommt mit state: "approval-requested", der Stream endet. Antworte mit addToolApprovalResponse. Mit dem sendAutomaticallyWhen von oben schickt useChat den Verlauf erneut und der Assistent macht weiter.

if (part.state === "approval-requested") {
  addToolApprovalResponse({ id: part.approval.id, approved: true });
}

Die Freigabe liegt im Verlauf. Deshalb akzeptiert der Endpoint messages als Body. Ein Client, der nur text sendet, kann keine Tools freigeben.

Ohne SDK

Body an Leerzeilen splitten, data:-Zeilen parsen, text-delta-Parts zusammensetzen. Ein fetch-Beispiel steht unter Beispiele.

Business Intelligence

Bestellautopilot

Account

Integrationen

Partner-API

Format

React: `useChat`

Tool-Freigaben

Ohne SDK

​Format

​React: useChat

​Tool-Freigaben

​Ohne SDK

Format

React: `useChat`

Tool-Freigaben

Ohne SDK