SuperAPI AI 工具集

ai-sdk-ui-v7

前端与建站

查看项目

更新于 10-15 14:19

技能介绍

用途

该技能面向使用 Vercel AI SDK v7 构建 React 聊天界面的场景,主要处理前端聊天 UI 的实现与问题排查。其范围限定为 @ai-sdk/react 的 useChat 以及来自 ai 包的 DefaultChatTransport。后端生成相关内容不在本技能范围内,需参考 ai-sdk-core。

主要能力与原则

  • 使用来自 @ai-sdk/react 的 useChat,以及来自 ai 的 DefaultChatTransport。
  • 采用本地输入状态管理,通过 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。
  • 当端点不是 /api/chat 时,必须使用 DefaultChatTransport({ api })。
  • 当 status !== 'ready' 时,必须禁用发送。
  • 避免使用 import { useChat } from 'ai/react'。
  • 避免使用 toDataStreamResponse / pipeDataStreamToResponse。
  • 避免使用 v5 之前的 handleInputChange / handleSubmit / useAssistant。

假设与交互

  • 假设 SDK 主版本为 ai ^7;@ai-sdk/react 是独立包,主版本单独管理。文件夹遵循 ai。
  • 聊天 HTTP 可能使用 Fastify;当 URL 不是 /api/chat 时需传入 transport。
  • 与 ai-sdk-core 配合使用,并与 fastify、next 互补。

模板

提供以下模板:use-chat-basic.tsx、nextjs-api-route.ts、nextjs-chat-app-router.tsx。

适用场景与限制

适用于实现 AI SDK v7 聊天 UI 或排查相关问题。不覆盖后端生成。关于收费、价格、平台、效果等具体信息,资料中暂未提供。