使用 ai-elements-vue 快速构建 Vue AI Chat 页面
前言
随着大模型应用的快速发展，越来越多的前端项目开始从传统的表单、列表、弹窗页面，转向具备对话、推理、引用、工具调用和内容生成能力的 AI 交互页面。
对于 Vue 项目来说，如果从零实现一个完整的 AI Chat 页面，需要处理消息列表、输入框、流式输出、Markdown 渲染、代码高亮、模型切换、推理过程展示、来源引用等一系列交互细节。
而 ai-elements-vue 正是为这类场景设计的一套 AI 前端业务组件库。
不同于普通 UI 组件库主要提供按钮、表格、表单、弹窗等基础组件，ai-elements-vue 更偏向 AI 产品中的高频业务组件，例如聊天窗口、消息气泡、Prompt 输入框、模型选择器、推理过程、来源引用、代码块、工具调用、任务计划和工作流节点等。
它并不是一个完整的后台管理模板，而是帮助开发者快速搭建类似 ChatGPT、Claude、Cursor、Dify、Coze 等产品中的 AI 交互界面。
ai-elements-vue 适合解决什么问题
在普通 Vue 项目中，如果要实现一个 AI Chat 页面，通常会遇到以下问题：
- 聊天消息区域需要自动滚动到底部；
- 用户消息和 AI 消息需要不同的布局样式；
- 输入框需要支持回车发送、多行输入、附件上传等能力；
- AI 回复内容通常需要支持 Markdown；
- AI 生成代码时需要代码高亮和复制功能；
- 使用推理模型时，需要展示思考过程；
- 使用 RAG 或知识库问答时，需要展示引用来源；
- 后续如果接入 Agent，还需要展示工具调用、任务计划和执行过程。
ai-elements-vue 的价值就在于：它把这些 AI 产品中常见的交互形态封装成可复用组件，使开发者可以更快完成 AI 应用页面搭建。
常用 Chatbot 组件
如果目标是构建一个普通 AI Chat 页面，最核心的组件主要集中在聊天容器、消息展示和输入框三个部分。
| 组件 | 作用 | 适合场景 |
|---|---|---|
conversation |
聊天会话容器，用于包裹消息列表，支持自动滚动到底部和滚动按钮 | AI 对话主区域 |
message |
单条消息组件，可区分用户消息和 AI 消息，也可以搭配头像、角色和内容区域 | 用户提问、AI 回复 |
prompt-input |
高级输入框，支持 textarea、提交按钮、附件上传、模型选择等能力 | 页面底部输入区 |
model-selector |
模型选择器 | GPT、Claude、DeepSeek、Qwen 等模型切换 |
suggestion |
快捷提示词或推荐问题 | 首页引导、空状态推荐 |
reasoning |
折叠式展示 AI 推理内容，适合流式生成场景 | DeepSeek R1、Qwen 推理模型等 |
sources |
来源引用展示 | RAG、联网搜索、知识库问答 |
loader |
加载状态展示 | AI 正在思考或生成中 |
tool |
工具调用过程展示 | 搜索、数据库查询、MCP 工具调用 |
plan |
计划与任务规划展示 | Agent 执行前的任务计划 |
task |
任务完成状态追踪 | Agent 多步骤执行 |
其中，conversation 通常用于承载整个消息区域，解决聊天页面中最常见的“消息自动滚动到底部”问题；message 负责展示单条对话内容；prompt-input 则用于构建页面底部的输入区域。
这三个组件基本构成了一个 AI Chat 页面的最小骨架。
代码与内容展示组件
除了基础对话能力，AI 应用还经常需要展示代码、图片、生成文档或网页预览内容。因此，ai-elements-vue 也提供了一组内容展示类组件。
| 组件 | 作用 | 适合场景 |
|---|---|---|
code-block |
代码高亮展示，通常带复制功能 | AI 生成代码、SQL、Shell 命令 |
image |
AI 生成图片展示 | 文生图、图片结果展示 |
artifact |
展示代码、文档或生成物 | 类似 Claude Artifacts、Cursor 代码预览 |
web-preview |
嵌入网页预览 | AI 生成前端页面后的效果预览 |
open-in-chat |
将内容打开到聊天中 | 从文档、卡片、代码片段跳转回对话 |
**例如在 AI 编程助手中，模型经常返回 JavaScript、Vue、SQL 或 Shell 命令。如果直接用普通的 <pre><code> 标签展示，复制、语言高亮、文件名显示等体验都需要手动实现。
**使用 code-block 组件后，可以更快完成代码展示能力的搭建。
因此，这一类组件更适合用于 AI 编程助手、智能文档助手、报告生成器、页面生成器等场景。
工作流 Workflow 组件
如果项目不仅仅是一个普通 Chat 页面，而是希望实现类似 Dify、Coze 或 LangGraph Studio 的可视化 Agent 编排能力，就可以进一步使用 Workflow 相关组件。
| 组件 | 作用 | 适合场景 |
|---|---|---|
canvas |
工作流画布，基于 VueFlow | Agent 流程编排 |
node |
节点组件 | 大模型节点、知识库节点、工具节点 |
edge |
节点连线 | 工作流关系展示 |
connection |
连接线交互 | 拖拽连线 |
controls |
缩放、适配视图等控制器 | 工作流编辑器 |
panel |
画布浮层面板 | 节点配置、右侧属性面板 |
toolbar |
节点工具栏 | 删除、复制、配置节点 |
不过对于普通 AI Chat 页面来说，这一组组件并不是必须的。
如果项目当前阶段只是实现聊天、写作、问答或知识库检索，建议先不要引入 Workflow 组件，避免页面复杂度过高。
普通 AI Chat 页面的最小组件组合
对于一个标准 AI Chat 页面，推荐先安装以下组件：
1 | npx ai-elements-vue@latest add conversation message prompt-input loader reasoning sources code-block |
这组组件可以覆盖大多数普通 AI Chat 场景：
| 组件 | 用途 |
|---|---|
conversation |
构建聊天消息滚动区域 |
message |
展示用户消息和 AI 消息 |
prompt-input |
构建底部输入框 |
loader |
展示生成中状态 |
reasoning |
展示推理模型的思考过程 |
sources |
展示知识库或搜索来源 |
code-block |
展示 AI 生成的代码内容 |
页面结构可以简化理解为：
1 | AI Chat 页面 |
这个结构足以支持一个基础的 AI 对话助手、AI 写作助手或知识库问答页面。
核心组件说明
conversation
conversation 目录下主要包含 4 个组件：
| 组件 | 用途 |
|---|---|
Conversation |
聊天消息滚动容器，支持自动滚动到底部 |
ConversationContent |
消息列表布局容器，用于排列子消息 |
ConversationEmptyState |
无消息时的空状态展示 |
ConversationScrollButton |
悬浮的“滚回底部”按钮 |
在实际项目中，Conversation 通常作为聊天主体区域的最外层容器，内部放置多条 Message。
message
message 目录下组件较多，主要用于控制消息布局、内容渲染和消息操作。
| 组件 | 用途 |
|---|---|
Message |
消息行根容器，通过 from区分用户和助手 |
MessageAvatar |
消息头像 |
MessageContent |
消息内容气泡 |
MessageResponse |
Markdown 渲染器，适合展示 AI 回复 |
MessageActions |
消息操作按钮容器 |
MessageAction |
单个消息操作按钮，例如复制、点赞 |
MessageToolbar |
消息底部工具栏 |
MessageBranch |
多版本回复分支容器 |
MessageBranchSelector |
分支选择器 |
**普通 Chat 页面最常用的是 Message、MessageContent 和 MessageResponse。
**如果后续需要支持“重新生成”“多版本回答切换”等能力，可以再使用分支相关组件。
prompt-input
prompt-input 是输入区最核心的组件集合，能力相对完整。
常用组件包括：
| 组件 | 用途 |
|---|---|
PromptInput |
输入表单根容器 |
PromptInputTextarea |
自动增长文本框，支持回车发送和多行输入 |
PromptInputSubmit |
提交按钮，可根据状态切换发送、加载、停止、错误图标 |
PromptInputFooter |
输入框底部工具栏 |
PromptInputButton |
输入区通用按钮 |
PromptInputSelect |
下拉选择器，例如模型选择 |
PromptInputActionAddAttachments |
添加附件菜单项 |
PromptInputSpeechButton |
语音输入按钮 |
对于普通 AI Chat 页面来说，最小使用方式通常是：
1 | <PromptInput @submit="handleSubmit"> |
如果项目后续要支持附件上传、语音输入、模型切换或斜杠命令，可以再逐步扩展其他组件。
code-block
code-block 主要用于 AI 生成代码的场景。
| 组件 | 用途 |
|---|---|
CodeBlock |
代码块根组件 |
CodeBlockContent |
代码高亮内容区 |
CodeBlockHeader |
代码块头部 |
CodeBlockFilename |
文件名展示 |
CodeBlockCopyButton |
一键复制按钮 |
CodeBlockLanguageSelector |
语言切换选择器 |
在 AI 编程助手、SQL 生成器、脚本生成器中，这个组件非常实用。
reasoning
reasoning 用于展示模型推理过程，尤其适合 DeepSeek R1、Qwen 推理模型等场景。
| 组件 | 用途 |
|---|---|
Reasoning |
可折叠的思维过程容器 |
ReasoningTrigger |
展开或收起触发头 |
ReasoningContent |
推理内容展示区 |
如果模型返回了 reasoning 内容，可以用它单独展示“思考过程”；如果只是普通聊天模型，则可以暂时不使用。
sources
sources 主要用于 RAG、知识库问答或联网搜索场景。
| 组件 | 用途 |
|---|---|
Sources |
可折叠的引用来源容器 |
SourcesTrigger |
展开或收起来源列表 |
SourcesContent |
引用来源列表区 |
Source |
单条引用来源链接 |
对于企业知识库问答来说，来源引用非常重要。它可以帮助用户判断回答是否可信，也方便追溯原始资料。
loader 与 shimmer
loader 和 shimmer 都属于加载状态组件。
| 组件 | 用途 |
|---|---|
Loader |
旋转加载指示器 |
LoaderIcon |
原始 SVG 加载图标 |
Shimmer |
文字闪烁动画效果 |
在 AI 正在思考、生成内容或等待接口响应时，可以用它们提升交互反馈。
实践建议
在实际项目中，不建议一开始就安装所有组件。
更推荐根据业务阶段分批引入。
阶段一：基础 Chat 页面
适合刚开始搭建 AI 对话页面。
1 | npx ai-elements-vue@latest add conversation message prompt-input loader |
阶段二：支持 Markdown、代码和来源引用
适合知识库问答、技术问答、智能写作等场景。
1 | npx ai-elements-vue@latest add reasoning sources code-block |
阶段三：支持 Agent 执行过程
适合需要展示工具调用、任务计划、执行步骤的智能体应用。
1 | npx ai-elements-vue@latest add tool plan task confirmation |
阶段四：支持可视化工作流
适合构建类似 Dify、Coze 的 Agent 编排平台。
1 | npx ai-elements-vue@latest add canvas node edge controls panel toolbar |
这种分阶段引入的方式，可以让项目结构更清晰，也能避免组件过多导致维护复杂度上升。
总结
ai-elements-vue 是一套面向 Vue 项目的 AI 前端业务组件库。它不是传统意义上的后台模板，而是专门服务于 AI 应用界面的组件集合。
如果只是构建普通 AI Chat 页面，优先关注以下组件即可：
1 | conversation |
它们可以帮助开发者快速完成聊天容器、消息展示、输入框、加载状态、推理过程、来源引用和代码展示等核心能力。
**如果后续需要构建 Agent 执行过程或可视化工作流，再逐步引入 **tool、plan、task、canvas、node、edge 等组件即可。
整体来看，ai-elements-vue 更适合作为 AI 应用前端的“业务组件层”，可以显著降低 AI Chat、AI 写作、知识库问答和 Agent 应用的页面搭建成本。
