Next.js App Router chat route: streamText to UI message stream wiring

TL;DR

Pass abortSignal: req.signal so a client stop() actually cancels the provider request instead of leaving a zombie generation running. Set export const maxDuration = 30 on the route. Route handlers are server-only; the 'use client' component talks to them over HTTP.

When to use

You are seeing this: The App Router chat endpoint has one correct shape in AI SDK 7. Use this skill when you run into "Next.js App Router chat route: streamText to UI message stream wiring".

When not to use

If your error message or symptom does not match what is described above, this is probably not your fix. Search for your exact error text instead of forcing this one to fit.

Versions

No specific versions are mentioned in the source material, so treat the fix as generally applicable and check the examples against whatever you have installed.

The App Router chat endpoint has one correct shape in AI SDK 7. Get any piece wrong and the client either hangs, never aborts, or throws a parse error.

app/api/chat/route.ts:

import { convertToModelMessages, createUIMessageStreamResponse, streamText, toUIMessageStream } from 'ai';

export const maxDuration = 30;

export async function POST(req: Request) { const { messages } = await req.json();

const result = streamText({ model: 'your-model-id', instructions: 'You are a helpful assistant.', messages: await convertToModelMessages(messages), abortSignal: req.signal, });

return createUIMessageStreamResponse({ stream: toUIMessageStream({ stream: result.stream }), }); }

Checklist:

1. messages from useChat are UIMessage objects, not model messages. Convert them with convertToModelMessages, and await it (it is async since v6).
2. Pass abortSignal: req.signal so a client stop() actually cancels the provider request instead of leaving a zombie generation running.
3. In AI SDK 7 the prompt option for system-level text is instructions, not system. The v7 codemod is npx @ai-sdk/codemod v7/rename-system-to-instructions.
4. Return createUIMessageStreamResponse, not a raw Response. The UI message stream protocol is what useChat's DefaultChatTransport parses.
5. Set export const maxDuration = 30 on the route. Vercel serverless functions time out otherwise, and long generations die mid-stream.
6. Never call streamText in a client component or inside the page that renders useChat. Route handlers are server-only; the 'use client' component talks to them over HTTP.

Verified against the live AI SDK docs 2026-09-26. The Next.js App Router quickstart shows the route handler pattern; the chatbot tool-usage guide shows the full POST handler with convertToModelMessages, abortSignal: req.signal, maxDuration = 30, and createUIMessageStreamResponse wrapping toUIMessageStream. The v6 migration guide documents convertToModelMessages becoming async; the v7 migration codemod table documents rename-system-to-instructions.