ai-sdk-ui

Use Vercel AI SDK's useChat hook in a Next.js client component to build streaming chat interfaces. The hook manages message state, handles bidirectional communication, and integrates with OpenAI-compatible APIs for real-time AI responses without manual fetch management.

Yes, AI SDK supports both routing patterns. The Skill covers implementation guidance for App Router and Pages Router setups, including migration workflows from v4 to v5, so you can adopt streaming hooks regardless of your existing Next.js architecture.

useAssistant and tool-approval workflows let you integrate agent tools into streaming chat. The Skill demonstrates auto-submit patterns and tool invocation handling, enabling users to trigger agent actions directly from the UI with approval controls.

useChat manages multi-turn conversations with message history; useCompletion handles single-request streaming for completions; useObject enables structured output parsing from streaming responses. Choose based on whether you need conversation state, single requests, or typed JSON results.

useObject hook parses and streams structured JSON from AI responses in real time. It validates output against a schema and updates React state incrementally, letting you render partial results as they arrive without waiting for the full response.

The Skill includes v4→v5 migration guidance covering input-management changes and hook updates. Most refactoring is straightforward; the Skill documents breaking changes and patterns so you can upgrade incrementally without rewriting your entire chat interface.