开箱即用,阿里开源!专业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都是一个值得信赖的选择。

相关推荐
阿坡RPA9 小时前
手搓MCP客户端&服务端:从零到实战极速了解MCP是什么?
人工智能·aigc
用户277844910499310 小时前
借助DeepSeek智能生成测试用例:从提示词到Excel表格的全流程实践
人工智能·python
机器之心10 小时前
刚刚,DeepSeek公布推理时Scaling新论文,R2要来了?
人工智能
算AI12 小时前
人工智能+牙科:临床应用中的几个问题
人工智能·算法
凯子坚持 c13 小时前
基于飞桨框架3.0本地DeepSeek-R1蒸馏版部署实战
人工智能·paddlepaddle
你觉得20513 小时前
哈尔滨工业大学DeepSeek公开课:探索大模型原理、技术与应用从GPT到DeepSeek|附视频与讲义下载方法
大数据·人工智能·python·gpt·学习·机器学习·aigc
8K超高清13 小时前
中国8K摄像机:科技赋能文化传承新图景
大数据·人工智能·科技·物联网·智能硬件
hyshhhh13 小时前
【算法岗面试题】深度学习中如何防止过拟合?
网络·人工智能·深度学习·神经网络·算法·计算机视觉
薛定谔的猫-菜鸟程序员14 小时前
零基础玩转深度神经网络大模型:从Hello World到AI炼金术-详解版(含:Conda 全面使用指南)
人工智能·神经网络·dnn
币之互联万物14 小时前
2025 AI智能数字农业研讨会在苏州启幕,科技助农与数据兴业成焦点
人工智能·科技