点击下方“前端开发爱好者”，选择“设为星标”
第一时间关注技术干货！
哈喽，大家好，我是 xy👨🏻💻。Ant Design 团队匠心呈现 RICH 设计范式，打造卓越 AI 界面解决方案 —— Ant Design X ！
前言
在人工智能和机器学习技术日益成熟的今天，构建由 AI 驱动的用户界面成为了软件开发的一大趋势。为了简化这一过程，Ant Design X 应需而生！
Ant Design X 是一个遵循 Ant Design 设计体系的 React UI 库，旨在帮助开发者轻松打造 AI 驱动的界面。
Ant Design X 简介
Ant Design X 是一个遵循现代设计原则的 React UI 库，它集成了智能对话组件和API 服务，致力于简化 AI 界面的开发流程。
这个库提供了丰富的组件和模板，并利用 TypeScript 提供全面的类型支持，增强了开发的体验和可靠性。
Ant Design X 核心优势
Ant Design X 的核心优势包括：
先进的交互体验：基于 RICH 交互范式，提供卓越的 AI 交互体验。 多样化的组件选择：覆盖广泛的 AI 对话场景，助力快速构建个性化 AI 交互页面。 即插即用的模型集成：轻松集成符合 OpenAI 标准的模型推理服务。 高效的数据流管理：提供强大的数据流管理功能，提升开发效率。 多样的模板支持：提供多种模板，快速启动 LUI 应用开发。 TypeScript 支持：采用 TypeScript 开发，提供完整的类型支持，增强开发体验与可靠性。 定制化主题设计：支持细致的样式调整，满足各种场景的个性化需求。
安装与使用
Ant Design X 的安装非常简单，可以通过以下命令进行：
npm install @ant-design/x --save
或者
yarn add @ant-design/x
以及
pnpm add @ant-design/x
组件概览
Ant Design X 提供了一系列基于 RICH 交互范式的组件，包括：
Bubble：消息气泡
用于聊天的气泡组件：
Conversations：会话管理
需要对多个会话进行管理，查看历史会话列表：
Welcome：欢迎界面
清晰传达给用户可实现的意图范围和预期功能，使用合适的欢迎推荐组件，可以有效降低用户学习成本，让用户快速了解并顺利开始
Prompts：提示集
Prompts 组件用于显示一组与当前上下文相关的预定义的问题或建议
Sender：发送框
需要构建一个对话场景下的输入框
Attachment：附件
需要展示一组附件信息集合的场景
Suggestion：快捷指令
构建一个对话场景下的输入框，用于给予用户快捷提示的组件
ThoughtChain：思维链
调试和跟踪复杂 Agent System 中的调用链，类似的链式场景中使用
几行代码实现一个聊天界面
import { Bubble, Sender } from "@ant-design/x";
const messages = [
{
content: "Hello, Ant Design X!",
role: "user",
},
];
const App = () => (
<div>
<Bubble.List items={messages} />
<br />
<Sender />
</div>
);
export default App;
效果展示：
升级版本聊天界面可以参考官方案例：https://x.ant.design/docs/playground/independent-cn
更多功能
Ant Design X 提供了一系列强大的核心功能，以支持复杂的 AI 驱动界面开发需求。以下是一些关键功能及其简要说明：
useXAgent - 模型调度
useXAgent 是一个用于模型调度的 React 钩子，它允许开发者通过一个 Agent 对象来管理和调度不同的 AI 模型。这个钩子提供了一个简洁的接口来处理模型请求和响应，使得集成和使用 AI 模型变得更加简单。
useXChat - 数据管理
useXChat 是一个数据管理钩子，它通过 useXAgent 进行会话数据的管理，并产出供页面渲染使用的数据。这个钩子简化了对话数据流的管理，使得开发者可以专注于构建用户界面，而不必担心底层的数据逻辑。
XStream - 数据流处理
XStream 是一个流处理工具，它能够将 SSE（Server-Sent Events）协议的 ReadableStream 转换为易于处理的记录（Record），或者将任何协议的 ReadableStream 解码并读取。这个工具为处理实时数据流提供了强大的支持。
XRequest - 请求发起
XRequest 是一个请求工具，它允许开发者向符合 OpenAI 标准的 LLM（Large Language Models）发起请求。这个工具封装了请求的细节，使得开发者可以轻松地与 AI 模型进行交互。
XProvider - 全局化配置
XProvider 继承自 Ant Design 的 ConfigProvider，并且为 Ant Design X 中的组件提供全局化配置。通过 XProvider，开发者可以统一设置组件的主题、语言等配置，实现一致的用户体验。
探索更多
想要了解更多关于 Ant Design X 的核心功能，请访问我们的官方文档，获取详细的指南和示例代码：
Ant Design X 官方文档：https://x.ant.design/components/overview-cn
Ant Design X 的发布标志着 AI 驱动界面开发的新起点。
它不仅简化了开发流程，还提供了强大的功能和灵活性，以满足不同场景下的需求。
立即开始构建您的 AI 驱动界面吧！
点击上方“前端开发爱好者”，选择“设为星标” 第一时间关注技术干货！
