Ant Design X是一個(gè)基于Ant Design體系的創(chuàng)新解決方案，為構(gòu)建高效的AI交互界面提供了便利和支持。從精細(xì)的原子組件到快速集成的模型服務(wù)，Ant Design X讓開(kāi)發(fā)者能輕松應(yīng)對(duì)各種需求。本文將結(jié)合實(shí)際場(chǎng)景，展示Ant Design X的功能與使用方法。

---

為何選擇Ant Design X？

核心優(yōu)勢(shì)

• 🌟 企業(yè)級(jí)最佳實(shí)踐：基于RICH交互范式，優(yōu)化AI交互體驗(yàn)，滿足企業(yè)級(jí)需求。
• 🌈 靈活多樣的原子組件：覆蓋大多數(shù)AI對(duì)話場(chǎng)景，助力快速搭建個(gè)性化界面。
• ? 開(kāi)箱即用的模型集成：支持對(duì)接符合OpenAI標(biāo)準(zhǔn)的模型推理服務(wù)，簡(jiǎn)化開(kāi)發(fā)流程。
• 🔄 高效的數(shù)據(jù)流管理：提供強(qiáng)大的數(shù)據(jù)流管理工具，提高開(kāi)發(fā)效率。
• 🎨 深度主題定制：支持細(xì)粒度的樣式調(diào)整，滿足多樣化和個(gè)性化需求。

---

快速安裝與導(dǎo)入

通過(guò)以下命令安裝Ant Design X：

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

瀏覽器引入

在瀏覽器中使用時(shí)，可以通過(guò)<script>和<link>標(biāo)簽直接引入文件，并使用全局變量antdx：

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

注意：不推薦使用已構(gòu)建的文件方式，因?yàn)檫@樣無(wú)法按需加載模塊，同時(shí)難以快速獲得底層依賴的Bug修復(fù)支持。

---

核心功能與場(chǎng)景示例

1. 原子組件：快速構(gòu)建對(duì)話界面

Ant Design X基于RICH交互范式，提供了大量的原子組件。以下是一個(gè)簡(jiǎn)單對(duì)話框的示例代碼：

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. 模型集成：輕松對(duì)接AI推理服務(wù)

Ant Design X提供了useXAgent和XRequest等工具，幫助開(kāi)發(fā)者快速對(duì)接標(biāo)準(zhǔn)化的模型推理服務(wù)。以下是一個(gè)對(duì)接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. 數(shù)據(jù)流管理：高效處理對(duì)話數(shù)據(jù)

通過(guò)useXChat工具，可以輕松管理AI對(duì)話應(yīng)用中的數(shù)據(jù)流。以下是一個(gè)對(duì)接OpenAI服務(wù)的示例：

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;

---

總結(jié)

Ant Design X通過(guò)其強(qiáng)大的原子組件庫(kù)、便捷的模型集成工具以及高效的數(shù)據(jù)流管理能力，為開(kāi)發(fā)者提供了快速構(gòu)建AI驅(qū)動(dòng)界面的全方位支持。不論是構(gòu)建簡(jiǎn)單的對(duì)話應(yīng)用，還是實(shí)現(xiàn)復(fù)雜的交互邏輯，Ant Design X都是一個(gè)值得信賴的選擇。