AI SDK UI - 前端React Hooks

用于AI驱动用户界面的前端React Hooks，基于Vercel AI SDK v6。

版本: AI SDK v6.0.42 (稳定版)
框架: React 18+/19, Next.js 14+/15+
最后更新: 2026-01-20

AI SDK v6 稳定版 (2026年1月)

状态: 稳定版发布
最新版本: ai@6.0.42, @ai-sdk/react@3.0.44, @ai-sdk/openai@3.0.7
迁移: 从v5到v6的破坏性变更极少

v6中的新UI特性

1. 消息部分结构 (破坏性变更)
在v6中，消息内容现在通过.parts数组访问，而非.content：

tsx
// ❌ v5 (旧版)
{messages.map(m => (

{m.content}

))}

// ✅ v6 (新版)
{messages.map(m => (

{m.parts.map((part, i) => {
if (part.type === text) return {part.text};
if (part.type === tool-invocation) return ;
if (part.type === file) return ;
return null;
})}

))}

部分类型:

- text - 文本内容，包含.text属性
tool-invocation - 工具调用，包含.toolName、.args、.result
file - 文件附件，包含.mimeType、.data
reasoning - 模型推理（可用时）
source - 来源引用

3. Agent集成
使用InferAgentUIMessage实现与agent的类型安全消息传递：

tsx
import { useChat } from @ai-sdk/react;
import type { InferAgentUIMessage } from ai;
import { myAgent } from ./agent;

export default function AgentChat() {
const { messages, sendMessage } = useChat>({
api: /api/chat,
});
// 消息现在会根据agent模式进行类型检查
}

4. 工具审批工作流 (人机协同)
在执行工具前请求用户确认：

tsx
import { useChat } from @ai-sdk/react;
import { useState } from react;

export default function ChatWithApproval() {
const { messages, sendMessage, addToolApprovalResponse } = useChat({
api: /api/chat,
});

const handleApprove = (toolCallId: string) => {
addToolApprovalResponse({
toolCallId,
approved: true, // 或false以拒绝
});
};

return (

{messages.map(message => (

{message.toolInvocations?.map(tool => (
tool.state === awaiting-approval && (

批准工具调用: {tool.toolName}?

)
))}

))}

);
}

5. 自动提交功能
处理审批后自动继续对话：

tsx
import { useChat, lastAssistantMessageIsCompleteWithApprovalResponses } from @ai-sdk/react;

export default function AutoSubmitChat() {
const { messages, sendMessage } = useChat({
api: /api/chat,
sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithApprovalResponses,
// 所有审批响应提供后自动重新提交
});
}

6. 聊天中的结构化输出
在工具调用同时生成结构化数据（之前仅在useObject中可用）：

tsx
import { useChat } from @ai-sdk/react;
import { z } from zod;

const schema = z.object({
summary: z.string(),
sentiment: z.enum([positive, neutral, negative]),
});

export default function StructuredChat() {
const { messages, sendMessage } = useChat({
api: /api/chat,
// 服务器现在可以随聊天消息流式传输结构化输出
});
}

useChat Hook - v4 → v5 破坏性变更

重要: useChat在v5中不再管理输入状态！

v4 (旧版 - 请勿使用):
tsx
const { messages, input, handleInputChange, handleSubmit, append } = useChat();

v5 (新版 - 正确方式):
tsx
const { messages, sendMessage } = useChat();
const [input, setInput] = useState();

v5变更摘要:

1. 输入管理已移除: input、handleInputChange、handleSubmit不再存在
append() → sendMessage(): 发送消息的新方法
onResponse已移除: 改用onFinish
initialMessages → 受控模式: 使用messages属性实现完全控制
maxSteps已移除: 仅在服务端处理

完整迁移指南请参见references/use-chat-migration.md。

useAssistant Hook (已弃用)

⚠️ 弃用通知: useAssistant自AI SDK v5起已弃用。OpenAI Assistants API v2
将于2026年8月26日停止服务。对于新项目，请使用useChat配合自定义后端逻辑。
迁移指南请参见openai-assistants技能。

与OpenAI兼容的助手API交互，自动管理UI状态。

导入:
tsx
import { useAssistant } from @ai-sdk/react;

基本用法:
tsx
use client;
import { useAssistant } from @ai-sdk/react;
import { useState, FormEvent } from react;

export default function AssistantChat() {
const { messages, sendMessage, isLoading, error } = useAssistant({
api: /api/assistant,
});
const [input, setInput] = useState();

const handleSubmit = (e: FormEvent) => {
e.preventDefault();
sendMessage({ content: input });
setInput();
};

return (

{messages.map(m => (

{m.role}: {m.content}

))}

);
}

使用场景:

- 构建OpenAI Assistant驱动的UI
管理助手线程和运行
流式传输助手响应并管理UI状态
文件搜索和代码解释器集成

完整API参考请参见官方文档: https://ai-sdk.dev/docs/reference/ai-sdk-ui/use-assistant

常见UI错误及解决方案

完整文档请参见references/top-ui-errors.md。快速参考:

1. useChat无法解析流

错误: SyntaxError: Unexpected token in JSON at position X

原因: API路由未返回正确的流格式。

解决方案:
typescript
// ✅ 正确
return result.toDataStreamResponse();

// ❌ 错误
return new Response(result.textStream);

2. useChat无响应

原因: API路由未正确流式传输。

解决方案:
typescript
// App Router - 使用toDataStreamResponse()
export async function POST(req: Request) {
const result = streamText({ / ... / });
return result.toDataStreamResponse(); // ✅
}

// Pages Router - 使用pipeDataStreamToResponse()
export default async function handler(req, res) {
const result = streamText({ / ... / });
return result.pipeDataStreamToResponse(res); // ✅
}

ai-sdk-uiAI SDK界面

ai-sdk-ui

AI SDK UI - Frontend React Hooks

AI SDK v6 Stable (January 2026)

New UI Features in v6

useChat Hook - v4 → v5 Breaking Changes

useAssistant Hook (Deprecated)

Top UI Errors & Solutions

1. useChat Failed to Parse Stream

2. useChat No Response

3. Streaming Not Working When Deployed

4. Stale Body Values with useChat

5. React Maximum Update Depth

Streaming Best Practices

Performance

UX Patterns

React Strict Mode Considerations

When to Use This Skill

Use ai-sdk-ui When:

Don't Use When:

Related Skills:

Package Versions

Links to Official Documentation

Templates

Reference Documents

AI SDK UI - 前端React Hooks

AI SDK v6 稳定版 (2026年1月)

v6中的新UI特性

useChat Hook - v4 → v5 破坏性变更

useAssistant Hook (已弃用)

常见UI错误及解决方案

1. useChat无法解析流

2. useChat无响应

3. 部署后流式传输不工作

标签

通过对话安装

方式一：安装 SkillHub 和技能

方式二：设置 SkillHub 为优先技能安装源

通过命令行安装

下载

ai-sdk-uiAI SDK界面

ai-sdk-ui

AI SDK UI - Frontend React Hooks

AI SDK v6 Stable (January 2026)

New UI Features in v6

useChat Hook - v4 → v5 Breaking Changes

useAssistant Hook (Deprecated)

Top UI Errors & Solutions

1. useChat Failed to Parse Stream

2. useChat No Response

3. Streaming Not Working When Deployed

4. Stale Body Values with useChat

5. React Maximum Update Depth

Streaming Best Practices

Performance

UX Patterns

React Strict Mode Considerations

When to Use This Skill

Use ai-sdk-ui When:

Don't Use When:

Related Skills:

Package Versions

Links to Official Documentation

Templates

Reference Documents

AI SDK UI - 前端React Hooks

AI SDK v6 稳定版 (2026年1月)

v6中的新UI特性

useChat Hook - v4 → v5 破坏性变更

useAssistant Hook (已弃用)

常见UI错误及解决方案

1. useChat无法解析流

2. useChat无响应

3. 部署后流式传输不工作

标签

通过对话安装

方式一：安装 SkillHub 和技能

方式二：设置 SkillHub 为优先技能安装源

通过命令行安装

下载

相关推荐

self-improvement

self-improvement

self-improvement

self-improvement