Vercel AI SDK v6 UI 开发指南：React 聊天界面、流式传输与工具批准工作流

AI SDK v6 UI by blockmatic/basilic

88 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/blockmatic/basilic --skill 'AI SDK v6 UI'

AI/机器学习 React JavaScript 框架

🇨🇳中文介绍

技能：ai-sdk-ui

适用范围

适用于：使用 Vercel AI SDK v5/v6 的 React 聊天界面、流式 UI 模式、工具批准工作流、智能体集成
不涵盖：后端 AI 实现（请参阅 ai-sdk-core）、生成式 UI/RSC

前提假设

AI SDK v5.0.99+（稳定版）或 v6.0.0-beta.108+（测试版）
React 18+（支持 React 19）
Next.js 14+（13.4+ 也可工作）
@ai-sdk/react 包

核心原则

使用 useChat 处理带流式传输的聊天界面
使用 useCompletion 处理文本补全（非聊天场景）
使用 useObject 处理结构化数据生成
使用 useAssistant 处理 OpenAI 兼容的助手 API
使用流式传输以获得更好的用户体验（实时显示到达的令牌）

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

相关 Skills

find-skills 技能搜索工具 - Vercel Labs 开源智能体技能包管理器

812,900 周安装

React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性

109,600 周安装

AI Elements：基于shadcn/ui的AI原生应用组件库，快速构建对话界面

60,400 周安装

AI 代码实施计划编写技能 | 自动化开发任务分解与 TDD 流程规划工具

45,700 周安装

使用 addToolApprovalResponse（v6）处理工具批准工作流

对于动态变化的 body 值，使用受控模式（避免值过时）

在 App Router 中使用 toDataStreamResponse()，在 Pages Router 中使用 pipeDataStreamToResponse()

使用流式响应（toDataStreamResponse() 或 pipeDataStreamToResponse()）
当 body 值发生变化时，使用受控模式（使用带 data 参数的 sendMessage，而非 body 选项）
处理加载状态（isLoading）和错误（error）

使用 stop 函数允许用户取消生成
在流式传输期间自动滚动到最新消息
在生成期间显示加载指示器
使用 InferAgentUIMessage（v6）进行类型安全的智能体集成

对动态值使用 body 选项（会导致值过时）
非流式响应（用户体验差）
在 useEffect 中出现无限循环（仅依赖 messages，而非回调函数）
混合使用 v5 和 v6 API 而未进行迁移

使用 ai-sdk-core 进行后端实现
与 nextjs 的 App Router 和 Pages Router 协同工作
使用 Zod 进行模式验证（请参阅 typescript）

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>
  )
}

工具批准（v6）

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

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

// 处理批准
addToolApprovalResponse({
  toolCallId: 'id',
  approved: true,
})

详细示例请参阅模板和 Next.js 集成。

Next.js 集成 - App Router 和 Pages Router 模式
流式传输模式 - UI 流式传输最佳实践
常见 UI 错误 - 常见错误解决方案

🇺🇸English

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

Weekly Installs

Repository

blockmatic/basilic

GitHub Stars

First Seen

Jan 1, 1970

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

超能力技能使用指南：AI助手技能调用优先级与工作流程详解

45,100 周安装