Skill: ai-sdk-ui

Scope

• Applies to: React chat interfaces with Vercel AI SDK v5/v6, streaming UI patterns, tool approval workflows, agent integration

• Does NOT cover: Backend AI implementation (see ai-sdk-core), Generative UI/RSC

Assumptions

• AI SDK v5.0.99+ (stable) or v6.0.0-beta.108+ (beta)

• React 18+ (React 19 supported)

• Next.js 14+ (13.4+ works)

• @ai-sdk/react package

Principles

• Use useChat for chat interfaces with streaming

• Use useCompletion for text completion (non-chat)

• Use useObject for structured data generation

• Use useAssistant for OpenAI-compatible assistant APIs

• Use streaming for better UX (show tokens as they arrive)

• Handle tool approval workflows with addToolApprovalResponse (v6)

• Use controlled mode for dynamic body values (avoid stale values)

• Use toDataStreamResponse() in App Router, pipeDataStreamToResponse() in Pages Router

Constraints

MUST

• Use streaming responses (toDataStreamResponse() or pipeDataStreamToResponse() )

• Use controlled mode when body values change (sendMessage with data instead of body option)

• Handle loading states (isLoading ) and errors (error )

SHOULD

• Use stop function to allow users to cancel generation

• Auto-scroll to latest message during streaming

• Show loading indicators during generation

• Use InferAgentUIMessage (v6) for type-safe agent integration

AVOID

• Using body option with dynamic values (causes stale values)

• Non-streaming responses (poor UX)

• Infinite loops in useEffect (only depend on messages , not callbacks)

• Mixing v5 and v6 APIs without migration

Interactions

• Uses ai-sdk-core for backend implementation

• Works with nextjs App Router and Pages Router

• Uses Zod for schema validation (see typescript)

Patterns

Basic Chat

import { useChat } from '@ai-sdk/react'

export default function Chat() { const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat({ api: '/api/chat', })

return ( <form onSubmit={handleSubmit}> <input value={input} onChange={handleInputChange} /> <button disabled={isLoading}>Send</button> </form> ) }

Tool Approval (v6)

import { useChat } from '@ai-sdk/react'

const { messages, addToolApprovalResponse } = useChat({ api: '/api/chat', })

// Handle approval addToolApprovalResponse({ toolCallId: 'id', approved: true, })

See Templates and Next.js Integration for detailed examples.

References

• Next.js Integration - App Router and Pages Router patterns

• Streaming Patterns - UI streaming best practices

• Top UI Errors - Common error solutions

Resources

• AI SDK UI Docs

• useChat Hook

• Troubleshooting