vercel-ai-elements

Vercel AI Elements Skill

概述

本 Skill 为 Vercel AI Elements 提供完整文档——这是一个用于配合 Vercel AI SDK 构建对话式 AI 界面的综合性 UI 组件库。它涵盖 23 个生产就绪的 React 组件，分为 6 个功能类别，从基础的消息展示到网页预览和工具执行等高级功能。

当用户需要以下内容时，请使用本 Skill：

• 特定 AI Elements 组件的文档
• 安装和使用说明
• Props 和 API 参考
• 与 AI SDK 的集成示例
• 帮助选择适合其用例的组件
• 关于为常见模式组合组件的指导

核心能力

Vercel AI Elements 库提供涵盖 6 个功能类别的组件：

1. 消息组件

展示带有变体（contained/flat）、自动对齐、头像和 markdown 支持的聊天消息。非常适合在对话式界面中渲染用户和助手消息。

组件： Message、MessageContent、MessageAvatar

参考： references/vercel-ai-elements-message-components.md

2. 对话管理

包装并管理消息列表，支持自动滚动、滚动到底部按钮和空状态。处理多消息对话的容器和布局。

组件： Conversation、ConversationContent、ConversationEmptyState、ConversationScrollButton

参考： references/vercel-ai-elements-conversation-management.md

3. 输入与交互

通过文件附件、模型选择、建议和任务列表来支持用户输入。涵盖用于发送消息和管理工作流的所有用户交互模式。

组件： Actions、Prompt Input（含子组件）、Suggestion、Task

参考： references/vercel-ai-elements-input-interaction.md

4. 内容展示

渲染生成的内容，包括代码、图片、markdown 响应和结构化 artifact。处理 AI 模型输出的所有类型内容。

组件： Artifact、CodeBlock、Image、Response

参考： references/vercel-ai-elements-content-display.md

5. AI 处理 UI

可视化 AI 处理步骤，包括分支对话、推理链、加载状态、执行计划和微光效果。展示"思考"过程。

组件： Branch、Chain of Thought、Loader、Plan、Reasoning、Shimmer

参考： references/vercel-ai-elements-ai-processing.md

6. 高级功能

用于上下文追踪、引用、工具执行、来源归属、网页预览和跨平台分享的专用组件。

组件： Context、Inline Citation、Open In Chat、Queue、Sources、Tool、Web Preview

参考： references/vercel-ai-elements-advanced-features.md

如何使用本 Skill

查找组件文档

当用户询问特定组件时：

1. 确定组件名称 - 例如"How do I use the Message component?"
2. 定位类别 - 确定该组件属于 6 个类别中的哪一个
3. 参考相应文件 - 从 references/ 加载类别参考文件
4. 提供组件详情 - 安装、基本用法、功能和 props

常见使用模式

模式 1：简单聊天界面

组合 Message + Conversation + PromptInput + Response 来构建基本的聊天机器人 UI。

模式 2：带操作的增强聊天

向 Message 组件添加 Actions 组件，以实现重试、复制和重新生成功能。

模式 3：AI 过程可视化

使用 Reasoning、ChainOfThought 或 Plan 来展示 AI 在流式传输期间的思考过程。

模式 4：高级文档生成

组合 Artifact、CodeBlock、Image 和 Response 来生成复杂的多媒体内容。

模式 5：多平台聊天分享

添加 OpenInChat，允许用户将对话复制到 ChatGPT、Claude 等。

与 AI SDK 集成

所有组件都设计为可与 @ai-sdk/react hooks 配合使用，例如：

• useChat() - 用于消息管理
• useCompletion() - 用于流式文本
• experimental_useObject() - 用于结构化输出

参考文件包含每个组件类别的完整 AI SDK 集成示例。

组件快速参考

安装模式

所有组件都使用相同的安装模式：

npx ai-elements@latest add [component-name]

其中组件名称为小写并使用连字符，例如 prompt-input、code-block、chain-of-thought。

Props 文档

每个组件参考文件都包含全面的 props 表格，其中包括：

• Prop 名称和类型
• 功能描述
• 该 prop 是否可选
• 适用时的默认值

流式支持

许多组件具有内置流式支持：

• Response：parseIncompleteMarkdown 处理流式 markdown
• Plan：isStreaming prop 启用微光动画
• Reasoning：isStreaming 会自动打开/关闭面板
• Shimmer：动画显示加载状态

各组件的关键特性

TypeScript 支持

所有组件都具有适用于 TypeScript 项目的完整类型定义。

可访问性

组件包含适当的 ARIA 标签、键盘导航和语义化 HTML。

响应式设计

所有组件都能适配不同屏幕尺寸，并提供适合移动端的交互。

主题集成

组件使用 CSS 自定义属性和 currentColor 来实现自动主题支持。

复合组件

大多数组件使用复合组件模式（父组件 + 子组件）以实现灵活组合。

搜索策略

使用参考文件搜索：

• 按组件名称：在文件中搜索准确的组件名称（例如 "Message"）
• 按功能：搜索能力（例如 "streaming"、"copy button"、"citations"）
• 按用例：搜索模式（例如 "loading"、"error"、"completed"）
• 按 props：当用户询问自定义时，搜索特定 prop 名称

重要说明

CSS 配置

Response 组件需要添加以下 CSS：

@source "../node_modules/streamdown/dist/index.js";

AI SDK 设置

大多数组件假定使用带有正确后端路由的 AI SDK。参考文件包含后端示例代码。

组件依赖

许多组件依赖 shadcn/ui 基础组件以及 lucide-react 中的图标。用户需要安装这些依赖。

分支实现

Branch 组件管理多个消息分支的 UI，但并未在 AI SDK 中实现分支 - 这需要自定义后端逻辑。

资源组织

参考文件（按类别组织）

• vercel-ai-elements-message-components.md - 消息显示
• vercel-ai-elements-conversation-management.md - 对话容器
• vercel-ai-elements-input-interaction.md - 用户输入和操作
• vercel-ai-elements-content-display.md - 内容渲染
• vercel-ai-elements-ai-processing.md - 处理 UI 和可视化
• vercel-ai-elements-advanced-features.md - 专用组件

每个参考文件包含：

• 组件描述和安装说明
• 基本用法示例
• 完整的 props 参考
• 关键特性和能力
• 与 AI SDK 的集成模式

所有参考文件都按类别组织，以便用户询问特定组件或功能时快速查找。