How to Add Streaming AI Chat to Any Next.js App

How to Add Streaming AI Chat to Any Next.js App Adding AI chat to a Next.js app has a few non-obvious pieces: streaming responses, client-side rendering of chunks, error handling for API failures, and not exposing your API key to the client. This is the complete pattern. Architecture Client (React) → POST /api/chat → Server (Route Handler) → Claude/OpenAI API → Stream back The API key lives on the server. The client never sees it. Responses stream chunk by chunk for a responsive feel. 1. Route Handler (Server Side) app/api/chat/route.ts: import { NextRequest } from "next/server"; import Anthropic from "@anthropic-ai/sdk"; const anthropic = new Anthropic({ apiKey: process.env.ANTHROPIC_API_KEY!, }); export async function POST(req: NextRequest) { const { messages } = await req.json(); // Validate input if (!Array.isArray(messages) || messages.length === 0) { return new Response("Invalid messages", { status: 400 }); } // Create streaming response const stream = await anthropic.messages.st