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;
总结
Ant Design X通过其强大的原子组件库、便捷的模型集成工具以及高效的数据流管理能力，为开发者提供了快速构建AI驱动界面的全方位支持。不论是构建简单的对话应用，还是实现复杂的交互逻辑，Ant Design X都是一个值得信赖的选择。
