Ant Design X：用最少的代码快速构建 AI 聊天界面

Ant Design X：用最少的代码快速构建 AI 聊天界面

概述

随着人工智能（AI）技术的迅猛发展，尤其是通用人工智能（AGI）的进步，人机交互的方式正在经历深刻的变革。传统的图形用户界面（GUI）逐渐被更加自然、人性化的交互模式所取代。

为了应对这一变化，Ant Design X 团队提出了一种名为 RICH 的新设计范式，并开发了一系列专注于 React 生态的先进 AI 组件库，以简化与人工智能集成的开发过程，帮助开发者快速集成 AI 产品。

RICH 设计范式

RICH 范式是 Ant Design X 为适应 AGI 时代提出的一个人机交互界面设计的新框架。它由四个核心要素组成：意图（Intention）、角色（Role）、对话（Conversation）、混合界面（Hybrid UI），每个要素用于解决特定的设计挑战，以确保用户体验的最佳化。

1. Intention (意图):

   • AI 系统应能够理解用户的模糊意图，并协助用户自动完成方案计划和步骤拆解，进而推动任务的执行。

2. Role (角色):

   • AI 系统在交互中扮演特定的角色，如助手、老师或朋友等，来匹配用户的意图，确保互动顺畅且符合用户的预期。

3. Conversation (对话):

   • 用户可以通过自然语言与 AI 进行对话，逐步澄清和细化他们的意图。这种对话式的交互方式允许用户以更加直观和人性化的方式表达需求。

4. Hybrid UI (混合界面):

   • 混合界面结合了传统的图形用户界面元素和新的交互模式，如语音、手势等，提供一个融合多种交互方式的平台，使用户的操作和机器的反馈更加自然流畅。

Ant Design X 组件库

Ant Design X 提供了一个专注于 React 生态的 AI 组件库，帮助开发者轻松地将对话 AI 集成到应用中。该库包括以下主要功能：

• 高度定制化的 AI 组件：允许开发者轻松地将对话 AI 集成到应用中，例如 Bubble 对话气泡、Conversations 管理对话、Welcome 欢迎界面、Prompts 提示集、Attachment 输入附件、Sender 输入框、Suggestion 快捷指令、ThoughtChain 思维链等。

• API 解决方案：支持开发者通过令牌认证直接接入现有 AI 服务，无缝衔接与 AI 的对话和交互。例如，useXAgent 模型调度、useXChat 数据管理、XStream 流处理、XRequest 请求管理和 XProvider 全局化配置等工具，帮助开发者高效管理数据流和模型推理服务。

• 按需加载：默认支持基于 ES modules 的 tree shaking，确保代码的高效性和模块化。

• TypeScript 支持：使用 TypeScript 编写并提供了完整的定义文件，增强了类型安全性和开发体验。

官网地址 ：https://ant-design-x.antgroup.com/

github：https://github.com/ant-design/x

安装

用Vite先搭建一个React项目

yarn create vite ant-design-x --template react

安装@ant-design/x

yarn add @ant-design/x

基本使用

先试下官方示例代码，展示消息气泡和发送框：

import {
   
  // 消息气泡
  Bubble,
  // 发送框
  Sender,
} from '@ant-design/x';

const messages = [
  {