ai-sdk-ui-v6_skill

Overview

This skill helps you build React chat interfaces with the Vercel AI SDK v5 and v6, focused on streaming UIs, agent integration, and tool approval workflows. It provides patterns, constraints, and practical guidance to avoid common UI issues like stale body values or missing streaming responses.

How this skill works

The skill documents recommended hooks and APIs from @ai-sdk/react (useChat, useCompletion, useObject, useAssistant) and shows how to wire streaming responses into both App Router and Pages Router using toDataStreamResponse() and pipeDataStreamToResponse(). It explains controlled-mode messaging, tool approval via addToolApprovalResponse, and UI patterns for handling isLoading, stop, and error states.

When to use it

• Building a chat UI that streams tokens to the user in real time
• Integrating agents or tools that require user approval during a conversation
• Implementing chat with Vercel AI SDK v5.x or v6 beta in React/Next.js
• Troubleshooting errors like 'useChat failed to parse stream' or 'useChat no response'
• Avoiding stale body values when form inputs change dynamically

Best practices

• Always enable streaming responses (toDataStreamResponse or pipeDataStreamToResponse) for better UX
• Use controlled mode: call sendMessage with data instead of using body options when values change
• Handle isLoading, error, and provide a stop function so users can cancel generation
• Auto-scroll during streaming and render tokens as they arrive to show progress
• Use InferAgentUIMessage (v6) for type-safe agent/tool messages and addToolApprovalResponse for approvals
• Avoid putting dynamic values in the body option to prevent stale values and race conditions

Example use cases

• A chat widget that streams assistant tokens to the UI and allows users to stop generation
• Agent-driven workflows that pause for user tool approval and resume after addToolApprovalResponse
• Migrating a legacy non-streaming chat to streaming with toDataStreamResponse in the App Router
• Fixing 'useChat no response' by adopting controlled sendMessage and checking streaming endpoints
• Building a structured-data assistant using useObject for typed responses