Streaming Responses in Next.js
Why stream
Long responses feel slow if the user waits for the entire text before seeing anything. Streaming sends tokens as they're generated, so the UI can render text progressively — dramatically improving perceived speed.
Enabling streaming with the SDK
Call .messages.stream({...}) instead of .create(). The SDK returns an async iterable of events. In a Next.js route handler, pipe this into a ReadableStream and return it as the response body with text/event-stream or plain chunked text.
Consuming the stream on the client
On the client, use fetch() with a ReadableStream reader (or a library like ai from Vercel) to read chunks and append them to state as they arrive, creating the classic "typing" effect.
Key Takeaways
- Streaming improves perceived speed for long AI responses.
- Use `.messages.stream()` instead of `.create()` for token-by-token output.
- Pipe the stream into a `ReadableStream` response in your API route.
- Client-side, read chunks progressively to render a typing effect.
Add streaming to your API route
Modify your `/api/ask` route from Lesson 2 to stream the response, and build a simple client page that displays text as it streams in.