Ant Design X 2.7 发布：RICH 范式与 Hybrid UI 重塑 AI 界面开发

1. 什么是 Ant Design X？#

Ant Design X（@ant-design/x）是 Ant Design 团队推出的面向 AI 驱动界面的 React 组件库。它并不是 Ant Design 5 的替代品，而是在原有设计体系之上，专为构建 AI 聊天、智能助手、Agent 控制台等场景设计的一套新组件体系。

2026 年 4 月 30 日，Ant Design X 发布了 v2.7.0 版本，生态已涵盖 5 个核心包：

包名	用途	最新版本
`@ant-design/x`	核心 AI 界面组件库	2.7.0
`@ant-design/x-markdown`	流式 Markdown 渲染器	2.7.0
`@ant-design/x-sdk`	AI 数据流管理 SDK	2.7.0
`@ant-design/x-card`	A2UI 动态卡片渲染	2.7.0
`@ant-design/x-skill`	AI 编码助手技能库	2.7.0

2. 设计哲学：RICH 交互范式#

Ant Design X 的核心设计理念是 RICH 范式，它将 AI 交互拆解为四个阶段：

1
RICH 交互流程
2
├── R — Role（角色意图）
3
│   ├── Welcome 欢迎组件
4
│   └── Prompts 提示集
5
├── I — Intention（意图唤醒）
6
│   ├── Sender 输入框
7
│   ├── Attachment 附件
8
│   └── Suggestion 快捷建议
9
├── C — Conversation（会话沟通）
10
│   ├── Bubble 对话气泡
11
│   ├── Conversations 会话列表
12
│   └── Notification 通知
13
└── H — Hybrid UI（混合界面）
14
    ├── Think 思考过程
15
    ├── ThoughtChain 思维链
16
    ├── Actions 操作栏
17
    ├── FileCard 文件卡片
18
    ├── Sources 引用来源
19
    ├── Mermaid 图表渲染
20
    ├── Folder 文件树
21
    └── CodeHighlighter 代码高亮

RICH 不是线性流程，而是可组合的交互单元。你可以单独使用某个阶段的组件，也可以将它们组合成完整的 AI 应用。

3. Hybrid UI：融合 GUI 与自然语言#

Ant Design X 提出的 Hybrid UI (HUI) 概念试图解决一个核心矛盾：传统 GUI 操作效率高但学习成本大，自然语言交互灵活但意图表达模糊。

HUI 将交互模式分为三种：

模式	特点	适用场景
Do-heavy	GUI 为主，AI 辅助	结构化表单、数据录入
Chat-heavy	自然语言为主	开放式问答、内容生成
HUI 混合	GUI + Chat 自由切换	智能客服、Agent 控制台

这种设计让同一个界面既能通过传统表单精准操作，也能通过自然语言灵活表达，「鱼与熊掌兼得」。

4. 核心组件速览#

4.1 Bubble — 对话气泡#

Bubble 是展示对话内容的基础组件，支持多种角色和内容类型：

1
import { Bubble } from '@ant-design/x';
2

3
<Bubble
4
  placement="start"
5
  avatar={{ icon: <RobotOutlined /> }}
6
  content="你好，我是 AI 助手"
7
/>

4.2 Sender — 输入框#

Sender 是一个增强型输入组件，支持附件上传、语音输入和快捷建议：

1
import { Sender } from '@ant-design/x';
2

3
<Sender
4
  onSubmit={(value) => console.log(value)}
5
  placeholder="输入你的问题..."
6
/>

4.3 ThoughtChain — 思维链#

展示 AI Agent 的思考过程，让用户理解 AI 的推理路径：

1
import { ThoughtChain } from '@ant-design/x';
2

3
<ThoughtChain
4
  items={[
5
    { title: '分析问题', description: '识别关键词...', status: 'success' },
6
    { title: '检索知识库', description: '匹配到 3 条相关文档', status: 'success' },
7
    { title: '生成回答', status: 'pending' },
8
  ]}
9
/>

4.4 Sources — 引用来源#

展示 AI 回答的参考来源，增强可信度：

1
import { Sources } from '@ant-design/x';
2

3
<Sources
4
  items={[
5
    { title: 'React 官方文档', url: 'https://react.dev' },
6
    { title: 'Ant Design X 文档', url: 'https://x.ant.design' },
7
  ]}
8
/>

5. XMarkdown：流式 Markdown 渲染#

@ant-design/x-markdown 是一个专为 AI 流式输出优化的 Markdown 渲染引擎。它解决了传统 Markdown 渲染器在流式场景下的三个核心问题：

5.1 不完整语法容错#

当 AI 流式输出 $$E = mc^（公式未闭合）时，XMarkdown 不会崩溃，而是优雅降级渲染：

1
import { XMarkdown } from '@ant-design/x-markdown';
2

3
<XMarkdown
4
  content={streamingText}
5
  streaming={{ tail: '▋' }} // 流式光标指示器
6
/>

5.2 自定义流式尾部指示器#

v2.6.0 新增的 streaming.tail 配置支持自定义闪烁光标：

1
<XMarkdown
2
  content={streamingText}
3
  streaming={{
4
    tail: '▋',
5
    tailComponent: <BlinkingCursor />
6
  }}
7
/>

5.3 安全渲染#

v2.3.0 新增 escapeRawHtml 属性，防止 XSS 攻击：

1
<XMarkdown
2
  content={untrustedContent}
3
  escapeRawHtml={true}
4
/>

6. X SDK：AI 数据流管理#

@ant-design/x-sdk 封装了与 AI 模型交互的完整数据流：

6.1 XRequest — 请求管理#

1
import { XRequest } from '@ant-design/x-sdk';
2

3
const request = XRequest({
4
  baseURL: 'https://api.openai.com/v1',
5
  model: 'gpt-4o',
6
  apiKey: process.env.OPENAI_API_KEY,
7
});

v2.2.0 支持断线重连和自定义流分隔符：

1
XRequest({
2
  baseURL: 'https://api.example.com',
3
  model: 'custom-model',
4
  streamSeparator: '\n',      // 流分隔符
5
  partSeparator: 'data: ',    // 部分分隔符
6
  kvSeparator: ': ',          // 键值分隔符
7
});

6.2 useXChat — 会话管理#

1
import { useXChat } from '@ant-design/x-sdk';
2

3
const { messages, onRequest } = useXChat({
4
  request,
5
  queueRequest: true, // v2.3.0 新增：支持请求队列
6
});

7. X Card：A2UI 动态卡片#

v2.5.0 发布的 @ant-design/x-card 是整个生态最亮眼的新成员。它基于 A2UI 协议，允许 AI Agent 动态生成结构化 UI：

1
import { XCard } from '@ant-design/x-card';
2

3
<XCard
4
  // AI 返回的 A2UI JSON 描述
5
  a2ui={agentResponse}
6
  dataModel={userData}
7
/>

A2UI 的核心价值在于：AI 不只是返回文本，而是返回可交互的卡片。例如，AI 可以返回一个包含表单、图表、按钮的完整交互界面，而不仅仅是文字描述。

8. 快速上手#

8.1 安装#

1
# 核心组件库
2
npm install @ant-design/x
3

4
# 流式 Markdown（可选）
5
npm install @ant-design/x-markdown
6

7
# AI SDK（可选）
8
npm install @ant-design/x-sdk

8.2 一个完整的 AI 聊天应用#

1
import {
2
  Bubble,
3
  Conversations,
4
  Sender,
5
  XProvider,
6
} from '@ant-design/x';
7
import { XMarkdown } from '@ant-design/x-markdown';
8
import { useXChat, XRequest } from '@ant-design/x-sdk';
9

10
export default function ChatApp() {
11
  const request = XRequest({
12
    baseURL: 'https://api.openai.com/v1',
13
    model: 'gpt-4o',
14
    apiKey: process.env.NEXT_PUBLIC_OPENAI_API_KEY,
15
  });
16

17
  const { messages, onRequest } = useXChat({ request });
18

19
  return (
20
    <XProvider>
21
      <div style={{ height: '100vh', display: 'flex', flexDirection: 'column' }}>
22
        <Conversations
23
          items={messages.map((msg) => ({
24
            key: msg.id,
25
            label: msg.content.slice(0, 30),
26
          }))}
27
        />
28
        <div style={{ flex: 1, overflow: 'auto', padding: 16 }}>
29
          {messages.map((msg) => (
30
            <Bubble
31
              key={msg.id}
32
              placement={msg.role === 'user' ? 'end' : 'start'}
33
              content={<XMarkdown content={msg.content} />}
34
            />
35
          ))}
36
        </div>
37
        <Sender onSubmit={onRequest} />
38
      </div>
39
    </XProvider>
40
  );
41
}

不到 40 行代码，就实现了一个带有流式 Markdown 渲染、会话管理、AI 对话的完整聊天应用。

9. 2026 年版本演进#

Ant Design X 在 2026 年保持了月度 minor 版本的发布节奏：

版本	日期	关键更新
v2.7.0	4 月 30 日	XProvider `zeroRuntime`、XCard 路径引用解析
v2.6.0	4 月 17 日	XMarkdown 尾部指示器组件、x-components/x-card skill
v2.5.0	3 月 31 日	🔥 X Card 动态卡片模块发布
v2.4.0	3 月 13 日	🔥 Folder 文件树组件、x-markdown skill
v2.3.0	2 月 26 日	useXChat `queueRequest`、XMarkdown `escapeRawHtml`
v2.2.0	1 月	Mermaid 配置、XRequest 重连、XMarkdown 性能测试

可以看到，团队在持续探索 AI 界面即代码 的边界——从流式 Markdown 到动态卡片渲染，每一步都在降低 AI 应用的开发门槛。

10. 与竞品对比#

维度	Ant Design X	Vercel AI SDK	LangChain
定位	UI 组件库 + 数据流	数据流 + 轻量 UI	AI 编排框架
UI 体系	✅ 完整组件库	⚠️ 基础组件	❌ 无
流式 Markdown	✅ XMarkdown	⚠️ 基础支持	❌ 无
混合界面	✅ Hybrid UI	❌	❌
框架绑定	React 专属	React/Vue/Svelte	跨平台

Ant Design X 的差异化优势在于完整的 UI 组件体系 + 流式渲染引擎，而不仅仅是数据流管理层。

11. 总结#

Ant Design X 的定位非常清晰：不是又一个 AI SDK，而是一套完整的 AI 界面解决方案。它的核心价值在于：

RICH 范式提供了 AI 交互的标准化设计语言
Hybrid UI打破了 GUI 和 Chat 的界限
XMarkdown解决了流式渲染的核心痛点
X Card开启了 AI 动态生成 UI 的可能性
开箱即用：与 Ant Design 生态无缝集成，React 开发者零学习成本

如果你正在开发 AI 聊天产品、Agent 控制台或智能助手界面，Ant Design X 是目前 React 生态中最成熟、最完整的选择。