Why use the Vercel AI SDK instead of calling the provider directly?

The AI SDK gives you a provider-agnostic interface, built-in streaming helpers, and React hooks like useChat that handle the message state and token rendering for you. Switching from OpenAI to Anthropic becomes a one-line provider change instead of a rewrite. You can still call providers directly, but the SDK removes the repetitive plumbing around streaming and state.

Should the AI call run on the edge or in a serverless function?

Edge runtime gives lower latency and streams well, which suits chat. Serverless (Node.js) runtime gives you the full Node API and longer execution limits, which suits heavier work or libraries that need Node built-ins. Start on edge for chat; move a route to Node if you hit an unsupported API. Both deploy the same way on Vercel.

Where do I put my API key so it stays secret?

In .env.local during development and in Vercel's encrypted Environment Variables for production — never in client code or NEXT_PUBLIC_ variables. The route handler runs on the server, so it reads the key from process.env without exposing it to the browser. Anything prefixed NEXT_PUBLIC_ ships to the client, so keys must never carry that prefix.

How does streaming actually reach the browser?

The route handler returns the stream from streamText, and the useChat hook on the client consumes it, appending tokens to the assistant message as they arrive. This is why responses appear word by word instead of after a long pause. The SDK handles the wire format, so you write almost no streaming code yourself.

What will this cost to run?

Hosting a small app on Vercel's free or hobby tier is often free; the real cost is the model API. That scales with conversations per day, tokens per turn, and your provider's price. The planner below estimates monthly model spend from daily chats, turns per chat, and average token sizes so you can budget before launch.

How to Build an AI App with Next.js and Vercel

What you are building

This tutorial takes you from an empty folder to a deployed, streaming AI chat app in a weekend. You scaffold a Next.js App Router project, add the Vercel AI SDK, wire a streaming chat endpoint with the useChat hook so responses appear word by word, and deploy to Vercel with your provider key stored as an encrypted environment variable. The whole stack is serverless: no servers to manage, and the model call runs on the server side so your key never reaches the browser.

How it works

You create a Next.js project and install the AI SDK plus a provider package, then put your provider key in .env.local. A route handler under app/api/chat calls streamText with the conversation messages and returns the stream directly. On the client, a component uses the useChat hook, which posts messages to that route and appends the streamed tokens to the assistant reply as they arrive. When you push to a Git repo connected to Vercel, the route deploys as a serverless or edge function; you add the same provider key under the project’s Environment Variables so production reads it from process.env without ever shipping it to the client. The SDK’s provider abstraction means swapping models later is a one-line change.

Tips and the planner below

Keep your key out of any NEXT_PUBLIC_ variable — that prefix ships to the browser. Run chat routes on the edge runtime for low-latency streaming, and only move a route to the Node.js runtime when you need a Node-only API or longer execution. Use the SDK’s provider abstraction so you can A/B different models without rewrites. Hosting the app itself is often free on Vercel’s hobby tier; the spend that matters is the model API. The planner below estimates your monthly model cost from daily conversations, turns per conversation, and average input and output token sizes.