当前位置：首页 > article >正文

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

article 2025/3/9 10:31:41

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;