Svelte AI Elements

Stream Text

Streaming Real-time AI SDK

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

Step 1: Create Prompt UI

Start by creating a simple chat interface with an input field and a submit button.

+page.svelte

Step 2: Create API 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