ARTICLE · 1324450
AI 组件库
Element-Plus-X 的 useRecord 把浏览器语音识别封装成一个 hook：start / stop / loading / value，几行代码就能给输入框加上语音转文字。
这类库的共同点很明确——不教你调模型，只把 AI 产品里那些重复的界面活儿干掉。顺着这个思路，我把市面上同类型的组件库扒了一遍，挑出 4 个能打的。
一、Ant Design X
简介：蚂蚁集团基于 Ant Design 推出的 React AI 组件库，按 RICH 交互范式把 AI 对话拆成原子组件：Bubble 气泡、Sender 输入框、Conversations 会话管理、ThoughtChain 思维链、Attachments 附件等 20+ 组件。
优点
颗粒度最细：Bubble.List + Sender 两个组件就能拼出聊天框，也能深度定制每个气泡 自带 X SDK（useXChat / XRequest / XStream），流式对话不用自己写适配层 X Markdown 专为流式渲染优化，公式、代码高亮、Mermaid 开箱即用
地址：https://x.ant.design
二、TDesign Chat
简介：腾讯 TDesign 团队面向 AIGC 场景的对话组件库，核心是一个 Chatbot 容器组件，配 ChatSender / ChatThinking / ChatLoading / ChatMarkdown 等子组件，Vue3、React、小程序、UniApp、Flutter 多端同款。
优点
零配置起手：配好 endpoint 就有完整聊天界面，流式输出、自动滚动、消息状态全内置 支持 SSE 流式 + 传统 HTTP 双模式，还内置 AG-UI 协议，直接对接 Agent 与 TDesign 全家桶同一套 Design Token，已有 TDesign 的项目接入几乎零成本
地址：https://tdesign.tencent.com/vue-next-chat/overview
三、ChatUI
简介：阿里小蜜团队开源的对话式 UI 设计语言与 React 组件库，迭代六年，是天猫、淘宝、钉钉、饿了么对话界面的底座，GitHub 4.5k star。
优点
经过超大规模线上业务验证，消息类型扩展、长列表性能这些坑都替你踩完了 无障碍（通过无障碍研究会认证）、国际化、深色模式、响应式全部开箱即用 API 极简：useMessages 管消息，renderMessageContent 自定义渲染，半天上手
地址：https://chatui.io
四、Lobe UI
简介：LobeChat 团队为 AIGC 应用打造的 React 组件库，90+ 组件，v6 起脱离 Ant Design，只支持 React 19 + ESM。
优点
默认视觉就是 LobeChat 那套成品质感，拿来就能当线上产品用 流式 Markdown（GFM / KaTeX / Mermaid）、300+ 模型与服务商图标、3D Emoji 全内置 亮暗色主题 + 18 种语言 i18n，按用途拆包（/chat、/mobile、/dashboard），MIT 协议
地址：https://ui.lobehub.com
怎么选
Vue 项目 + Element Plus → Element-Plus-X Vue 项目 + TDesign → TDesign Chat React 新项目 → Ant Design X React 想要 ChatGPT 质感 → Lobe UI 客服机器人 / 老项目稳妥之选 → ChatUI
