Stream Text

Streaming Real-time AI SDK

Stream text responses in real-time for better user experience. This recipe shows you how to build a responsive chat interface using the Vercel AI SDK's streaming capabilities.

Overview

Streaming is essential for building responsive AI applications. Instead of waiting for the complete response, users see text appearing character by character, providing immediate feedback and a more engaging experience.

This recipe uses the Chat class from @ai-sdk/svelte which manages conversation state and provides reactive updates, making it easy to build chat interfaces in Svelte 5.

Demo

Send a message to start the conversation

Client Component

The client component uses the Chat class to manage messages and handle streaming. It includes a loading indicator that shows skeleton placeholders while waiting for the assistant's response.

+page.svelte

Server Endpoint

The server endpoint uses streamText to generate responses and toUIMessageStreamResponse() to stream them back to the client in a format the Chat class can consume.

src/routes/api/cookbook/stream-text/+server.ts

Key Concepts

Chat Class

Manages conversation state and provides reactive updates. Access messages via chat.messages and send new messages with chat.sendMessage().

Message Parts

Each message contains parts (text, tools, etc.) that can be rendered individually. This allows for rich message content including tool calls and structured data.

Stream Status

Use chat.status to check if the stream is active. Values include "idle", "streaming", and "error".