SuperAPI AI 工具集

ai-sdk-ui-v7

前端与建站

查看项目

更新于 10-27 16:25

技能介绍

用途

该技能面向使用 Vercel AI SDK v7 构建 React 聊天界面的场景,也可用于排查 AI SDK v7 聊天 UI 的相关问题。其作用范围限定在 @ai-sdk/react 的 useChat 以及来自 ai 包的 DefaultChatTransport。技能明确不覆盖后端生成部分,后端相关内容参见 ai-sdk-core。

主要能力与原则

  • useChat 从 @ai-sdk/react 导入;DefaultChatTransport 从 ai 导入。
  • 使用本地输入状态;通过 sendMessage({ text }) 发送消息;使用 status 而非 isLoading;渲染 message.parts。
  • 服务端部分参见 ai-sdk-core。处理器使用 createUIMessageStreamResponse 与 toUIMessageStream({ stream: result.stream })。仅当任务与流式传输或 SDK 无关时,才保留已弃用的 toUIMessageStreamResponse()。
  • 不要凭记忆编写 useChat。应先检索 node_modules/@ai-sdk/react/docs/ 和 node_modules/ai/docs/,否则参考 https://ai-sdk.dev/docs/ai-sdk-ui/chatbot。
  • 聊天 HTTP 可能使用 Fastify;当 URL 不是 /api/chat 时需传入 transport。

使用方式与约束

必须(MUST):

  • 当端点不是 /api/chat 时,使用 DefaultChatTransport({ api })。
  • 当 status !== 'ready' 时禁用发送。

应避免(AVOID):

  • import { useChat } from 'ai/react'。
  • toDataStreamResponse / pipeDataStreamToResponse。
  • v5 之前的 handleInputChange / handleSubmit / useAssistant。

适用场景

适用于实现 AI SDK v7 聊天 UI、排查相关问题的前端开发场景。技能假设 SDK 主版本为 ai ^7,@ai-sdk/react 为独立包主版本,文件夹遵循 ai。该技能与 fastify、next 互补使用。

模板

提供以下模板:

  • use-chat-basic.tsx
  • nextjs-api-route.ts
  • nextjs-chat-app-router.tsx

限制

该技能不覆盖后端生成(见 ai-sdk-core)。关于收费、价格、平台、效果等具体信息,资料中暂未提供。