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

前端开发者应该对 Ant Design 不陌生，特别是 React 开发者，antd 应该是组件库的标配了。

近年来随着 AI 的爆火，凡是想要接入 AI 的都想搞一套自己的 AI 交互界面。专注于 AI 场景组件库的开源项目倒不是很多见，近日 antd 宣布推出 Ant Design X 1.0 🚀 ，这是一个基于 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 的代码并直接使用。

更多组件详细内容可参考 组件文档

使用

以下命令安装 @ant-design/x 依赖。

注意，ant-design-x 是基于 Ant Design，因此还需要安装依赖 antd。

sql

代码解读

复制代码

yarn add antd @ant-design/x

js

代码解读

复制代码

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，这个库后面的维护可能会有些不确定性，其维护者表示 “24 年下半年后就没有更多精力来维护这个项目了，Github 上的 Issue 存留了很多，这边只能尽量把一些恶性 Bug 修复”

如上所示，也回答了其和 Ant Design X 的关系：ProChat 是 x 的前生，新用户请直接使用 x，老用户也请尽快迁移到 x。

感兴趣的朋友们可以去试试哦！

原文链接：https://juejin.cn/post/7444878635717443595