Deploying an AI App to Vercel

From Localhost to Public URL

Next.js plus the AI SDK plus Vercel gives you a streaming chatbot on the internet in 15 minutes. The trick is getting the streaming route and env vars right the first time.

// app/api/chat/route.ts import { streamText, convertToModelMessages, UIMessage } from "ai"; import { anthropic } from "@ai-sdk/anthropic"; export const maxDuration = 30; export async function POST(req: Request) { const { messages }: { messages: UIMessage[] } = await req.json(); const result = streamText({ model: anthropic("claude-opus-4-7"), system: "You are a helpful assistant.", messages: convertToModelMessages(messages), }); return result.toUIMessageStreamResponse(); }maxDuration = 30 tells Vercel this function may stream for 30s. toUIMessageStreamResponse is what the useChat hook expects.

// app/page.tsx "use client"; import { useState } from "react"; import { useChat } from "@ai-sdk/react"; export default function Chat() { const { messages, sendMessage, status } = useChat(); const [input, setInput] = useState(""); return ( <div> {messages.map((m) => ( <div key={m.id}><b>{m.role}:</b> {m.parts.map((p) => p.type === "text" ? p.text : "").join("")}</div> ))} <form onSubmit={(e) => { e.preventDefault(); sendMessage({ text: input }); setInput(""); }}> <input value={input} onChange={(e) => setInput(e.target.value)} disabled={status !== "ready"} /> </form> </div> ); }useChat manages the message list and streaming state. Pair with AI Elements components for a polished UI.

# deploy npm i -g vercel vercel link vercel env add ANTHROPIC_API_KEY production vercel --prodLink the project, add the secret, and deploy. Preview URLs come free on every push.

The big idea: AI SDK on the server, useChat on the client, Vercel in the middle. Three files and three env vars put a real AI app online.