专注于 AI 场景组件库 - Ant Design X

Overview

在人工智能和机器学习技术日益成熟的今天，构建由 AI 驱动的用户界面成为了软件开发的一大趋势。为了简化这一过程，Ant Design X 🚀 应需而生！这是一个基于 Ant Design 的全新 AGI 组件库，使用 React 构建 AI 驱动的用户交互变得更简单了，它可以无缝集成 AI 聊天组件和 API 服务，简化 AI 界面的开发流程。

特性

• 先进的交互体验：基于 RICH 交互范式，提供卓越的 AI 交互体验。

• 多样化的组件选择：覆盖绝大部分 AI 对话场景，助力快速构建个性化 AI 交互页面

• 即插即用的模型集成：轻松对接符合 OpenAI 标准的模型推理服务

• 高效管理对话数据流：提供好用的数据流管理功能，让开发更高效

• 丰富多样的模板支持：提供多种模板，快速启动 LUI 应用开发

• TypeScript全覆盖：采用 TypeScript 开发，提供完整类型支持，提升开发体验与可靠性

• 定制化主题设计：支持细粒度的样式调整，满足各种场景的个性化需求

安装与使用

Ant Design X 的安装非常简单，可以通过以下命令进行：

1
2
3
4
5
6
7
8
9

npm install @ant-design/x --save

// or

yarn add @ant-design/x

// or

pnpm add @ant-design/x

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

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;

组件概览

Ant Design X 提供了一系列基于 RICH 交互范式的组件，包括：

Bubble：消息气泡

用于聊天的气泡组件：

Conversations：会话管理

需要对多个会话进行管理，查看历史会话列表：

Welcome：欢迎界面

清晰传达给用户可实现的意图范围和预期功能，使用合适的欢迎推荐组件，可以有效降低用户学习成本，让用户快速了解并顺利开始

Prompts：提示集

Prompts 组件用于显示一组与当前上下文相关的预定义的问题或建议

Sender：发送框

需要构建一个对话场景下的输入框

Attachment：附件

需要展示一组附件信息集合的场景

Suggestion：快捷指令

构建一个对话场景下的输入框，用于给予用户快捷提示的组件

ThoughtChain：思维链

调试和跟踪复杂 Agent System 中的调用链，类似的链式场景中使用

更多功能

Ant Design X 提供了一系列强大的核心功能，以支持复杂的 AI 驱动界面开发需求。以下是一些关键功能及其简要说明：

useXAgent - 模型调度

useXAgent 是一个用于模型调度的 React 钩子，它允许开发者通过一个 Agent 对象来管理和调度不同的 AI 模型。这个钩子提供了一个简洁的接口来处理模型请求和响应，使得集成和使用 AI 模型变得更加简单。

useXChat - 数据管理

useXChat 是一个数据管理钩子，它通过 useXAgent 进行会话数据的管理，并产出供页面渲染使用的数据。这个钩子简化了对话数据流的管理，使得开发者可以专注于构建用户界面，而不必担心底层的数据逻辑。

XStream - 数据流处理

XStream 是一个流处理工具，它能够将 SSE（Server-Sent Events）协议的 ReadableStream 转换为易于处理的记录（Record），或者将任何协议的 ReadableStream 解码并读取。这个工具为处理实时数据流提供了强大的支持。

XRequest - 请求发起

XRequest 是一个请求工具，它允许开发者向符合 OpenAI 标准的 LLM（Large Language Models）发起请求。这个工具封装了请求的细节，使得开发者可以轻松地与 AI 模型进行交互。

XProvider - 全局化配置

XProvider 继承自 Ant Design 的 ConfigProvider，并且为 Ant Design X 中的组件提供全局化配置。通过 XProvider，开发者可以统一设置组件的主题、语言等配置，实现一致的用户体验。