开箱即用，阿里开源！专业AI 聊天界面工具包：Ant Design X

Ant Design X是一个基于Ant Design体系的创新解决方案，为构建高效的AI交互界面提供了便利和支持。从精细的原子组件到快速集成的模型服务，Ant Design X让开发者能轻松应对各种需求。本文将结合实际场景，展示Ant Design X的功能与使用方法。

为何选择Ant Design X？

核心优势

🌟 企业级最佳实践：基于RICH交互范式，优化AI交互体验，满足企业级需求。
🌈 灵活多样的原子组件：覆盖大多数AI对话场景，助力快速搭建个性化界面。
⚡ 开箱即用的模型集成：支持对接符合OpenAI标准的模型推理服务，简化开发流程。
🔄 高效的数据流管理：提供强大的数据流管理工具，提高开发效率。
🎨 深度主题定制：支持细粒度的样式调整，满足多样化和个性化需求。

快速安装与导入

通过以下命令安装Ant Design X：

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

浏览器引入

在浏览器中使用时，可以通过<script>和<link>标签直接引入文件，并使用全局变量antdx：

<script src="antd.min.js"></script>
<link rel="stylesheet" href="antd.min.css">

注意：不推荐使用已构建的文件方式，因为这样无法按需加载模块，同时难以快速获得底层依赖的Bug修复支持。

核心功能与场景示例

1. 原子组件：快速构建对话界面

Ant Design X基于RICH交互范式，提供了大量的原子组件。以下是一个简单对话框的示例代码：

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;

2. 模型集成：轻松对接AI推理服务

Ant Design X提供了useXAgent和XRequest等工具，帮助开发者快速对接标准化的模型推理服务。以下是一个对接Qwen模型的示例：

import { useXAgent, Sender, XRequest } from '@ant-design/x';
import React from 'react';const { create } = XRequest({baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',dangerouslyApiKey: process.env['DASHSCOPE_API_KEY'],model: 'qwen-plus',
});const Component: React.FC = () => {const [agent] = useXAgent({request: async (info, callbacks) => {const { messages, message } = info;const { onUpdate } = callbacks;let content: string = '';try {create({messages: [{ role: 'user', content: message }],stream: true,},{onSuccess: (chunks) => {console.log('sse chunk list', chunks);},onError: (error) => {console.log('error', error);},onUpdate: (chunk) => {console.log('sse object', chunk);const data = JSON.parse(chunk.data);content += data?.choices[0].delta.content;onUpdate(content);},},);} catch (error) {// handle error}},});function onRequest(message: string) {agent.request({ message },{onUpdate: () => {},onSuccess: () => {},onError: () => {},},);}return <Sender onSubmit={onRequest} />;
};export default Component;

3. 数据流管理：高效处理对话数据

通过useXChat工具，可以轻松管理AI对话应用中的数据流。以下是一个对接OpenAI服务的示例：

import { useXAgent, useXChat, Sender, Bubble } from '@ant-design/x';
import OpenAI from 'openai';
import React from 'react';const client = new OpenAI({apiKey: process.env['OPENAI_API_KEY'],dangerouslyAllowBrowser: true,
});const Demo: React.FC = () => {const [agent] = useXAgent({request: async (info, callbacks) => {const { messages, message } = info;const { onSuccess, onUpdate, onError } = callbacks;let content: string = '';try {const stream = await client.chat.completions.create({model: 'gpt-4o',messages: [{ role: 'user', content: message }],stream: true,});for await (const chunk of stream) {content += chunk.choices[0]?.delta?.content || '';onUpdate(content);}onSuccess(content);} catch (error) {// handle error}},});const {onRequest,messages,} = useXChat({ agent });const items = messages.map(({ message, id }) => ({key: id,content: message,}));return (<div><Bubble.List items={items} /><Sender onSubmit={onRequest} /></div>);
};export default Demo;