SuperAPI AI 工具集

vercel-ai-elements

前端与建站

查看项目

更新于 10-15 23:24

技能介绍

用途:本技能集中整理 Vercel AI Elements 的文档,这是一套配合 Vercel AI SDK 构建对话式 AI 界面的 React UI 组件库,共 23 个组件,按 6 类组织。适合查询具体组件文档、安装与用法、Props 与 API 参考、与 AI SDK 的集成示例、组件选型与组合模式。

主要能力(按类别):

  1. 消息组件:Message、MessageContent、MessageAvatar,支持 contained/flat 变体、自动对齐、头像与 Markdown。
  2. 会话管理:Conversation、ConversationContent、ConversationEmptyState、ConversationScrollButton,支持自动滚动、回到底部按钮与空状态。
  3. 输入与交互:Actions、Prompt Input(含子组件)、Suggestion、Task,支持附件、模型选择、建议与任务列表。
  4. 内容展示:Artifact、CodeBlock、Image、Response,渲染代码、图片、Markdown 与结构化产物。
  5. AI 处理 UI:Branch、Chain of Thought、Loader、Plan、Reasoning、Shimmer,可视化分支、推理链、加载、执行计划与思考过程。
  6. 高级功能:Context、Inline Citation、Open In Chat、Queue、Sources、Tool、Web Preview,用于上下文跟踪、引用、工具执行、来源标注、网页预览与跨平台分享。

使用方式:组件统一安装命令为 npx ai-elements@latest add [component-name],组件名为小写连字符形式,如 prompt-input、code-block、chain-of-thought。组件设计配合 @ai-sdk/react 的 useChat()、useCompletion()、experimental_useObject() 使用。文档按类别存于 references/ 下的 6 个参考文件,可依组件名、功能、用例或 Props 检索。常见组合模式包括:基础聊天界面(Message + Conversation + PromptInput + Response)、带操作增强的聊天、AI 过程可视化、复杂多媒体文档生成、多平台对话分享。

关键特性与限制:组件具备 TypeScript 类型定义、ARIA 标签与键盘导航等无障碍支持、响应式设计和基于 CSS 自定义属性的主题集成,多数组件采用复合组件模式。Response 组件需添加 CSS:@source "../node_modules/streamdown/dist/index.js";。多数组件依赖 shadcn/ui 与 lucide-react 图标。部分组件内置流式支持,如 Response 的 parseIncompleteMarkdown、Plan 的 isStreaming、Reasoning 的 isStreaming、Shimmer 动画。Branch 组件仅管理多分支消息的 UI,不实现 AI SDK 层的分支逻辑,需自行编写后端。其余如具体平台、收费与价格等信息暂未提供。