0. 做 Agent 产品，前端 AI 组件框架怎么选？

做 Agent 产品，前端 AI 组件框架怎么选？

最近公司在做一款 Agent 产品，形态上有点类似 Codex、WorkBuddy 这一类工具。这类产品和传统后台不太一样。用户不只是点按钮、填表单，而是会通过自然语言告诉 AI 自己想做什么，然后 AI 根据上下文完成分析、生成、修改、执行等任务。

一开始看起来，好像前端只需要做一个聊天框。但真正做起来会发现，Agent 产品的前端并没有那么简单。

它通常会涉及：

text 复制代码

消息气泡
输入框
流式输出
会话列表
附件上传
提示词推荐
思考过程展示
工具调用状态
Markdown 渲染
代码块展示
复制、重试、点赞等操作

如果这些能力全部从零开始写，前期可能还能接受，但后面维护成本会越来越高。

所以我的判断是：前端没有必要完全自研一套 AI 交互组件体系，更合理的方式是基于已有 AI 组件框架做二次封装和业务改造。

这篇文章主要简单整理一下目前比较常见的 AI 前端组件框架，以及为什么最后我更倾向选择 Ant Design X Vue。

这里说的"AI 框架"，主要指前端 AI UI 组件库 / AI 交互框架，不是模型训练框架，也不是后端 Agent 编排框架。

常见 AI 前端组件框架

先简单看一张表。

方案	来源 / 公司	技术栈	简单说明
Ant Design X	Ant Design / 蚂蚁集团生态	React	面向 AI 产品的组件和工具集
Ant Design X Vue	开源社区 Vue 实现	Vue	Ant Design X 的 Vue 实现
Semi Design AI 组件	抖音前端团队 / Semi Design	React	Semi Design 中的 AI 对话组件
TDesign AI Chat	腾讯 TDesign	React / Vue / 小程序等	腾讯设计体系下的 AI Chat 组件能力
Element Plus X	Element Plus 生态 / 开源社区	Vue	基于 Vue3 + Element Plus 的 AI 组件库
Alibaba ChatUI	阿里巴巴	React	偏智能客服和聊天场景的对话式 UI 库
Vercel AI SDK / AI Elements	Vercel	React / Next.js	AI 应用开发 SDK + UI 组件
assistant-ui	assistant-ui 团队	React	专注 ChatGPT 风格 AI Chat UI
CopilotKit	CopilotKit	React 为主	更偏 Copilot / Agent 应用集成

这些方案不是完全同一层级，有的是 UI 组件库，有的是 SDK，有的是完整的应用框架。但它们都说明了一件事：AI 产品的前端交互已经开始被单独抽象成一套组件和框架体系。

下面简单看几个代表性的方案。

Ant Design X

Ant Design X 是 Ant Design 团队推出的 AI 界面解决方案，主要面向 React 生态。

它不只是提供一个聊天框，而是围绕 AI 产品拆出了很多常见组件，比如消息气泡、输入框、会话列表、附件、提示词、思考过程等。

它比较适合企业级 AI 产品，尤其适合本来就在使用 Ant Design React 技术栈的团队。

Ant Design X Vue

Ant Design X Vue 是 @ant-design/x 的 Vue 实现。

它提供了类似的 AI 组件能力，比如：

text 复制代码

Bubble：消息气泡
Sender：输入框
Conversations：会话管理
Welcome：欢迎组件
Prompts：提示词
Attachments：附件
Suggestion：快捷指令
ThoughtChain：思维链
Actions：操作列表
useXAgent：模型调度
useXChat：聊天状态管理
XRequest：请求封装
XStream：流式处理

对于 Vue 技术栈团队来说，它的接入成本明显更低。

Semi Design AI 组件

Semi Design 是抖音前端团队维护的设计系统。

它现在也提供了一些 AI 场景组件，例如 AI 对话展示、富文本输入、文件、图片、代码、工具调用等内容的展示能力。

如果团队本身使用 Semi Design，并且技术栈是 React，可以关注这套方案。

TDesign AI Chat

TDesign 是腾讯的企业级设计系统，覆盖 React、Vue、小程序、UniApp 等多个方向。

TDesign 也在补充 AI Chat 相关组件能力。它比较适合腾讯系设计语言、跨端项目，或者本身已经在使用 TDesign 的团队。

它的优势是设计体系完整，技术栈覆盖面比较广。

Element Plus X

Element Plus X 是基于 Vue3 + Element Plus 的 AI 组件库。

它的定位很直接：让 Vue 开发者可以快速搭建 AI 对话界面。

如果公司主技术栈是 Vue，并且 UI 体系偏 Element Plus，那么 Element Plus X 也是一个值得关注的选择。

Alibaba ChatUI

ChatUI 是阿里巴巴开源的对话式 UI 组件库，主要面向 React。

它更早期的定位偏智能客服、聊天窗口、快捷回复、卡片消息等场景。

如果只是做基础聊天界面，它比较轻量。但如果要做复杂 Agent 产品，可能还需要自己补充更多 AI 相关能力。

Vercel AI SDK / AI Elements

Vercel AI SDK 更偏 AI 应用开发基础设施，提供模型调用、流式输出、多模型适配等能力。

AI Elements 则是在 UI 层提供一组 AI 组件，比如消息、输入框、思考过程、工具调用展示等。

如果团队是 React / Next.js 技术栈，这一套会比较自然。

assistant-ui

assistant-ui 是一个 React AI Chat UI 方案。

它的目标是快速搭建 ChatGPT 风格的 AI 对话界面，提供组件、状态管理、流式渲染等能力。

如果产品主要是聊天助手，它会比较合适。但如果要做复杂业务 Agent，后面可能还是要做不少二次封装。

CopilotKit

CopilotKit 更偏 Copilot / Agent 应用框架。

它不只是聊天 UI，还强调 AI 和业务页面状态之间的连接。比如 AI 可以感知当前页面、调用前端动作、参与业务流程。

如果要做"嵌入业务系统里的智能助手"，CopilotKit 是一个比较典型的方案。不过它整体还是更偏 React 生态。

为什么最后选择 Ant Design X Vue？

结合我们当前项目，我最后更倾向选择 Ant Design X Vue。

原因主要有几个。

1. 公司主流技术栈是 Vue

这是最直接的原因。

如果我们选择 React 生态的 AI 组件库，就意味着要引入一套新的前端技术栈。对于团队来说，学习、接入、维护和后续二次开发成本都会更高。

而 Ant Design X Vue 本身就是 Vue 实现，更符合当前团队的开发习惯。

2. 组件结构比较符合 Agent 产品

Agent 产品不是只有一个输入框。

它通常会有：

text 复制代码

会话列表
消息流
输入框
快捷提示
文件上传
思考过程
工具调用过程
结果操作

Ant Design X Vue 对这些模块都有对应组件，比较适合作为第一阶段的基础组件库。

3. 设计风格更适合企业级产品

我们做的是公司内部或企业级 Agent 产品，不是偏娱乐化的聊天工具。

Ant Design 体系整体比较稳，适合后台、工具、企业应用。Ant Design X Vue 延续了这种风格，和企业级产品的视觉预期比较一致。

4. 适合二次封装

我们并不是直接把组件库原样搬进产品里，而是会基于它做一层公司内部封装。

比如后面可以封装成：

text 复制代码

AgentChat
AgentSender
AgentMessageList
AgentThoughtChain
AgentConversationLayout

底层用 Ant Design X Vue，上层再对接我们自己的业务协议、Agent 状态、权限、埋点和样式规范。

这样比完全自研更快，也比直接使用裸组件更可控。

需要注意的问题

当然，Ant Design X Vue 也不是没有问题。

它目前是社区 Vue 实现，不是 Ant Design X 官方主仓库的 React 版本。所以使用时需要关注：

text 复制代码

组件成熟度
维护活跃度
文档完整度
复杂场景下是否需要自己补充
和 Ant Design Vue 的兼容性

但从当前阶段看，我们更需要的是快速搭建第一版 Agent 产品界面，而不是一开始就做一套完美的内部 AI UI 框架。

所以先选一个成熟方向，再结合业务逐步沉淀，会更加务实。

总结

Agent 产品越来越多，前端也不再只是写一个聊天窗口。

真正的 Agent 前端会包含：

text 复制代码

自然语言输入
多轮会话
上下文管理
流式输出
附件上传
思考过程
工具调用
结果确认
消息操作
结构化 UI 展示

这些能力如果全部从零开发，成本并不低。

所以更合理的方式是：选择一个已有 AI 组件框架，然后结合业务做二次封装。

如果是 React 团队，可以重点关注：

text 复制代码

Ant Design X
Semi Design AI 组件
TDesign AI Chat
Vercel AI SDK / AI Elements
assistant-ui
CopilotKit
Alibaba ChatUI

如果是 Vue 团队，可以重点关注：

text 复制代码

Ant Design X Vue
Element Plus X
TDesign Vue / TDesign Chat 相关能力

结合我们公司的主流技术栈和产品方向，我最后选择：

text 复制代码

Ant Design X Vue

它不是唯一选择，但比较适合作为当前阶段的起点：先快速把 Agent 产品界面搭起来，再根据真实业务复杂度逐步沉淀内部组件体系。

参考资料

Ant Design X：x.ant.design/
Ant Design X 介绍：x.ant.design/docs/react/...
Ant Design X 组件总览：x.ant.design/components/...
Ant Design X Vue：antd-design-x-vue.netlify.app/component/o...
Ant Design X Vue GitHub：github.com/wzc520pyfm/...
Semi Design AIChatDialogue：semi.design/zh-CN/ai/ai...
Semi Design AIChatInput：semi.design/en-US/ai/ai...
TDesign：github.com/Tencent/tde...
TDesign MiniProgram AI Chat：static.tdesign.tencent.com/miniprogram...
Element Plus X：github.com/element-plu...
Element Plus X 文档：v1.element-plus-x.com/zh/
Alibaba ChatUI：chatui.io/components
Vercel AI SDK：vercel.com/ai-sdk
Vercel AI Elements：vercel.com/changelog/i...
assistant-ui：www.assistant-ui.com/docs
CopilotKit：docs.copilotkit.ai/reference