Stream processing delivers an AI response in portions as they become available, rather than waiting for the complete answer. In a chat interface, this reduces the perceived wait when a language model generates text slowly. It improves responsiveness without making the model itself faster. section 3.2 section 2.6
A streaming web response has three moving parts:
- The browser requests a response; the server begins sending chunks as the model produces them instead of holding the entire result. section 3.2.1
- The client processes arriving chunks, maintains the current message, and updates the interface incrementally. section 3.2.2
- Connection management, buffering, and midstream errors need handling. The Vercel AI SDK abstracts much of that work. section 3.2.1
Stream a chat response
In a Next.js POST route, pass the request’s messages to `streamText`, convert its result with `toDataStream()`, and return a `Response` containing that stream. In the React page, replace a custom submission hook with `useChat({ api: '/api' })`: its messages and loading state drive the chat UI as chunks arrive. The example uses `@ai-sdk/google` with Gemini 2.0 Flash and reads its API key from `GEMINI_API_KEY`. section 3.2.3
Listing 3.7 API route for chat application
import { createGoogleGenerativeAI } from '@ai-sdk/google';
import { streamText } from 'ai'; #1
export const dynamic = 'force-dynamic';
const model = createGoogleGenerativeAI ({
apiKey: process.env.GEMINI_API_KEY || '',
});
export async function POST(req) {
const { messages } = await req.json();
const result = await streamText({. #2
model: model('models/gemini-2.0-flash'),
maxTokens: 512,
messages: [
{
role: 'system',
content: "I'm happy to assist you in any way I can.
How can I be of service today?",
},
...messages,
],
});
const stream = result.toDataStream();#3
return new Response(stream, { #4
status: 200,
contentType: 'text/plain; charset=utf-8',
});
}
The API-route listing shows the server-side handoff from `streamText` to an HTTP streaming response. section 3.2.3
For direct processing, `streamText` also exposes a `textStream` that can be consumed with `for await...of`. Choose `useChat` for a conversation with message history; `useCompletion` handles completion from a single prompt. A LangChain.js chain can instead stream results into `createStreamableUI`, updating a rendered message as items arrive. section 3.2.2 section 6.1.2
Streaming makes rendering behavior worth checking: new content can arrive while a user is reading. Keep the scroll anchor correctly placed and leave enough space below the message list so the latest text remains visible. Provide an error boundary for production rendering failures. section 8.1.1
