# Ant Design X
**Repository Path**: ant-design/antd-x
## Basic Information
- **Project Name**: Ant Design X
- **Description**: Ant Design 团队匠心呈现 RICH 设计范式,打造卓越 AI 界面解决方案,引领智能新体验。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 1
- **Forks**: 0
- **Created**: 2024-11-22
- **Last Updated**: 2025-06-04
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
Ant Design X
轻松打造 AI 驱动的界面。
[![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url]
[![NPM downloads][download-image]][download-url] [![][bundlephobia-image]][bundlephobia-url] [![antd][antd-image]][antd-url] [![Follow zhihu][zhihu-image]][zhihu-url]
[更新日志](./CHANGELOG.zh-US.md) · [报告一个 Bug][github-issues-bug-report] · [想新增特性?][github-issues-feature-request] · [English](./README.md) · 中文
[npm-image]: https://img.shields.io/npm/v/@ant-design/x.svg?style=flat-square
[npm-url]: https://npmjs.org/package/@ant-design/x
[github-action-image]: https://github.com/ant-design/x/actions/workflows/main.yml/badge.svg
[github-action-url]: https://github.com/ant-design/x/actions/workflows/main.yml
[codecov-image]: https://codecov.io/gh/ant-design/x/graph/badge.svg?token=wrCCsyTmdi
[codecov-url]: https://codecov.io/gh/ant-design/x
[download-image]: https://img.shields.io/npm/dm/@ant-design/x.svg?style=flat-square
[download-url]: https://npmjs.org/package/@ant-design/x
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/@ant-design/x?style=flat-square
[bundlephobia-url]: https://bundlephobia.com/package/@ant-design/x
[github-issues-bug-report]: https://github.com/ant-design/x/issues/new?template=bug-report.yml
[github-issues-feature-request]: https://github.com/ant-design/x/issues/new?template=bug-feature-request.yml
[antd-image]: https://img.shields.io/badge/-Ant%20Design-blue?labelColor=black&logo=antdesign&style=flat-square
[antd-url]: https://ant.design
[zhihu-image]: https://img.shields.io/badge/-Ant%20Design-white?logo=zhihu
[zhihu-url]: https://www.zhihu.com/column/c_1564262000561106944

## ✨ 特性
- 🌈 **源自企业级 AI 产品的最佳实践**:基于 RICH 交互范式,提供卓越的 AI 交互体验
- 🧩 **灵活多样的原子组件**:覆盖绝大部分 AI 对话场景,助力快速构建个性化 AI 交互页面
- ⚡ **开箱即用的模型对接能力**:轻松对接符合 OpenAI 标准的模型推理服务
- 🔄 **高效管理对话数据流**:提供好用的数据流管理功能,让开发更高效
- 📦 **丰富的样板间支持**:提供多种模板,快速启动 LUI 应用开发
- 🛡 **TypeScript 全覆盖**:采用 TypeScript 开发,提供完整类型支持,提升开发体验与可靠性
- 🎨 **深度主题定制能力**:支持细粒度的样式调整,满足各种场景的个性化需求
## 📦 安装
```bash
npm install @ant-design/x --save
```
```bash
yarn add @ant-design/x
```
```bash
pnpm add @ant-design/x
```
### 浏览器引入
在浏览器中使用 `script` 和 `link` 标签直接引入文件,并使用全局变量 `antdx`。
我们在 npm 发布包内的 [dist](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-cn)
- [样板间](https://x.ant.design/docs/playground/independent-cn)
下面是使用原子组件搭建一个最简单的对话框的代码示例:
```tsx
import React from 'react';
import {
// 消息气泡
Bubble,
// 发送框
Sender,
} from '@ant-design/x';
const messages = [
{
content: 'Hello, Ant Design X!',
role: 'user',
},
];
const App = () => (
);
export default App;
```
## ⚡️ 对接模型推理服务
我们通过提供 `useXAgent` `XRequest` 等运行时工具,帮助你开箱即用的对接符合标准的模型推理服务。
这是一个对接 Qwen 的示例:
> 注意: 🔥 `dangerouslyApiKey` 存在安全风险,对此有详细的[说明](/docs/react/dangerously-api-key.zh-CN.md)。
```tsx
import { useXAgent, Sender, XRequest } from '@ant-design/x';
import React from 'react';
const { create } = XRequest({
baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
dangerouslyApiKey: process.env['DASHSCOPE_API_KEY'],
model: 'qwen-plus',
});
const Component: React.FC = () => {
const [agent] = useXAgent({
request: async (info, callbacks) => {
const { messages, message } = info;
const { onUpdate } = callbacks;
// current message
console.log('message', message);
// messages list
console.log('messages', messages);
let content: string = '';
try {
create(
{
messages: [{ role: 'user', content: message }],
stream: true,
},
{
onSuccess: (chunks) => {
console.log('sse chunk list', chunks);
},
onError: (error) => {
console.log('error', error);
},
onUpdate: (chunk) => {
console.log('sse object', chunk);
const data = JSON.parse(chunk.data);
content += data?.choices[0].delta.content;
onUpdate(content);
},
},
);
} catch (error) {
// handle error
}
},
});
function onRequest(message: string) {
agent.request(
{ message },
{
onUpdate: () => {},
onSuccess: () => {},
onError: () => {},
},
);
}
return ;
};
```
## 🔄 高效管理数据流
我们通过提供 `useXChat` 运行时工具,帮助你开箱即用的管理 AI 对话应用的数据流:
这是一个对接 OpenAI 的示例:
```tsx
import { useXAgent, useXChat, Sender, Bubble } from '@ant-design/x';
import OpenAI from 'openai';
import React from 'react';
const client = new OpenAI({
apiKey: process.env['OPENAI_API_KEY'],
dangerouslyAllowBrowser: true,
});
const Demo: React.FC = () => {
const [agent] = useXAgent({
request: async (info, callbacks) => {
const { messages, message } = info;
const { onSuccess, onUpdate, onError } = callbacks;
// current message
console.log('message', message);
// history messages
console.log('messages', messages);
let content: string = '';
try {
const stream = await client.chat.completions.create({
model: 'gpt-4o',
// if chat context is needed, modify the array
messages: [{ role: 'user', content: message }],
// stream mode
stream: true,
});
for await (const chunk of stream) {
content += chunk.choices[0]?.delta?.content || '';
onUpdate(content);
}
onSuccess(content);
} catch (error) {
// handle error
// onError();
}
},
});
const {
// use to send message
onRequest,
// use to render messages
messages,
} = useXChat({ agent });
const items = messages.map(({ message, id }) => ({
// key is required, used to identify the message
key: id,
content: message,
}));
return (
);
};
export default Demo;
```
## 按需加载
`@ant-design/x` 默认支持基于 ES modules 的 tree shaking。
## TypeScript
`@ant-design/x` 使用 TypeScript 进行书写并提供了完整的定义文件。
## 谁在使用
Ant Design X 广泛用于蚂蚁集团内由 AI 驱动的用户交互界面。如果你的公司和产品使用了 Ant Design X,欢迎到 [这里](https://github.com/ant-design/x/issues/126) 留言。
## 如何贡献
在任何形式的参与前,请先阅读 [贡献者文档](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md)。如果你希望参与贡献,欢迎提交 [Pull Request](https://github.com/ant-design/ant-design/pulls),或给我们 [报告 Bug](http://new-issue.ant.design/)。
> 强烈推荐阅读 [《提问的智慧》](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way)、[《如何向开源社区提问题》](https://github.com/seajs/seajs/issues/545) 和 [《如何有效地报告 Bug》](http://www.chiark.greenend.org.uk/%7Esgtatham/bugs-cn.html)、[《如何向开源项目提交无法解答的问题》](https://zhuanlan.zhihu.com/p/25795393),更好的问题更容易获得帮助。
## 社区互助
如果您在使用的过程中碰到问题,可以通过下面几个途径寻求帮助,同时我们也鼓励资深用户通过下面的途径给新人提供帮助。
通过 GitHub Discussions 提问时,建议使用 `Q&A` 标签。
1. [GitHub Discussions](https://github.com/ant-design/x/discussions)
2. [GitHub Issues](https://github.com/ant-design/x/issues)