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