Phase 4 — Production & Depth · Lesson 45 · 20 XP
Streaming UIs with the Vercel AI SDK
Handling streaming tokens, tool calls, and multi-turn state correctly in a frontend by hand is fiddly — a plain fetch().then(r => r.json()) call waits for the entire response and can't show partial output at all. The Vercel AI SDK provides hooks (like useChat) purpose-built for this: streaming text into the UI as it arrives, provider-agnostic model calls, and built-in handling for tool-call state.
This connects Lesson 21's streaming concept to an actual product UI. The API key stays on your server route, never in browser code — the browser calls your route, and your route calls the model provider, so the key is never exposed to anyone inspecting network requests in their browser.
Exercise
Build a minimal chat UI (Next.js + Vercel AI SDK, or a frontend stack of your choice) that streams a model's response token-by-token into the page, reusing a backend route from an earlier lesson.
Check yourself
1. What problem does a streaming-aware frontend hook solve that a plain fetch().then(r => r.json()) call can't?
2. Why keep the API key on the server route instead of calling the model provider directly from the browser?
Multimodal: vision, speech, documents
Answer the check-yourself questions to unlock this