Deploying an AI App to Vercel

// 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(); }

// 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> ); }

# deploy npm i -g vercel vercel link vercel env add ANTHROPIC_API_KEY production vercel --prod