AI SDK UI React Hooks：Vercel AI SDK v6 前端开发与智能体集成指南

ai-sdk-ui by jezweb/claude-skills

517 周安装量

670 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/jezweb/claude-skills --skill ai-sdk-ui

AI/机器学习开发 JavaScript 框架

🇨🇳中文介绍

AI SDK UI - 前端 React Hooks

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

版本 : 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：

// ❌ v5 (旧版)
{messages.map(m => (
  <div key={m.id}>{m.content}</div>
))}

// ✅ v6 (新版)
{messages.map(m => (
  <div key={m.id}>
    {m.parts.map((part, i) => {
      if (part.type === 'text') return <span key={i}>{part.text}</span>;
      if (part.type === 'tool-invocation') return <ToolCall key={i} tool={part} />;
      if (part.type === 'file') return <FilePreview key={i} file={part} />;
      return null;
    })}
  </div>
))}

广告位招租

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

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

联系我们

useChat Hook - v4 → v5 破坏性变更

重要提示：在 v5 中，useChat 不再管理输入状态！

v4 (旧版 - 请勿使用):

const { messages, input, handleInputChange, handleSubmit, append } = useChat();

<form onSubmit={handleSubmit}>
  <input value={input} onChange={handleInputChange} />
</form>

v5 (新版 - 正确):

const { messages, sendMessage } = useChat();
const [input, setInput] = useState('');

<form onSubmit={(e) => {
  e.preventDefault();
  sendMessage({ content: input });
  setInput('');
}}>
  <input value={input} onChange={(e) => setInput(e.target.value)} />
</form>

v5 变更总结:

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

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

useAssistant Hook (已弃用)

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

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

import { useAssistant } from '@ai-sdk/react';

'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 (
    <div>
      {messages.map(m => (
        <div key={m.id}>
          <strong>{m.role}:</strong> {m.content}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          disabled={isLoading}
        />
      </form>
      {error && <div>{error.message}</div>}
    </div>
  );
}

构建 OpenAI 助手驱动的 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 路由未返回正确的流格式。

// ✅ 正确
return result.toDataStreamResponse();

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

2. useChat 无响应

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

// 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); // ✅
}

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

原因 : 部署平台缓冲响应。

解决方案 : Vercel 自动检测流式传输。其他平台可能需要配置。

4. useChat 的陈旧 body 值

原因 : body 选项仅在首次渲染时捕获。

// ❌ 错误 - body 仅捕获一次
const { userId } = useUser();
const { messages } = useChat({
  body: { userId },  // 陈旧！
});

// ✅ 正确 - 使用受控模式
const { userId } = useUser();
const { messages, sendMessage } = useChat();

sendMessage({
  content: input,
  data: { userId },  // 每次发送时都是新鲜的
});

5. React 最大更新深度

原因 : useEffect 中的无限循环。

// ❌ 错误
useEffect(() => {
  saveMessages(messages);
}, [messages, saveMessages]); // saveMessages 触发重新渲染！

// ✅ 正确
useEffect(() => {
  saveMessages(messages);
}, [messages]); // 仅依赖于 messages

更多常见错误（共记录了 18 个）请参阅 references/top-ui-errors.md。

流式传输最佳实践

始终使用流式传输以获得更好的用户体验:

// ✅ 良好 - 流式传输（显示到达的令牌）
const { messages } = useChat({ api: '/api/chat' });

// ❌ 差 - 非流式传输（用户等待完整响应）
const response = await fetch('/api/chat', { method: 'POST' });

显示加载状态:

{isLoading && <div>AI 正在输入...</div>}

提供停止按钮:

{isLoading && <button onClick={stop}>停止</button>}

自动滚动到最新消息:

useEffect(() => {
  messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
}, [messages]);

加载时禁用输入:

<input disabled={isLoading} />

全面的最佳实践请参阅 references/streaming-patterns.md。

React 严格模式注意事项

React 严格模式有意双次调用 effect 以捕获错误。当在 effect 中使用 useChat 或 useCompletion 时（自动恢复、初始消息），请防止双重执行，以避免重复的 API 调用和令牌浪费。

'use client';
import { useChat } from '@ai-sdk/react';
import { useEffect } from 'react';

export default function Chat() {
  const { messages, sendMessage, resumeStream } = useChat({
    api: '/api/chat',
    resume: true,
  });

  useEffect(() => {
    // ❌ 在严格模式下触发两次 → 两个并发流
    sendMessage({ content: 'Hello' });
    // 或
    resumeStream();
  }, []);
}

// ✅ 使用 ref 跟踪执行
import { useRef } from 'react';

const hasSentRef = useRef(false);

useEffect(() => {
  if (hasSentRef.current) return;
  hasSentRef.current = true;

  sendMessage({ content: 'Hello' });
}, []);

// 特别是对于 resumeStream：
const hasResumedRef = useRef(false);

useEffect(() => {
  if (!autoResume || hasResumedRef.current || status === 'streaming') return;
  hasResumedRef.current = true;
  resumeStream();
}, [autoResume, resumeStream, status]);

为什么会发生这种情况: React 严格模式双次调用 effect 以暴露副作用。SDK 不防止并发请求，因此两次调用都会创建单独的流，这些流会争夺状态更新。

影响: 重复消息、令牌使用量翻倍、竞争条件导致 TypeError: "Cannot read properties of undefined (reading 'state')"。

何时使用此技能

在以下情况下使用 ai-sdk-ui:

构建 React 聊天界面
在 UI 中实现 AI 补全
将 AI 响应流式传输到前端
构建 Next.js AI 应用程序
处理聊天消息状态
在 UI 中显示工具调用
管理带有 AI 的文件附件
从 v4 迁移到 v5（UI hooks）
遇到 useChat/useCompletion 错误

不要在以下情况下使用:

需要后端 AI 功能 → 改用 ai-sdk-core
构建非 React 前端（Svelte、Vue）→ 查看官方文档
需要生成式 UI / RSC → 参见 https://ai-sdk.dev/docs/ai-sdk-rsc
构建原生应用程序 → 需要不同的 SDK

ai-sdk-core - 后端文本生成、结构化输出、工具、智能体
结合两者以构建全栈 AI 应用程序

稳定版 (v6 - 推荐):

{
  "dependencies": {
    "ai": "^6.0.8",
    "@ai-sdk/react": "^3.0.6",
    "@ai-sdk/openai": "^3.0.2",
    "react": "^18.3.0",
    "zod": "^3.24.2"
  }
}

{
  "dependencies": {
    "ai": "^5.0.99",
    "@ai-sdk/react": "^1.0.0",
    "@ai-sdk/openai": "^2.0.68"
  }
}

AI SDK v6.0.6 (稳定版，2026年1月) - 推荐用于新项目
AI SDK v5.x (旧版) - 仍受支持但不接收新功能
支持 React 18.3+ / React 19
推荐 Next.js 14+/15+
Zod 3.24.2+ 用于模式验证

核心 UI Hooks:

高级主题 (仅链接):

迁移与故障排除:

此技能在 templates/ 中包含以下模板：

use-chat-basic.tsx - 带有手动输入的基本聊天（v5 模式）
use-chat-tools.tsx - 带有工具调用 UI 渲染的聊天
use-chat-attachments.tsx - 文件附件支持
use-completion-basic.tsx - 基本文本补全
use-object-streaming.tsx - 流式结构化数据
nextjs-chat-app-router.tsx - Next.js App Router 完整示例
nextjs-chat-pages-router.tsx - Next.js Pages Router 完整示例
nextjs-api-route.ts - 适用于 App 和 Pages Router 的 API 路由
message-persistence.tsx - 保存/加载聊天历史记录
custom-message-renderer.tsx - 带有 markdown 的自定义消息组件
package.json - 依赖项模板

请参阅 references/ 中的：

use-chat-migration.md - 完整的 v4→v5 迁移指南
streaming-patterns.md - UI 流式传输最佳实践
top-ui-errors.md - 18 个常见 UI 错误及解决方案
nextjs-integration.md - Next.js 设置模式
links-to-official-docs.md - 官方文档的有序链接

生产环境测试 : WordPress Auditor (https://wordpress-auditor.webfonts.workers.dev) 最后验证 : 2026-01-20 | 技能版本 : 3.1.0 | 变更 : 更新至 AI SDK v6.0.42 (+19 个补丁)。添加了 React 严格模式部分。扩展了问题 #7（陈旧 body）并提供了 3 种解决方法。添加了 6 个新问题：resume+onFinish 的 TypeError (#13)、并发 sendMessage 状态损坏 (#14)、工具批准回调边缘情况 (#15)、早期停止时的 ZodError (#16)、convertToModelMessages 工具批准错误 (#17)、未定义 id 无限循环 (#18)。错误数量：12→18。

🇺🇸English

AI SDK UI - Frontend React Hooks

Frontend React hooks for AI-powered user interfaces with Vercel AI SDK v6.

Version : AI SDK v6.0.42 (Stable) Framework : React 18+/19, Next.js 14+/15+ Last Updated : 2026-01-20

AI SDK v6 Stable (January 2026)

Status: Stable Release Latest: ai@6.0.42, @ai-sdk/react@3.0.44, @ai-sdk/openai@3.0.7 Migration: Minimal breaking changes from v5 → v6

New UI Features in v6

1. Message Parts Structure (Breaking Change) In v6, message content is now accessed via .parts array instead of .content:

// ❌ v5 (OLD)
{messages.map(m => (
  <div key={m.id}>{m.content}</div>
))}

// ✅ v6 (NEW)
{messages.map(m => (
  <div key={m.id}>
    {m.parts.map((part, i) => {
      if (part.type === 'text') return <span key={i}>{part.text}</span>;
      if (part.type === 'tool-invocation') return <ToolCall key={i} tool={part} />;
      if (part.type === 'file') return <FilePreview key={i} file={part} />;
      return null;
    })}
  </div>
))}

Part Types:

text - Text content with .text property
tool-invocation - Tool calls with .toolName, .args, .result
file - File attachments with .mimeType, .data
reasoning - Model reasoning (when available)
source - Source citations

3. Agent Integration Type-safe messaging with agents using InferAgentUIMessage<typeof agent>:

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

export default function AgentChat() {
  const { messages, sendMessage } = useChat<InferAgentUIMessage<typeof myAgent>>({
    api: '/api/chat',
  });
  // messages are now type-checked against agent schema
}

4. Tool Approval Workflows (Human-in-the-Loop) Request user confirmation before executing tools:

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,  // or false to deny
    });
  };

  return (
    <div>
      {messages.map(message => (
        <div key={message.id}>
          {message.toolInvocations?.map(tool => (
            tool.state === 'awaiting-approval' && (
              <div key={tool.toolCallId}>
                <p>Approve tool call: {tool.toolName}?</p>
                <button onClick={() => handleApprove(tool.toolCallId)}>
                  Approve
                </button>
                <button onClick={() => addToolApprovalResponse({
                  toolCallId: tool.toolCallId,
                  approved: false
                })}>
                  Deny
                </button>
              </div>
            )
          ))}
        </div>
      ))}
    </div>
  );
}

5. Auto-Submit Capability Automatically continue conversation after handling approvals:

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

export default function AutoSubmitChat() {
  const { messages, sendMessage } = useChat({
    api: '/api/chat',
    sendAutomaticallyWhen: lastAssistantMessageIsCompleteWithApprovalResponses,
    // Automatically resubmit after all approval responses provided
  });
}

6. Structured Output in Chat Generate structured data alongside tool calling (previously only available in useObject):

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',
    // Server can now stream structured output with chat messages
  });
}

useChat Hook - v4 → v5 Breaking Changes

CRITICAL: useChat no longer manages input state in v5!

v4 (OLD - DON'T USE):

const { messages, input, handleInputChange, handleSubmit, append } = useChat();

<form onSubmit={handleSubmit}>
  <input value={input} onChange={handleInputChange} />
</form>

v5 (NEW - CORRECT):

const { messages, sendMessage } = useChat();
const [input, setInput] = useState('');

<form onSubmit={(e) => {
  e.preventDefault();
  sendMessage({ content: input });
  setInput('');
}}>
  <input value={input} onChange={(e) => setInput(e.target.value)} />
</form>

Summary of v5 Changes:

Input management removed : input, handleInputChange, handleSubmit no longer exist
append() → sendMessage(): New method for sending messages
onResponse removed: Use onFinish instead
initialMessages → controlled mode: Use messages prop for full control
maxSteps removed: Handle on server-side only

See references/use-chat-migration.md for complete migration guide.

useAssistant Hook (Deprecated)

⚠️ Deprecation Notice : useAssistant is deprecated as of AI SDK v5. OpenAI Assistants API v2 will sunset on August 26, 2026. For new projects, use useChat with custom backend logic instead. See the openai-assistants skill for migration guidance.

Interact with OpenAI-compatible assistant APIs with automatic UI state management.

Import:

import { useAssistant } from '@ai-sdk/react';

Basic Usage:

'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 (
    <div>
      {messages.map(m => (
        <div key={m.id}>
          <strong>{m.role}:</strong> {m.content}
        </div>
      ))}
      <form onSubmit={handleSubmit}>
        <input
          value={input}
          onChange={(e) => setInput(e.target.value)}
          disabled={isLoading}
        />
      </form>
      {error && <div>{error.message}</div>}
    </div>
  );
}

Use Cases:

Building OpenAI Assistant-powered UIs
Managing assistant threads and runs
Streaming assistant responses with UI state management
File search and code interpreter integrations

See official docs for complete API reference: https://ai-sdk.dev/docs/reference/ai-sdk-ui/use-assistant

Top UI Errors & Solutions

See references/top-ui-errors.md for complete documentation. Quick reference:

1. useChat Failed to Parse Stream

Error : SyntaxError: Unexpected token in JSON at position X

Cause : API route not returning proper stream format.

Solution :

// ✅ CORRECT
return result.toDataStreamResponse();

// ❌ WRONG
return new Response(result.textStream);

2. useChat No Response

Cause : API route not streaming correctly.

Solution :

// App Router - use toDataStreamResponse()
export async function POST(req: Request) {
  const result = streamText({ /* ... */ });
  return result.toDataStreamResponse(); // ✅
}

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

3. Streaming Not Working When Deployed

Cause : Deployment platform buffering responses.

Solution : Vercel auto-detects streaming. Other platforms may need configuration.

4. Stale Body Values with useChat

Cause : body option captured at first render only.

Solution :

// ❌ WRONG - body captured once
const { userId } = useUser();
const { messages } = useChat({
  body: { userId },  // Stale!
});

// ✅ CORRECT - use controlled mode
const { userId } = useUser();
const { messages, sendMessage } = useChat();

sendMessage({
  content: input,
  data: { userId },  // Fresh on each send
});

5. React Maximum Update Depth

Cause : Infinite loop in useEffect.

Solution :

// ❌ WRONG
useEffect(() => {
  saveMessages(messages);
}, [messages, saveMessages]); // saveMessages triggers re-render!

// ✅ CORRECT
useEffect(() => {
  saveMessages(messages);
}, [messages]); // Only depend on messages

See references/top-ui-errors.md for 13 more common errors (18 total documented).

Streaming Best Practices

Performance

Always use streaming for better UX:

// ✅ GOOD - Streaming (shows tokens as they arrive)
const { messages } = useChat({ api: '/api/chat' });

// ❌ BAD - Non-streaming (user waits for full response)
const response = await fetch('/api/chat', { method: 'POST' });

UX Patterns

Show loading states:

{isLoading && <div>AI is typing...</div>}

Provide stop button:

{isLoading && <button onClick={stop}>Stop</button>}

Auto-scroll to latest message:

useEffect(() => {
  messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
}, [messages]);

Disable input while loading:

<input disabled={isLoading} />

See references/streaming-patterns.md for comprehensive best practices.

React Strict Mode Considerations

React Strict Mode intentionally double-invokes effects to catch bugs. When using useChat or useCompletion in effects (auto-resume, initial messages), guard against double execution to prevent duplicate API calls and token waste.

Problem:

'use client';
import { useChat } from '@ai-sdk/react';
import { useEffect } from 'react';

export default function Chat() {
  const { messages, sendMessage, resumeStream } = useChat({
    api: '/api/chat',
    resume: true,
  });

  useEffect(() => {
    // ❌ Triggers twice in strict mode → two concurrent streams
    sendMessage({ content: 'Hello' });
    // or
    resumeStream();
  }, []);
}

Solution:

// ✅ Use ref to track execution
import { useRef } from 'react';

const hasSentRef = useRef(false);

useEffect(() => {
  if (hasSentRef.current) return;
  hasSentRef.current = true;

  sendMessage({ content: 'Hello' });
}, []);

// For resumeStream specifically:
const hasResumedRef = useRef(false);

useEffect(() => {
  if (!autoResume || hasResumedRef.current || status === 'streaming') return;
  hasResumedRef.current = true;
  resumeStream();
}, [autoResume, resumeStream, status]);

Why It Happens: React Strict Mode double-invokes effects to surface side effects. The SDK doesn't guard against concurrent requests, so both invocations create separate streams that fight for state updates.

Impact: Duplicate messages, doubled token usage, race conditions causing TypeError: "Cannot read properties of undefined (reading 'state')".

Source: GitHub Issue #7891, Issue #6166

When to Use This Skill

Use ai-sdk-ui When:

Building React chat interfaces
Implementing AI completions in UI
Streaming AI responses to frontend
Building Next.js AI applications
Handling chat message state
Displaying tool calls in UI
Managing file attachments with AI
Migrating from v4 to v5 (UI hooks)
Encountering useChat/useCompletion errors

Don't Use When:

Need backend AI functionality → Use ai-sdk-core instead
Building non-React frontends (Svelte, Vue) → Check official docs
Need Generative UI / RSC → See https://ai-sdk.dev/docs/ai-sdk-rsc
Building native apps → Different SDK required

Related Skills:

ai-sdk-core - Backend text generation, structured output, tools, agents
Compose both for full-stack AI applications

Package Versions

Stable (v6 - Recommended):

{
  "dependencies": {
    "ai": "^6.0.8",
    "@ai-sdk/react": "^3.0.6",
    "@ai-sdk/openai": "^3.0.2",
    "react": "^18.3.0",
    "zod": "^3.24.2"
  }
}

Legacy (v5):

{
  "dependencies": {
    "ai": "^5.0.99",
    "@ai-sdk/react": "^1.0.0",
    "@ai-sdk/openai": "^2.0.68"
  }
}

Version Notes:

AI SDK v6.0.6 (stable, Jan 2026) - recommended for new projects
AI SDK v5.x (legacy) - still supported but not receiving new features
React 18.3+ / React 19 supported
Next.js 14+/15+ recommended
Zod 3.24.2+ for schema validation

Links to Official Documentation

Core UI Hooks:

AI SDK UI Overview: https://ai-sdk.dev/docs/ai-sdk-ui/overview
useChat: https://ai-sdk.dev/docs/ai-sdk-ui/chatbot
useCompletion: https://ai-sdk.dev/docs/ai-sdk-ui/completion
useObject: https://ai-sdk.dev/docs/ai-sdk-ui/object-generation

Advanced Topics (Link Only):

Generative UI (RSC): https://ai-sdk.dev/docs/ai-sdk-rsc/overview
Stream Protocols: https://ai-sdk.dev/docs/ai-sdk-ui/stream-protocols
Message Metadata: https://ai-sdk.dev/docs/ai-sdk-ui/message-metadata

Next.js Integration:

Next.js App Router: https://ai-sdk.dev/docs/getting-started/nextjs-app-router
Next.js Pages Router: https://ai-sdk.dev/docs/getting-started/nextjs-pages-router

Migration & Troubleshooting:

v4→v5 Migration: https://ai-sdk.dev/docs/migration-guides/migration-guide-5-0
Troubleshooting: https://ai-sdk.dev/docs/troubleshooting
Common Issues: https://ai-sdk.dev/docs/troubleshooting/common-issues

Vercel Deployment:

Vercel Functions: https://vercel.com/docs/functions
Streaming on Vercel: https://vercel.com/docs/functions/streaming

Templates

This skill includes the following templates in templates/:

use-chat-basic.tsx - Basic chat with manual input (v5 pattern)
use-chat-tools.tsx - Chat with tool calling UI rendering
use-chat-attachments.tsx - File attachments support
use-completion-basic.tsx - Basic text completion
use-object-streaming.tsx - Streaming structured data
nextjs-chat-app-router.tsx - Next.js App Router complete example
nextjs-chat-pages-router.tsx - Next.js Pages Router complete example
nextjs-api-route.ts - API route for both App and Pages Router
message-persistence.tsx - Save/load chat history
custom-message-renderer.tsx - Custom message components with markdown
package.json - Dependencies template

Reference Documents

See references/ for:

use-chat-migration.md - Complete v4→v5 migration guide
streaming-patterns.md - UI streaming best practices
top-ui-errors.md - 18 common UI errors with solutions
nextjs-integration.md - Next.js setup patterns
links-to-official-docs.md - Organized links to official docs

Production Tested : WordPress Auditor (https://wordpress-auditor.webfonts.workers.dev) Last verified : 2026-01-20 | Skill version : 3.1.0 | Changes : Updated to AI SDK v6.0.42 (+19 patches). Added React Strict Mode section. Expanded Issue #7 (stale body) with 3 workarounds. Added 6 new issues: TypeError with resume+onFinish (#13), concurrent sendMessage state corruption (#14), tool approval callback edge case (#15), ZodError on early stop (#16), convertToModelMessages tool approval bug (#17), undefined id infinite loop (#18). Error count: 12→18.

Weekly Installs

517

Repository

jezweb/claude-skills

GitHub Stars

650

First Seen

Jan 20, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

claude-code405

opencode359

gemini-cli355

codex323

cursor308

antigravity294

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

106,200 周安装

AI SDK UI React Hooks：Vercel AI SDK v6 前端开发与智能体集成指南

🇨🇳中文介绍

AI SDK UI - 前端 React Hooks

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

v6 中的新 UI 功能

相关 Skills

useChat Hook - v4 → v5 破坏性变更

useAssistant Hook (已弃用)

常见 UI 错误及解决方案

1. useChat 流解析失败

2. useChat 无响应

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

4. useChat 的陈旧 body 值

5. React 最大更新深度

流式传输最佳实践

性能

用户体验模式

React 严格模式注意事项

何时使用此技能

在以下情况下使用 ai-sdk-ui:

不要在以下情况下使用:

相关技能:

包版本

官方文档链接

模板

参考文档

🇺🇸English

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

最新 Skills