近来随着 AI 的爆火，凡是想要接入 AI 的都想搞一套自己的 AI 交互界面。专注于 AI 场景组件库的开源项目倒不是很多见，近日 antd 宣布推出 Ant Design X 1.0[1] 🚀 ，这是一个基于 Ant Design 的全新 AGI 组件库，使用 React 构建 AI 驱动的用户交互变得更简单了，它可以无缝集成 AI 聊天组件和 API 服务，简化 AI 界面的开发流程。
该项目已在 Github 开源，拥有 1.6K Star！
看了网友的评论，看来大家还是需要的！当前的 Ant Design X 只支持 React 项目，看来 Vue 开发者要羡慕了...
ant-design-x 特性
🌈 源自企业级 AI 产品的最佳实践：基于 RICH 交互范式，提供卓越的 AI 交互体验 🧩 灵活多样的原子组件：覆盖绝大部分 AI 对话场景，助力快速构建个性化 AI 交互页面 ⚡ 开箱即用的模型对接能力：轻松对接符合 OpenAI 标准的模型推理服务 🔄 高效管理对话数据流：提供好用的数据流管理功能，让开发更高效 📦 丰富的样板间支持：提供多种模板，快速启动 LUI 应用开发 🛡 TypeScript 全覆盖：采用 TypeScript 开发，提供完整类型支持，提升开发体验与可靠性 🎨 深度主题定制能力：支持细粒度的样式调整，满足各种场景的个性化需求
支持组件
以下圈中的部分为 ant-design-x 支持的组件。可以看到主要都是基于 AI Chat 场景的组件设计。现在你可以基于这些组件自由组装搭建一个自己的 AI 界面。
ant-design-x 也提供了一个完整 AI Chat 的 Demo 演示，可以查看 Demo 的代码并直接使用。
更多组件详细内容可参考 组件文档[2]
使用
以下命令安装 @ant-design/x 依赖。
注意，ant-design-x 是基于 Ant Design，因此还需要安装依赖 antd。
yarn add antd @ant-design/x
import React from 'react';
import {
// 消息气泡
Bubble,
// 发送框
Sender,
} from '@ant-design/x';
const messages = [
{
content: 'Hello, Ant Design X!',
role: 'user',
},
];
const App = () => (
<div>
<Bubble.List items={messages} />
<Sender />
</div>
);
export default App;
Ant Design X 前生 ProChat
不知道有没有小伙伴们使用过 ProChat[3]，这个库后面的维护可能会有些不确定性，其维护者表示 “24 年下半年后就没有更多精力来维护这个项目了，Github 上的 Issue 存留了很多，这边只能尽量把一些恶性 Bug 修复”
如上所示，也回答了其和 Ant Design X 的关系：ProChat 是 x 的前生，新用户请直接使用 x，老用户也请尽快迁移到 x。
感兴趣的朋友们可以去试试哦！
我是 ssh，工作 6 年+，阿里云、字节跳动 Web infra 一线拼杀出来的资深前端工程师 + 面试官，非常熟悉大厂的面试套路，Vue、React 以及前端工程化领域深入浅出的文章帮助无数人进入了大厂。 欢迎 长按图片加 ssh 为好友，我会第一时间和你分享前端行业趋势，学习途径等等。2024 陪你一起度过！
Ant Design X 1.0: https://github.com/ant-design/x/
[2]组件文档: https://x.ant.design/components/overview-cn/
[3]ProChat: https://github.com/ant-design/pro-chat/issues/340
