Stream Text with Chat Prompt

Streaming Chat Prompt AI SDK

The best of both worlds: streaming for real-time feedback and chat prompts for context-aware conversations.

Overview

This pattern is the foundation of modern AI chat interfaces. Users see text appear character-by-character (streaming), while the AI maintains full awareness of the conversation history (chat prompts). The Chat class from @ai-sdk/svelte handles all the complexity for you.

Demo

Watch the text stream in real-time. Try asking follow-up questions - the AI remembers context!

Send a message to start the conversation

Server Endpoint

The key is convertToModelMessages() which transforms client messages to the format expected by streamText.

src/routes/api/chat/+server.ts

Client Component

The Chat class handles message management, streaming state, and reactive updates. Just call sendMessage()!

+page.svelte

Key Concepts

convertToModelMessages()

Transforms UIMessage[] (client format) to ModelMessage[] (model format). Essential for combining Chat class with streamText.

toUIMessageStreamResponse()

Returns a streaming response in the format the Chat class expects. Handles all the SSE complexity automatically.

chat.status

Track streaming state: "idle", "streaming", or "error". Use it to disable inputs and show loading states.