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

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

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

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

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

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

---

项目介绍

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

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

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

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

核心功能

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

界面展示

快速使用

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

① 安装工具包（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 对象
      },
    },
  );
}

正在接入 Ant Design X 的开源产品

我去年在桌面上疯狂使用的一款开源AI桌面应用：AI0x0。

正逐步往Ant Design X的框架转换，非常的美观舒适。

效果如下：

同时还采用多种AI场景体验

适用场景

Ant Design X 不仅是开发者构建聊天界面的利器，更是各种 AI 应用的通用框架，以下是它的一些实际应用场景：

1、智能客服系统
轻松实现自动回复、用户交互的 AI 客服界面。

2、企业 AI 助手
在企业内部打造效率工具，例如文档检索、任务管理助手。

3、知识问答系统
快速构建专业问答平台，支持自定义知识库与问答逻辑。

写在最后

对于开发者来说，特别对于不擅长前端的开发工程师来说，Ant Design X 是一个非常贴心的工具包，解决了从零设计和开发 AI 对话界面的痛点，让构建专业的聊天界面变得简单、高效。

它不仅缩短了开发周期，还提供了高度的灵活性，而且还开篇了全新的UI设计范式，让UI交互更加顺心。

如果你正在开发和 AI 交互相关的应用，这款开源工具包绝对值得一试！