章
目
录
随着AI技术的蓬勃发展，构建高效、优质的AI产品用户界面成为了前端开发者们的重要任务。Ant Design X和Element-Plus-X这两款全新 AGI组件库应运而生，下面，我们就来详细了解一下这两款组件库。
一、Ant Design X
Ant Design X是Ant Design推出的全新AGI组件库，其主要目标是帮助开发者更便捷地打造AI产品的用户界面。它提供了一系列专门用于AI交互的组件，像Attachments、Sender、ThoughtChain等，同时还配备了useXAgent、XStream等实用的hooks。而且，这款组件库支持Vue和React两个版本，开发者可以根据自己的项目需求自由选择。
- React版本：可在https://github.com/ant-design/x获取。
- Vue版本：可在https://github.com/wzc520pyfm/ant-design-x-vue获取。
（一）XStream hook详解
XStream主要用于将SSE协议的ReadableStream转换为Record，同时还能对任何协议的ReadableStream进行解码和读取。这里提到的SSE（Server-Sent Events），是HTML5标准的一部分，它是一种服务器主动向浏览器发送实时更新数据的通信方式。简单来说，SSE就像是服务器主动给浏览器“送消息”，而且是单向的。和需要前端不断询问服务器有没有新消息的方式不同，SSE能让服务器持续地把数据推送给前端，这是一种轻量级的实时通信机制。
SSE和WebSocket有一些区别，具体如下：
| 特性 | SSE | WebSocket |
|---|---|---|
| 方向 | 单向(服务器→客户端) | 双向(客户端→服务器) |
| 协议 | HTTP(标准) | 自定义WebSocket协议 |
| 建立连接 | 简单(使用EventSource) | 需要创建WebSocket实例 |
| 浏览器支持 | 好(大多数现代浏览器支持) | 好(但稍复杂) |
| 断线重连 | 自动内置 | 需自己实现 |
| 用途 | 新闻推送、直播弹幕、股票行情、日志 | – |
（二）XRequest
XRequest主要用于封装请求格式，它能够让请求格式符合OpenAI标准的LLM请求格式。不过，它主要用于单次请求，不会管理上下文。
（三）useXAgent
useXAgent主要用于与后端模型进行交互，提供抽象数据流。它和XRequest有一些明显的区别：
- 主要用途：useXAgent专门用于与大语言模型（LLM）交互；XRequest则用于发起通用HTTP请求，虽然也支持智能模型，但应用场景更广泛。
- 是否管理上下文：useXAgent会自动维护messages聊天上下文；XRequest不管理上下文，只是纯粹的API请求。
- 是否支持流式输出：useXAgent内置支持stream流输出（SSE）；XRequest也支持，但需要手动处理。
- 封装程度：useXAgent高度封装，非常适合AI对话类场景；XRequest则更灵活通用，请求逻辑更自由。
- 使用方式：useXAgent是React Hook；XRequest是通用函数。
- 请求对象格式：useXAgent采用LLM风格（如OpenAI的messages数组）；XRequest支持REST风格、自由结构。
（四）useXChat
useXChat是在useXAgent的基础上进一步封装得到的，它提供了更完整、更强大的对话管理能力。在需要多轮对话、上下文控制、模型切换、流式响应的复杂场景中，useXChat能发挥出巨大的优势。相比useXAgent，它功能更强大，更适合构建复杂对话系统，自定义性更高，还支持多会话（可结合useChatlist）；而useXAgent则更适合轻量场景。
二、Element-Plus-X
Element-Plus-X是一款专门为Vue框架打造的开箱即用的AI交互组件库，它对标Ant Design X。目前该组件库正在开发测试中，大家可以在https://github.com/HeJiaYue520/Element-Plus-X关注其进展。
Element-Plus-X在Ant Design X的基础上进行了重构，比如对ant-design-x的XRequest进行了拆分。它将XRequest拆分成了“前端终止场景”和“请求终止场景”，并分别对应useSend（前端终止场景）这个hooks和XRequest（请求终止场景）这个工具类。这种拆分让开发者在不同的场景下使用起来更加灵活方便。
通过对Ant Design X和Element-Plus-X的介绍，相信大家对这两款AGI 组件库有了更深入的了解，以后得前端AGI组件库必将百花齐放，我们一起期待吧。
