> ## Documentation Index
> Fetch the complete documentation index at: https://docs.delicious-data.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Streaming

> Das Stream-Format der Antworten und wie du es mit useChat oder fetch liest

`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.

```text theme={null}
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:

```tsx ChatView.tsx theme={null}
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.

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

## 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.

```ts theme={null}
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](/partner-api/beispiele_de).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.