用途:AI Elements 用于在项目中构建 AI 聊天界面,把组件源码复制进项目,生成代码归项目所有,需自行查看实际 API 并有意识地定制。适合添加或组合对话、消息、提示输入等交互。
主要能力:提供对话、消息、提示输入等聊天界面组件,支持流式、完成、重试、取消、附件、审批或来源等状态组合。集成部分涵盖 UI 与 SDK 边界、v6 注意事项,以及 AI SDK 7 所需的 context.tsx 补丁。
使用方式:先遵循项目的包管理器、别名、shadcn 配置与 AI SDK 主版本;读取 ai-sdk 确定已安装版本,再参考对应的 ai-sdk-6 或 ai-sdk-7 指引。先读生成的 components/ai-elements/<component>.tsx,再看对应 references/ 文件及其 scripts/ 示例。安装使用项目运行器执行 ai-elements@latest add <component> 或 shadcn@latest add @ai-elements/<component>,组件会落到 components.json 配置别名下的 components/ai-elements/,该已安装源码即离线 API 参考。替换本地定制前先检查已安装组件并审阅生成文件。
适用场景:需要构建或组合 AI 聊天交互界面,并希望保留键盘交互、无障碍标签与合理滚动行为时。
限制:AI Elements 面向 Radix 基础(上游使用 style new-york 与 radix-ui)。在 Base UI 项目上,prompt-input、attachments、inline-citation 和 plan 可能出现属性不匹配(上游 #446,2026-10-11 仍开放),需适配已安装副本。AI Elements 与 AI SDK 版本可独立变化。渲染失败时应检查自有组件、主题导入、语义 token 与实际配置别名,不要复制默认 tsconfig 或替换项目主题;无样式 markdown 需检查 MessageResponse 设置。模型选择、工具、凭据与授权应保留在服务端。仅类型正确不足以证明流式或附件行为可用,需用真实消息状态与项目检查验证渲染流程。其他细节暂未提供。