antd 对 ai 下手了！Vue 开发者表示羡慕！

近来随着 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 陪你一起度过！

• 
  

• 

• 
  
关注公众号，发送消息：
指南 ， 获取 高级前端、算法 学习路线 ，是我自己一路走来的实践。
简历