vercel · Vercel AI SDK Docs
AI SDK UI: Streaming Custom Data
Implements a pattern for streaming custom non-textual data alongside AI stream responses using the AI SDK UI components.
Derived skill
Files assembled from official documentation
Viewing SKILL.md
AI SDK UI: Streaming Custom Data
Implements a pattern for streaming custom non-textual data alongside AI stream responses using the AI SDK UI components.
When To Use
Use when you need to stream additional structured data or metadata alongside an LLM text response to update the UI in real-time.
Reference Files
| File | Contains | Use For |
|---|---|---|
SKILL.md | Entry point: scope, routing table, and workflow. | Start here. |
docs/ai-sdk-ui-streaming-custom-data-workflow-guide.md | A guide explaining how to implement type-safe custom data streaming alongside model responses using the AI SDK UI. | Questions about a guide explaining how to implement type-safe custom data streaming alongside model responses using the AI SDK UI. |
examples/ai-sdk-ui-streaming-custom-data-typescript.text | A TypeScript code example demonstrating how to define custom data part schemas for streaming UI messages using the AI SDK. | Exact payloads, commands, or snippets shown in A TypeScript code example demonstrating how to define custom data part schemas for streaming UI messages using the AI... |
examples/ai-sdk-ui-streaming-custom-data-typescript-2.text | A TypeScript implementation demonstrating how to use createUIMessageStream and createUIMessageStreamResponse to stream custom data types within the AI SDK UI. | Exact payloads, commands, or snippets shown in A TypeScript implementation demonstrating how to use createUIMessageStream and createUIMessageStreamResponse to strea... |
examples/ai-sdk-ui-streaming-custom-data.text | A text representation of the data-writer syntax used to stream custom data objects with types and IDs in the AI SDK UI. | Exact payloads, commands, or snippets shown in A text representation of the data-writer syntax used to stream custom data objects with types and IDs in the AI SDK UI. |
examples/ai-sdk-ui-streaming-custom-data-2.text | A text representation of the writer.write method calls used to stream custom data objects through the AI SDK UI. | Exact payloads, commands, or snippets shown in A text representation of the writer.write method calls used to stream custom data objects through the AI SDK UI. |
examples/ai-sdk-ui-streaming-custom-data-server-client-implementation.text | A code example demonstrating how to stream custom data notifications from a server to a client using the AI SDK UI useChat hook. | Exact payloads, commands, or snippets shown in A code example demonstrating how to stream custom data notifications from a server to a client using the AI SDK UI us... |
examples/ai-sdk-ui-streaming-custom-data-react-usechat-ondata.text | A React code example demonstrating how to use the onData callback in the useChat hook to intercept and handle streamed custom data parts. | Exact payloads, commands, or snippets shown in A React code example demonstrating how to use the onData callback in the useChat hook to intercept and handle streame... |
examples/ai-sdk-ui-streaming-custom-data-react-component.text | A React component demonstrating how to filter and render custom data parts from a streamed message using the AI SDK UI. | Exact payloads, commands, or snippets shown in A React component demonstrating how to filter and render custom data parts from a streamed message using the AI SDK UI. |
examples/ai-sdk-ui-streaming-custom-data-react-usechat-ondata-2.text | A React client component demonstrating how to use the onData callback in the useChat hook to handle streamed custom data parts. | Exact payloads, commands, or snippets shown in A React client component demonstrating how to use the onData callback in the useChat hook to handle streamed custom d... |
examples/ai-sdk-ui-streaming-custom-data-server-metadata.text | A server-side code example demonstrating how to use toUIMessageStreamResponse to include custom metadata in a streamed AI SDK UI response. | Exact payloads, commands, or snippets shown in A server-side code example demonstrating how to use toUIMessageStreamResponse to include custom metadata in a streame... |
examples/ai-sdk-ui-streaming-custom-data-server-writer.text | A text example demonstrating how to use the writer.write method on the server to stream custom data objects alongside message content. | Exact payloads, commands, or snippets shown in A text example demonstrating how to use the writer.write method on the server to stream custom data objects alongside... |
What This Skill Covers
- It is often useful to send additional data alongside the model's response. For example, you may want to send status information, the message ids after storin...
- Main sections:
Setting Up Type-Safe Data Streaming,Streaming Data from the Server,Types of Streamable Data,Data Parts (Persistent),Sources.
Workflow
- Open the most relevant file under
docs/for the exact documented workflow and wording. - Open
schemas/files for exact structured contracts. - Open
examples/files for concrete requests, commands, snippets, and manifests. - Do not add behavior or configuration that is not present in the attached source files.
Canonical source: https://ai-sdk.dev/docs/ai-sdk-ui/streaming-data