# @ant-design/x 中文文档

规范地址：https://npmcn.com/package/%40ant-design/x/

版本：2\.10\.0
npm 元数据更新时间：2026-10-29T09:12:35.589Z
中文译文更新时间：2026-11-06T06:02:26.292Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40ant-design/x
原文对照：https://npmcn.com/package/%40ant-design/x/?lang=original
项目主页：https://x.ant.design/
源码仓库：https://github.com/ant-design/x

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：19.9 MB，666 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：13 个
- peer 依赖：antd ^6\.1\.1，react \>=18\.0\.0，react-dom \>=18\.0\.0
- 首次发布：2024-08-13T09:10:26.404Z
- 最新版本发布：2026-10-29T09:12:35.340Z
- 近 30 天下载量：318067（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：72（近 12 个月 29 个）

## 中文简介

人工智能驱动的接口

## 安装

```sh
npm install @ant-design/x
```

也可以使用：`pnpm add @ant-design/x`、`yarn add @ant-design/x`、`bun add @ant-design/x`

## README

![](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*eco6RrQhxbMAAAAAAAAAAAAADgCCAQ/original)

# 蚂蚁设计 X

易地构建AI驱动界面.

[![CI status](https://github.com/ant-design/x/actions/workflows/main.yml/badge.svg)](https://github.com/ant-design/x/actions/workflows/main.yml) [![codecov](https://codecov.io/gh/ant-design/x/graph/badge.svg?token=wrCCsyTmdi)](https://codecov.io/gh/ant-design/x) [![NPM version](https://img.shields.io/npm/v/@ant-design/x.svg?style=flat-square)](https://npmjs.org/package/@ant-design/x)

[![NPM downloads](https://img.shields.io/npm/dm/@ant-design/x.svg?style=flat-square)](https://npmjs.org/package/@ant-design/x) [![](https://badgen.net/bundlephobia/minzip/@ant-design/x?style=flat-square)](https://bundlephobia.com/package/@ant-design/x) [![antd](https://img.shields.io/badge/-Ant%20Design-blue?labelColor=black&logo=antdesign&style=flat-square)](https://ant.design/) [![Follow zhihu](https://img.shields.io/badge/-Ant%20Design-white?logo=zhihu)](https://www.zhihu.com/column/c_1564262000561106944)

[更改日志](https://npmcn.com/package/%40ant-design/x/CHANGELOG.md) • 妇女 [报告错误](https://github.com/ant-design/x/issues/new?template=bug-report.yml) • 妇女 [特性请求](https://github.com/ant-design/x/issues/new?template=bug-feature-request.yml) • 妇女 [页:1](https://npmcn.com/package/%40ant-design/x/README-zh_CN.md) · 英语

![](https://mdn.alipayobjects.com/huamei_35zehm/afts/img/A*DfJHS4rP4SgAAAAAgGAAAAgAejCDAQ/original)

## \* 特性

-   🌈 **企业一级人工智能产品的最佳做法**:基于RICH互动范式,提供出色的AI互动经验
-   🧩 **弹性原子元件**:覆盖大多数AI方案,帮助您快速构建个性化AI互动页面
-   ✨ **流畅、可扩展和高性能的Markdown渲染器**:支持流线公式,代码加亮,人鱼图等. [@ ant- design/ x- 标记下](https://npmcn.com/package/%40ant-design/x-markdown/README.md)
-   🚀 **箱外模式/代理整合**: 方便连接OpenAI兼容型号/代理服务 [@ 蚂蚁设计/ x- sdk](https://npmcn.com/package/%40ant-design/x-sdk/README.md)
-   ⚡️ **高效管理大型模型数据流**:提供方便的数据流管理功能,以更高效地开发 [@ 蚂蚁设计/ x- sdk](https://npmcn.com/package/%40ant-design/x-sdk/README.md)
-   📦 **丰富的模板支持**: 快速LUI应用开发的多模板 [模板](https://github.com/ant-design/x/tree/main/packages/x/docs/playground/)
-   🛡 **全部类型脚本覆盖**: 使用 TypeScript 开发,为更好的经验和可靠性提供完整的类型支持
-   🎨 **深度主题定制**: 各种情景中因个性化需要而细微的风格调整

## \* 安装

```bash
npm install @ant-design/x
```

```bash
yarn add @ant-design/x
```

```bash
pnpm add @ant-design/x
```

```bash
ut install @ant-design/x
```

### 浏览器使用

使用 `script` 财务报告和审定财务报表 `link` 标记以直接导入文件并使用全局变量 `antdx`。 。 。 .

Npm 软件包 [数字](https://cdn.jsdelivr.net/npm/@ant-design/x@1.0.0/dist/) 提供目录 `antdx.js`, (中文(简体) ), `antdx.min.js`,以及 `antdx.min.js.map`。 。 。 .

> **强烈建议不使用已建文件** 因为它们不支持按需加载,并且可能无法快速获得对基础依赖的bug修复.

> 说明: `antdx.js` 财务报告和审定财务报表 `antdx.min.js` 取决于 `react`, (中文(简体) ), `react-dom`, (中文(简体) ), `dayjs`, (中文(简体) ), `antd`, (中文(简体) ), `@ant-design/cssinjs`,以及 `@ant-design/icons`请确保先导入这些文件 .

## 原子组件

基于RICH交互范式,我们为不同的交互阶段提供了许多原子组件来帮助您灵活地构建你的AI应用:

-   [构成部分概览](https://x.ant.design/components/overview)
-   [模板](https://x.ant.design/docs/playground/independent)

以下是使用原子组件构建对话框的简单例子:

```tsx
import React from 'react';
import {
  // Message bubble
  Bubble,
  // Sender box
  Sender,
} from '@ant-design/x';

const messages = [
  {
    key: 'message_1',
    content: 'Hello, Ant Design X!',
    role: 'user',
  },
  {
    key: 'x_message_1',
    content: 'Hello, I am Ant Design X!',
    role: 'x',
  },
];

const role = {
  // Bubble position: end
  x: {
    placement: 'end',
  },
};

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

export default App;
```

## 模型/代理集成和高效数据流管理

`@ant-design/x-sdk` 为AI应用程序数据流的出箱管理提供一系列工具API. 详情见 [这里](https://npmcn.com/package/%40ant-design/x-sdk/README.md)。 。 。 .

## Markdown 渲染器

`@ant-design/x-markdown` 目的是提供一个流畅、可扩展和高性能的Markdown渲染器。 支持流线公式,代码突出显示,人鱼图等. 详情见 [这里](https://npmcn.com/package/%40ant-design/x-markdown/README.md)。 。 。 .

## 点播加载

`@ant-design/x` 默认支持基于 ES 模块的树摇动.

## 类型脚本

`@ant-design/x` 以 TypeScript 书写,并提供完整的定义文件.

## 谁在用

Ant Design X在Ant Group内部的AI驱动用户界面中被广泛使用. 如果你的公司或产品使用Ant Design X,请随意留言 [这里](https://github.com/ant-design/x/issues/126)。 。 。 .

## 地方发展

> 蚂蚁用途 [npm 工作空间](https://docs.npmjs.com/cli/v11/using-npm/workspaces) 组织代码。 建议使用 npm 或 [乌托](https://github.com/umijs/mako/tree/next) 地方发展.

```bash
# Install utoo
$ npm i -g utoo

# Install project dependencies (by utoo)
$ ut [install]

# Start project
$ ut start # Method 1: Start via main package script
$ ut start --workspace packages/x # Method 2: Start via workspace parameter
$ ut start --workspace @ant-design/x # Method 3: Start via package.name (utoo only)
$ cd packages/x && ut start # Method 4: Start in subpackage directory

# Add dependencies
$ ut install [pkg@version] # Add dependency to main package
$ ut install [pkg@version] --workspace packages/x # Add dependency to subpackage
$ cd packages/x && ut install [pkg@version] # Add dependency to subpackage

# Update dependencies
$ ut update # utoo only
```

## 如何贡献

在以任何形式参加之前,请先阅读 [贡献者指南](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md)。如果你想作出贡献,请随意提交 [拉请求](https://github.com/ant-design/ant-design/pulls) 或者说 [报告错误](http://new-issue.ant.design/)。 。 。 .

> 高度推荐读取 [如何问问题 明智的方式](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way), (中文(简体) ), [开放源码社区如何提问](https://github.com/seajs/seajs/issues/545), (中文(简体) ), [如何有效报告臭虫](http://www.chiark.greenend.org.uk/%7Esgtatham/bugs.html),以及 [如何向开源项目提交无法解决的问题](https://zhuanlan.zhihu.com/p/25795393) 为了更好的帮助.

## 社区支助

如果在使用过程中遇到问题,您可通过下列渠道寻求帮助。 我们还鼓励有经验的用户通过这些渠道帮助新来者.

在 GitHub 讨论中提问时,请使用 `Q&A` 标签.

1.  [GitHub 讨论](https://github.com/ant-design/x/discussions)
2.  [GitHub 问题](https://github.com/ant-design/x/issues)

[![Contribution Leaderboard](https://openomy.app/svg?repo=ant-design/x&chart=bubble&latestMonth=3)](https://openomy.app/github/ant-design/x)

## 常见问题

### @ant-design/x 是什么？

人工智能驱动的接口

### 如何安装 @ant-design/x？

在项目目录运行 npm install @ant-design/x，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：antd（^6\.1\.1）、react（\>=18\.0\.0）、react-dom（\>=18\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @ant-design/x 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @ant-design/x 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @ant-design/x 可以商用吗？

@ant-design/x 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @ant-design/x 的下载量有多少？

根据 npm 官方下载统计，@ant-design/x 在 2026/10/06 – 2026/11/04 这 30 天内被下载 318,067 次，日均约 10,602 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @ant-design/x 还在维护吗？

最新版本 2\.10\.0 发布于 2026/10/29（7 天前）；至今共发布 72 个版本，其中过去 12 个月发布了 29 个；首次发布于 2024/08/13。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。