Ant Design X 正式发布：打造卓越的 AI 界面解决方案！

前言

在人工智能和机器学习技术日益成熟的今天，构建由 AI 驱动的用户界面成为了软件开发的一大趋势。为了简化这一过程， Ant Design X 应需而生！

Ant Design X 是一个遵循 Ant Design 设计体系的 React UI 库，旨在帮助开发者轻松打造 AI 驱动的界面。

Node.js 也可以用上 macOS Vision OCR 了！

Ant Design X 简介

Ant Design X 是一个遵循现代设计原则的 React UI 库，它集成了 智能对话组件 和 API 服务 ，致力于简化 AI 界面的开发流程。

这个库提供了丰富的组件和模板，并利用 TypeScript 提供全面的类型支持，增强了开发的体验和可靠性。

Ant Design X 核心优势

Ant Design X 的核心优势包括：

• 先进的交互体验 ：基于 RICH 交互范式，提供卓越的 AI 交互体验。
• 多样化的组件选择 ：覆盖广泛的 AI 对话场景，助力快速构建个性化 AI 交互页面。
• 即插即用的模型集成 ：轻松集成符合 OpenAI 标准的模型推理服务。
• 高效的数据流管理 ：提供强大的数据流管理功能，提升开发效率。
• 多样的模板支持 ：提供多种模板，快速启动 LUI 应用开发。
• TypeScript 支持 ：采用 TypeScript 开发，提供完整的类型支持，增强开发体验与可靠性。
• 定制化主题设计 ：支持细致的样式调整，满足各种场景的个性化需求。

安装与使用

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

npm install @ant-design/x --save

或者

yarn add @ant-design/x

以及

pnpm add @ant-design/x

组件概览

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

Bubble：消息气泡

用于聊天的气泡组件：

Conversations：会话管理

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

Welcome：欢迎界面

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

Prompts：提示集

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

Sender：发送框

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

Attachment：附件

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

Suggestion：快捷指令

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

ThoughtChain：思维链

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

几行代码实现一个聊天界面

import { Bubble, Sender } from "@ant-design/x";

const messages = [
  {
    content: "Hello, Ant Design X!",
    role: "user",
  },
];

const App = () => (
  <div>
    <Bubble.List items={messages} />
    <br />
    <Sender />
  div>
);

export default App;

效果展示：

升级版 本聊天界面可以参考官方案例： https://x.ant.design/docs/playground/independent-cn