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!
Server Endpoint
The key is convertToModelMessages() which transforms client messages
to the format expected by streamText.
Client Component
The Chat class handles message management, streaming state, and reactive
updates. Just call sendMessage()!
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.