Ant Design X

Easily build AI-driven interfaces.

Changelog · Report a Bug · Feature Request · 中文 · English

✨ Features

• 🌈 Best practices from enterprise-level AI products: Based on RICH interaction paradigms, providing excellent AI interaction experience
• 🧩 Flexible atomic components: Covering most AI scenarios, helping you quickly build personalized AI interaction pages
• ✨ Stream-friendly, extensible, and high-performance Markdown renderer: Supports streaming formulas, code highlighting, mermaid diagrams, etc. @ant-design/x-markdown
• 🚀 Out-of-the-box model/agent integration: Easily connect to OpenAI-compatible model/agent services @ant-design/x-sdk
• ⚡️ Efficient management of large model data streams: Provides handy data stream management features for more efficient development @ant-design/x-sdk
• 📦 Rich template support: Multiple templates for quick LUI app development Templates
• 🛡 Full TypeScript coverage: Developed with TypeScript, providing complete type support for better experience and reliability
• 🎨 Deep theme customization: Fine-grained style adjustments for personalized needs in various scenarios

📦 Installation

npm install @ant-design/x

yarn add @ant-design/x

pnpm add @ant-design/x

ut install @ant-design/x

Browser Usage

Use script and link tags to directly import files and use the global variable antdx.

The npm package's dist directory provides antdx.js, antdx.min.js, and antdx.min.js.map.

Strongly not recommended to use built files as they do not support on-demand loading and may not get quick bug fixes for underlying dependencies.

Note: antdx.js and antdx.min.js depend on react, react-dom, dayjs, antd, @ant-design/cssinjs, and @ant-design/icons. Please make sure to import these files first.

🧩 Atomic Components

Based on the RICH interaction paradigm, we provide many atomic components for different interaction stages to help you flexibly build your AI application:

• Component Overview
• Templates

Here is a simple example of building a dialog using atomic components:

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;

⚡️ Model/Agent Integration & Efficient Data Stream Management

@ant-design/x-sdk provides a series of tool APIs for out-of-the-box management of AI application data streams. See details here.

✨ Markdown Renderer

@ant-design/x-markdown aims to provide a stream-friendly, extensible, and high-performance Markdown renderer. Supports streaming formulas, code highlighting, mermaid diagrams, etc. See details here.

On-demand Loading

@ant-design/x supports tree shaking based on ES modules by default.

TypeScript

@ant-design/x is written in TypeScript and provides complete definition files.

Who's Using

Ant Design X is widely used in AI-driven user interfaces within Ant Group. If your company or product uses Ant Design X, feel free to leave a message here.

Local Development

antx uses npm-workspace to organize code. It is recommended to use npm or utoo for local development.

# 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

How to Contribute

Before participating in any form, please read the Contributor Guide. If you wish to contribute, feel free to submit a Pull Request or Report a Bug.

Highly recommended reading How To Ask Questions The Smart Way, How to Ask Questions in Open Source Community, How to Report Bugs Effectively, and How to Submit Unsolvable Issues to Open Source Projects for better help.

Community Support

If you encounter problems during use, you can seek help through the following channels. We also encourage experienced users to help newcomers through these channels.

When asking questions in GitHub Discussions, please use the Q&A label.

1. GitHub Discussions
2. GitHub Issues