Streaming AI Responses in Next.js: Claude, OpenAI, and the Vercel AI SDK

Why Most AI Streaming Implementations Break You call the OpenAI or Claude API with stream: true. The response streams. But your UI freezes, chunks arrive garbled, or the stream silently cuts off. Here's the correct way. The Streaming API Route // app/api/chat/route.ts import { NextRequest } from 'next/server' import Anthropic from '@anthropic-ai/sdk' const anthropic = new Anthropic() export async function POST(req: NextRequest) { const { messages } = await req.json() const stream = anthropic.messages.stream({ model: 'claude-sonnet-4-6', max_tokens: 2048, messages, }) // Return a ReadableStream return new Response( new ReadableStream({ async start(controller) { for await (const chunk of stream) { if (chunk.type === 'content_block_delta' && chunk.delta.type === 'text_delta') { const text = chunk.delta.text controller.enqueue(new TextEncoder().encode(text)) } } controller.close() } }), { headers: { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'ke