🌈 企业级LLM组件，开箱即用

@ant-design/x 基于RICH交互范式，提供了一套丰富的原子组件，适用于不同的交互阶段，帮助您灵活构建AI应用。详情请见 这里。

⚡️ 连接模型代理并高效管理数据流

@ant-design/x-sdk 提供了一组实用的 API，帮助开发者开箱即用地管理 AI 应用的数据流。详情请参见 这里。

✨ Markdown 渲染器

@ant-design/x-markdown 旨在提供一个适合流式处理、高度可扩展且性能优异的 Markdown 渲染器。它支持公式的流式渲染、代码高亮、Mermaid 图表等功能。详情请参见 这里。

🎴 动态卡片渲染器

@ant-design/x-card 是一个基于 A2UI 协议的动态卡片渲染组件，使 AI 代理能够通过结构化的 JSON 消息流动态构建和渲染交互式界面。它支持流式渲染、数据绑定和响应式更新。详情请参见 这里。

🚀 技能库

@ant-design/x-skill 是专为 Ant Design X 设计的智能技能库，提供了一系列精心设计的 Agent 技能。这些技能可以显著提升开发效率，帮助您快速构建高质量的 AI 对话应用，并有效解决开发过程中遇到的各种问题。详情请参见 这里。

使用情况

Ant Design X 在蚂蚁集团内部的 AI 驱动用户界面中得到了广泛应用。如果您所在的公司或产品正在使用 Ant Design X，欢迎在此处留言 这里。

本地开发

antx 使用 npm-workspace 来组织代码。我们建议使用 npm 或 utoo 进行本地开发。

# 安装 utoo
$ npm i -g utoo

# 安装项目依赖（通过 utoo）
$ ut [install]

# 启动项目
$ ut start # 方法一：通过主包脚本启动
$ ut start --workspace packages/x # 方法二：通过 workspace 参数启动
$ ut start --workspace @ant-design/x # 方法三：通过 package.name 启动（仅限 utoo）
$ cd packages/x && ut start # 方法四：进入子包目录后启动

# 添加依赖
$ ut install [pkg@version] # 添加到主包
$ ut install [pkg@version] --workspace packages/x # 添加到子包
$ cd packages/x && ut install [pkg@version] # 添加到子包

# 更新依赖
$ ut update # 仅限 utoo

如何贡献

在以任何形式参与之前，请先阅读 贡献者指南。如果您希望贡献代码，欢迎提交 Pull Request 或 报告 Bug。

我们强烈建议您阅读 如何聪明地提问、开源社区中的提问技巧、如何有效地报告 bug，以及 如何向开源项目提交无法回答的问题。提出更好的问题更有可能获得帮助。

社区支持

如果您在使用过程中遇到问题，可以通过以下渠道寻求帮助。我们也鼓励有经验的用户通过这些渠道帮助新手。

在 GitHub Discussions 上提问时，建议使用 Q&A 标签。

1. GitHub Discussions
2. GitHub Issues

Ant Design X 快速上手指南

Ant Design X 是一套专为构建卓越 AI 界面而设计的企业级组件库，基于 RICH 交互范式提供原子化组件，帮助开发者灵活搭建 AI 应用。

环境准备

在开始之前，请确保您的开发环境满足以下要求：

• 操作系统：Windows, macOS, 或 Linux
• Node.js：建议安装 LTS 版本 (v18+)
• 包管理器：推荐使用 npm 或 utoo (官方推荐用于本地开发)
• 前置依赖：本项目通常配合 React 和 Ant Design 使用

安装步骤

你可以通过 npm 直接安装核心包，或使用官方推荐的 utoo 进行本地开发管理。

方式一：使用 npm 安装（生产环境推荐）

安装核心组件库及常用子包：

npm install @ant-design/x @ant-design/x-markdown @ant-design/x-sdk

提示：国内用户如遇下载缓慢，可配置淘宝镜像源： npm config set registry https://registry.npmmirror.com

方式二：使用 utoo 安装（本地开发推荐）

官方推荐使用 utoo 管理 monorepo 工作区：

# 全局安装 utoo
npm i -g utoo

# 安装项目依赖
ut install

# 启动项目（任选其一）
ut start                  # 启动主包脚本
ut start --workspace packages/x  # 指定工作区启动

基本使用

以下是一个最简单的示例，展示如何在 React 项目中引入并使用 Ant Design X 的组件（以流式 Markdown 渲染为例）。

1. 基础代码示例

import React from 'react';
import { XMarkdown } from '@ant-design/x-markdown';

const App = () => {
  // 模拟流式数据内容
  const content = `
# Hello Ant Design X

这是一个 **流式渲染** 的 Markdown 示例。
- 支持代码高亮
- 支持公式渲染
- 支持 Mermaid 图表
`;

  return (
    <div style={{ padding: 24 }}>
      <XMarkdown>{content}</XMarkdown>
    </div>
  );
};

export default App;

2. 关键说明

• 组件导入：从 @ant-design/x 或其子包（如 @ant-design/x-markdown）中按需导入组件。
• 流式支持：组件原生支持 Streaming 数据，可直接对接 LLM 返回的数据流。
• 样式依赖：确保项目中已正确引入 Ant Design 的基础样式。

更多高级用法（如 Agent 技能调用、动态卡片渲染等），请参考各子包的详细文档。