开箱即用，大厂开源！专业 AI 聊天界面工具包：Ant Design X，AI客服、AI助手、智能问答套着就能用。 - 文章 - 开发者社区

点击上方“蓝色字体”关注我，每天推送“实用有趣的项目”！

对于很多计划做AI产品的企业和开发者来说，构建一个专业的 AI 聊天界面是第一需求。

如今 AI 发展态势很好，开源生态也俱佳，所以没有必要去单独开发这类需求功能。

不论是借助 AI 编程工具（Cursor、blot、v0等）还是参考开源项目都是最适宜的选择。

近期蚂蚁集团推出的开源工具 Ant Design X ，可以帮助我们快速搭建类似 ChatGPT 的对话界面，而且界面更加好看，偏国内用户喜爱风格。

不用从零开始写代码，直接用他们做好的AI Web框架即可。只需自己接入AI模型，进行调用就行了。

picture.image

项目介绍

Ant Design X 是由蚂蚁集团和 Ant Design 开源社区开源的一款前端 AI 界面项目，专门为构建 AI 聊天界面和 web 应用设计。

本质上是一个 React UI 库，用于构建由 AI 驱动的界面，一键接入智能对话组件与 API 服务。

采用了RICH AI 设计范式 ：Intention 意图、Role 角色、Conversation 对话、Hybrid UI 混合界面，提升人机交互的产品体验。

它提供了丰富的功能和高度可定制的组件，使得开发者无需从零开始设计和开发。无论是创建智能客服系统，还是实现 AI 助手、问答系统，都可以通过它轻松完成。

picture.image

核心功能

• 🌈 源自企业级 AI 产品的最佳实践 ：基于 RICH 交互范式，提供卓越的 AI 交互体验
• 🧩 灵活多样的原子组件 ：覆盖绝大部分 AI 对话场景，助力快速构建个性化 AI 交互页面
• ⚡ 开箱即用的模型对接能力 ：轻松对接符合 OpenAI 标准的模型推理服务
• 🔄 高效管理对话数据流 ：提供好用的数据流管理功能，让开发更高效
• 📦 丰富的样板间支持 ：提供多种模板，快速启动 LUI 应用开发
• 🛡 TypeScript 全覆盖 ：采用 TypeScript 开发，提供完整类型支持，提升开发体验与可靠性
• 🎨 深度主题定制能力 ：支持细粒度的样式调整，满足各种场景的个性化需求

界面展示

picture.image

快速使用

只需几个简单步骤即可快速开始：

① 安装工具包（3种安装命令）：


 
 
 
 
   
npm install @ant-design/x --save  
  
yarn add @ant-design/x  
  
pnpm add @ant-design/x

② 导入组件，构建聊天界面：

Ant Design X 是基于 RICH 交互范式实现的，所以在不同的交互阶段官方也提供了大量的原子组件，帮助我们灵活搭建 AI 对话应用：

通用 : Bubble - 消息气泡、Conversations - 会话管理

唤醒 : Welcome - 欢迎、Prompts - 提示集

表达 : Sender - 发送框、Attachment - 附件、Suggestion - 快捷指令

确认 : ThoughtChain - 思维链


 
 
 
 
   
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;

③ 接入 AI 模型，实现对话功能：

可与 OpenAI、阿里通义千问等主流模型直接对接，通过后端接口完成消息交互。


 
 
 
 
   
import { XRequest } from '@ant-design/x';  
  
const xRequest = XRequest({  
  baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',  
  model: 'qwen-plus',  
  // 请谨慎在生产环境使用！  
  dangerouslyApiKey: 'DASHSCOPE\_API\_KEY',  
});  
  
function request() {  
  xRequest.create(  
    {  
      // 对话消息  
      messages: [  
        {  
          role: 'user',  
          content: 'Hello',  
        },  
      ],  
      // 是否流式渲染  
      stream: true,  
    },  
    {  
      // 成功回调  
      onSuccess: (sseChunks) => {  
        // 在请求完成时触发  
        // 这里将得到已经解析好的 sseChunks  
      },  
      onError: (error) => {  
        // 在请求异常时触发  
      },  
      onUpdate: (sse) => {  
        // 在流更新时触发  
        // 这里将得到已经解析好的 sse 对象  
      },  
    },  
  );  
}