摘要：近期蚂蚁集团推出的开源工具Ant Design X，可以帮助我们快速搭建类似 ChatGPT 的对话界面，而且界面更加好看，偏国内用户喜爱风格。
对于很多计划做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 助手、问答系统，都可以通过它轻松完成。
通用: 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 = => ( );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的框架转换，非常的美观舒适。
效果如下：
Ant Design X 不仅是开发者构建聊天界面的利器，更是各种 AI 应用的通用框架，以下是它的一些实际应用场景：
1、智能客服系统
轻松实现自动回复、用户交互的 AI 客服界面。
2、企业 AI 助手
在企业内部打造效率工具，例如文档检索、任务管理助手。
3、知识问答系统
快速构建专业问答平台，支持自定义知识库与问答逻辑。
对于开发者来说，特别对于不擅长前端的开发工程师来说，Ant Design X 是一个非常贴心的工具包，解决了从零设计和开发 AI 对话界面的痛点，让构建专业的聊天界面变得简单、高效。
它不仅缩短了开发周期，还提供了高度的灵活性，而且还开篇了全新的UI设计范式，让UI交互更加顺心。
如果你正在开发和 AI 交互相关的应用，这款开源工具包绝对值得一试！
GitHub 地址：https://github.com/ant-design/x
本文，完。觉得本篇文章不错的，记得随手点个赞、收藏和转发三连，感谢感谢~如果想第一时间收到推送，请记得关注我们⭐~
来源：AIGC研究社一点号
