# 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
![demos](https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*UAEeSbJfuM8AAAAAAAAAAAAADgCCAQ/fmt.webp) ## ✨ 特性 - 🌈 **源自企业级 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) 留言。 ## 如何贡献 Contribution Leaderboard 在任何形式的参与前,请先阅读 [贡献者文档](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)