Lesson 1169 of 1455
Adding a Chat to Your Next.js App in 10 Minutes with the Vercel AI SDK
`useChat`, a route handler, and one provider key — and your app has streaming AI in it.
Builders · Tools Literacy · ~5 min read
The big idea
The Vercel AI SDK turns 'add AI to my app' from a week of work into an afternoon. `useChat` on the client, a tiny route handler on the server, and a provider key in `.env`. Streaming, tool calls, and structured output all included.
Some examples
- You add `useChat` to a page and have streaming chat working before lunch.
- Switching providers — Anthropic to OpenAI — is one import change with the SDK's adapters.
- `generateObject` with a Zod schema replaces 200 lines of homemade JSON-parsing code.
- Tool calling with the SDK is a single `tools: { }` config instead of custom routing.
Try it!
Spin up a fresh Next.js app, install `ai` and a provider, wire `useChat` to a `/api/chat` route. Ship in an hour.
Key terms in this lesson
Practice this safely
Try this with a school, hobby, or family example where the stakes are low. Use the AI output as a draft you can question, not as the final answer.
- 1Ask AI to explain Vercel AI SDK in plain language, then underline anything that sounds uncertain or too broad.
- 2Give it one detail from "Adding a Chat to Your Next.js App in 10 Minutes with the Vercel AI SDK" and ask for two possible next steps plus one reason each step might be wrong.
- 3Check useChat against a trusted source, teacher, adult, expert, or original document before you use it.
End-of-lesson quiz
Check what stuck
8 questions · Score saves to your progress.
Lesson help
Questions are best handled with a grown-up here.
For this age range, Tendril keeps freeform AI chat paused until parent/guardian consent and child-safe moderation are fully verified. Use the quiz, notes, and related lessons below, or ask a parent, guardian, teacher, or librarian to work through the question with you.
Progress saved locally in this browser. Sign in to sync across devices.
Related lessons
Keep going
Creators · 11 min
OpenAI Realtime API for Voice Agents: Streaming Speech Both Ways
The Realtime API streams speech in and out for low-latency voice agents; understand the latency budget and barge-in design honestly.
Creators · 11 min
Designing Streaming UX That Survives Model Errors
Stream tokens to users without leaving them stuck on a half-message.
Creators · 11 min
AI Streaming vs Block Responses: UX Tradeoffs
Streaming feels fast; block responses are easier to validate. Pick per use case.