开箱即用,阿里开源!专业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:

bash 复制代码
npm install @ant-design/x --save
yarn add @ant-design/x
pnpm add @ant-design/x

浏览器引入

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

html 复制代码
<script src="antd.min.js"></script>
<link rel="stylesheet" href="antd.min.css">

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


核心功能与场景示例

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

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

javascript 复制代码
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提供了useXAgentXRequest等工具,帮助开发者快速对接标准化的模型推理服务。以下是一个对接Qwen模型的示例:

javascript 复制代码
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服务的示例:

javascript 复制代码
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都是一个值得信赖的选择。

相关推荐
HhhDreamof_7 分钟前
云贝餐饮 最新 V3 独立连锁版 全开源 多端源码 VUE 可二开
前端·vue.js·开源
就叫飞六吧20 分钟前
如何判断你的PyTorch是GPU版还是CPU版?
人工智能·pytorch·python
zsffuture23 分钟前
opencv 读取3G大图失败,又不想重新编译opencv ,可以如下操作
人工智能·opencv·webpack
AntBlack1 小时前
别说了别说了 ,Trae 已经在不停优化迭代了
前端·人工智能·后端
訾博ZiBo1 小时前
AI日报 - 2025年04月28日
人工智能
自由鬼1 小时前
高性能的开源网络入侵检测和防御引擎:Suricata介绍
网络·安全·网络安全·开源·系统安全·入侵检测
annus mirabilis1 小时前
解析Suna:全球首款开源通用AI智能体
人工智能·开源·suna
riveting2 小时前
SD2351核心板:重构AI视觉产业价值链的“超级节点”
大数据·linux·图像处理·人工智能·重构·智能硬件
Lilith的AI学习日记2 小时前
大语言模型中的幻觉现象深度解析:原理、评估与缓解策略
人工智能·语言模型·自然语言处理·aigc·ai编程
闭月之泪舞2 小时前
OpenCv高阶(十)——光流估计
人工智能·opencv·计算机视觉