当前位置: 首页 > news >正文

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

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提供了useXAgentXRequest等工具,帮助开发者快速对接标准化的模型推理服务。以下是一个对接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都是一个值得信赖的选择。

相关文章:

开箱即用,阿里开源!专业AI 聊天界面工具包:Ant Design X

Ant Design X是一个基于Ant Design体系的创新解决方案&#xff0c;为构建高效的AI交互界面提供了便利和支持。从精细的原子组件到快速集成的模型服务&#xff0c;Ant Design X让开发者能轻松应对各种需求。本文将结合实际场景&#xff0c;展示Ant Design X的功能与使用方法。 为…...

详解版本控制工作原理及优势,常见的版本控制系统对比(HelixCore、Git、SVN等)

什么是版本控制软件&#xff1f;从基础层面来说&#xff0c;版本控制&#xff08;也可称版本管理&#xff09;就是随时间跟踪和管理文件变更的过程&#xff0c;而版本控制软件有助于实现这一过程的自动化。但这仅仅是其功能及其重要性的开端。 什么是版本控制&#xff1f; 版本…...

Vue2 vs Vue3:核心原理与性能优化详解

Vue2 vs Vue3&#xff1a;核心原理与性能优化详解 ​Vue.js 是目前主流的前端框架之一&#xff0c;随着 Vue3 的发布&#xff0c;框架内部的实现和使用方式都发生了显著变化。本文将从 Vue2 和 Vue3 的核心实现原理出发&#xff0c;详细解析两者的区别&#xff0c;并分析 Vue3…...

Qt+GDAL属性计算软件开发记录

一.GDAL添加字段 void MainWindow::addField(QString fieldName){OGRFieldDefn * fieldDefn new OGRFieldDefn(fieldName.toStdString().c_str(), OFTInteger);ly->CreateField(fieldDefn);srand((int)time(NULL));while (true){OGRFeature * feature ly->GetNextFeat…...

在超表面中琼斯矩阵的使用

琼斯矩阵&#xff08;Jones Matrix&#xff09; 是一种线性代数方法&#xff0c;用于描述光的偏振状态和偏振变化&#xff0c;是偏振光学中重要的数学工具。它在 超表面理论设计 中广泛应用&#xff0c;尤其是在设计和调控光与物质相互作用时&#xff0c;例如偏振控制、相位调制…...

在macOS上从源码部署RAGFlow-0.14.1

一、macOS配置 1. macOS配置 我使用MacBook Pro&#xff0c;chip 是 Apple M3 Pro&#xff0c;Memory是18GB&#xff0c;macOS是 Sonoma 14.6.1。 2.安装Docker和Docker compose 官方要求 Docker ≥ 24.0.0 & Docker Compose ≥ v2.26.1&#xff0c;我的版本如下&#x…...

2-2-18-9 QNX系统架构之文件系统(二)

阅读前言 本文以QNX系统官方的文档英文原版资料为参考&#xff0c;翻译和逐句校对后&#xff0c;对QNX操作系统的相关概念进行了深度整理&#xff0c;旨在帮助想要了解QNX的读者及开发者可以快速阅读&#xff0c;而不必查看晦涩难懂的英文原文&#xff0c;这些文章将会作为一个…...

【经管数据】上市公司企业审计报告时滞数据、 年报披露时滞数据(2001-2022年)

测算方式&#xff1a;参考C刊《审计研究》窦笑晨&#xff08;2022&#xff09;老师的研究&#xff0c;从审计报告约定披露日期到审计报告实际披露日期之间的时间间隔。有关审计报告时滞的度量&#xff0c;现有研究大多采用资产负债表日与审计报告实际披露日期之间的间隔天数进行…...

debian ubuntu armbian部署asp.net core 项目 开机自启动

我本地的环境是 rk3399机器&#xff0c;安装armbian系统。 1.安装.net core 组件 sudo apt-get update && \sudo apt-get install -y dotnet-sdk-8.0或者安装运行库&#xff0c;但无法生成编译项目 sudo apt-get update && \sudo apt-get install -y aspnet…...

无人机地面遥控遥测技术与算法概述!

一、地面系统遥控检测核心技术 卫星遥测技术&#xff1a; 定义&#xff1a;卫星遥测技术是实现卫星与地面之间遥测数据传输的关键环节。 功能&#xff1a;传输卫星的状态信息、传感器采集的环境参数等。 关键技术&#xff1a; 调制解调技术&#xff1a;用于将数字遥测数据…...

游戏引擎学习第30天

仓库: https://gitee.com/mrxiao_com/2d_game 回顾 在这段讨论中&#xff0c;重点是对开发过程中出现的游戏代码进行梳理和进一步优化的过程。 工作回顾&#xff1a;在第30天&#xff0c;回顾了前一天的工作&#xff0c;并提到今天的任务是继续从第29天的代码开始&#xff0c…...

Django drf 快速使用

1. 安装: pip install djangorestframework 2. 添加rest_framework到您的INSTALLED_APPS设置。 settings.pyINSTALLED_APPS [...rest_framework, ] 3. 定义模型 models.pyfrom django.db import modelsclass BookModel(models.Model):name models.CharField(max_length64)…...

机器学习介绍与实战:案例解析与未来展望

一、机器学习概述 1. 什么是机器学习&#xff1f; 机器学习&#xff08;Machine Learning, ML&#xff09;是一种通过数据训练模型&#xff0c;使计算机能够自动从经验中学习的技术。它旨在让计算机在没有显式编程的情况下&#xff0c;能够从数据中提取模式、进行预测或决策。…...

【SCT71401】3V-40V Vin, 150mA, 2.5uA IQ,低压稳压器,替代SGM2203

SCT71401 3V-40V Vin, 150mA, 2.5uA IQ&#xff0c;低压稳压器&#xff0c;替代SGM2203 描述 SCT71401系列产品是一款低压差线性稳压器&#xff0c;设计用于3 V至40 V &#xff08;45V瞬态输入电压&#xff09;的宽输入电压范围和150mA输出电流。SCT71401系列产品使用3.3uF…...

2024.12.3总结

继周一把PPT初稿弄出来后&#xff0c;今晚进行了转正预答辩&#xff0c;主管&#xff0c;导师&#xff0c;团队里能来听答辩的人都来了&#xff0c;讲完后&#xff0c;自己都觉得自己讲得不好&#xff0c;基本上是照着PPT念的。 写PPT&#xff0c;改PPT,不停的预演答辩的过程&…...

Redis探秘Sentinel(哨兵模式)

概述 Redis的高可用机制有持久化、复制、哨兵和集群。其主要的作用和解决的问题分别是&#xff1a; 持久化&#xff1a;持久化是最简单的高可用方法(有时甚至不被归为高可用的手段)&#xff0c;主要作用是数据备份&#xff0c;即将数据存储在硬盘&#xff0c;保证数据不会因进…...

Linux C/C++编程之静态库

【图书推荐】《Linux C与C一线开发实践&#xff08;第2版&#xff09;》_linux c与c一线开发实践pdf-CSDN博客《Linux C与C一线开发实践&#xff08;第2版&#xff09;&#xff08;Linux技术丛书&#xff09;》(朱文伟&#xff0c;李建英)【摘要 书评 试读】- 京东图书 (jd.com…...

strlen函数用法,模拟实现

一、strlen 函数用法 用来求字符串长度&#xff0c;从我们给的地址开始&#xff0c;往后数&#xff0c;直到遇到 \0 停止&#xff0c;返回数的个数&#xff0c;不包括 \0 返回值类型是无符号整形 char arr[ ]"bvcxz"; printf("%u ",strlen(arr)); …...

云原生后端:解锁高效可扩展应用的魔法世界

目录 一、云原生后端的崛起&#xff1a;时代的必然选择 二、云原生后端的基石&#xff1a;容器化与 Docker &#xff08;一&#xff09;容器化的概念与优势 &#xff08;二&#xff09;Docker&#xff1a;容器化的明星工具 三、微服务架构&#xff1a;云原生后端的灵魂 &…...

大数据新视界 -- Hive 数据湖架构中的角色与应用(上)(25 / 30)

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…...

Linux 文件类型,目录与路径,文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

Debian系统简介

目录 Debian系统介绍 Debian版本介绍 Debian软件源介绍 软件包管理工具dpkg dpkg核心指令详解 安装软件包 卸载软件包 查询软件包状态 验证软件包完整性 手动处理依赖关系 dpkg vs apt Debian系统介绍 Debian 和 Ubuntu 都是基于 Debian内核 的 Linux 发行版&#xff…...

安宝特方案丨XRSOP人员作业标准化管理平台:AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

4. TypeScript 类型推断与类型组合

一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式&#xff0c;自动确定它们的类型。 这一特性减少了显式类型注解的需要&#xff0c;在保持类型安全的同时简化了代码。通过分析上下文和初始值&#xff0c;TypeSc…...

android RelativeLayout布局

<?xml version"1.0" encoding"utf-8"?> <RelativeLayout xmlns:android"http://schemas.android.com/apk/res/android"android:layout_width"match_parent"android:layout_height"match_parent"android:gravity&…...

Kubernetes 网络模型深度解析:Pod IP 与 Service 的负载均衡机制,Service到底是什么?

Pod IP 的本质与特性 Pod IP 的定位 纯端点地址&#xff1a;Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址&#xff08;如 10.244.1.2&#xff09;无特殊名称&#xff1a;在 Kubernetes 中&#xff0c;它通常被称为 “Pod IP” 或 “容器 IP”生命周期&#xff1a;与 Pod …...

go 里面的指针

指针 在 Go 中&#xff0c;指针&#xff08;pointer&#xff09;是一个变量的内存地址&#xff0c;就像 C 语言那样&#xff1a; a : 10 p : &a // p 是一个指向 a 的指针 fmt.Println(*p) // 输出 10&#xff0c;通过指针解引用• &a 表示获取变量 a 的地址 p 表示…...

Java并发编程实战 Day 11:并发设计模式

【Java并发编程实战 Day 11】并发设计模式 开篇 这是"Java并发编程实战"系列的第11天&#xff0c;今天我们聚焦于并发设计模式。并发设计模式是解决多线程环境下常见问题的经典解决方案&#xff0c;它们不仅提供了优雅的设计思路&#xff0c;还能显著提升系统的性能…...