ai-sdk-ui

Streaming chat UIs in Next.js use the useChat hook from AI SDK v6 to handle real-time message streaming. This Skill provides production-ready React components, API route templates, and patterns for app/router integration that eliminate boilerplate and handle multi-part messages, tool calls, and file attachments out of the box.

Tool calls in AI chat require structured message handling and user approval patterns. This Skill includes templates for both auto-submit and human-in-the-loop approval workflows, showing how to parse tool invocations, render approval UI, and manage conversation state across streaming updates.

Migrating to AI SDK v6 involves breaking changes in the useChat API and message structure. This Skill documents v4→v5/v6 migration steps, error handling patterns, and provides side-by-side reference examples so you can update your chat interface incrementally without losing functionality.

Yes. AI SDK v6 integrates seamlessly with Next.js streaming API routes. This Skill includes complete app/router templates and references showing how to wire the useChat hook to streaming endpoints, handle backpressure, and manage connection state.

The Skill requires React, Next.js, AI SDK (@ai-sdk/react and @ai-sdk/openai), and runs on modern browsers. No additional UI library dependencies are bundled, so you start minimal and add only what you need for your design system.

Yes. The Skill provides 11 ready-to-use templates, 5 reference documents, and a quick-start guide covering basic chat, tool workflows, file uploads, and multi-part messages. Copy a template into your Next.js project and customize from working code.