mcpField
A
ai-sdk-ui-v7

ai-sdk-ui-v7

github.com/blockmatic开发1223 次安装5 周前更新
代码仓库

关于 ai-sdk-ui-v7

面向使用 AI SDK v7 和 `@ai-sdk/react` 的聊天界面开发者，提供 `useChat` 的版本适配指导，涵盖客户端消息处理与流式 UI，并将后端生成工作指向 ai-sdk-core。

主要功能

  1. 01针对版本的 useChat 指导
  2. 02DefaultChatTransport 配置
  3. 03本地输入与消息渲染模式
  4. 04流式 UI 响应指引
  5. 05聊天界面代码模板

适用场景

  1. 01构建 React 聊天界面
  2. 02将聊天连接到自定义 API 端点
  3. 03使用 parts 和 status 渲染消息

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/blockmatic/basilic-skills --skill ai-sdk-ui-v7

安装后在 Claude Code 中输入/ai-sdk-ui-v7确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

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

详细介绍

技能：ai-sdk-ui

适用范围

  • 适用于：@ai-sdk/react 的 useChat 和来自 ai 的 DefaultChatTransport
  • 不适用于：后端生成（参见 ai-sdk-core）

假设

  • SDK 主版本为 ai ^7；@ai-sdk/react 的主版本独立。文件夹名称遵循 ai
  • 切勿凭记忆编写 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

原则

  • useChat 来自 @ai-sdk/react；DefaultChatTransport 来自 ai
  • 使用本地输入状态；sendMessage({ text })；使用 status，而非 isLoading；渲染 message.parts
  • 服务端：参见 ai-sdk-core。处理程序使用 createUIMessageStreamResponse + toUIMessageStream({ stream: result.stream })。仅当任务与流式处理或 SDK 无关时，才保留已弃用的 toUIMessageStreamResponse()

约束

必须
  • 当端点不是 /api/chat 时，使用 DefaultChatTransport({ api })
  • 当 status !== 'ready' 时，禁用发送
避免
  • import { useChat } from 'ai/react'
  • toDataStreamResponse / pipeDataStreamToResponse
  • v5 之前的 handleInputChange / handleSubmit / useAssistant

交互

模板

评论

支持 Markdown