1. What Is Ant Design X?#

Ant Design X (@ant-design/x) is a React component library for AI-driven interfaces launched by the Ant Design team. It is not a replacement for Ant Design 5, but rather a new component system built on top of the existing design system, specifically designed for scenarios such as AI chat, intelligent assistants, and Agent consoles.

On April 30, 2026, Ant Design X released version v2.7.0, and its ecosystem now encompasses 5 core packages:

2. Design Philosophy: The RICH Interaction Paradigm#

The core design philosophy of Ant Design X is the RICH paradigm, which breaks down AI interaction into four stages:

1
RICH interaction flow
2
├── R — Role (role intent)
3
│   ├── Welcome welcome component
4
│   └── Prompts prompt set
5
├── I — Intention (intent awakening)
6
│   ├── Sender input box
7
│   ├── Attachment attachment
8
│   └── Suggestion quick suggestion
9
├── C — Conversation (conversation communication)
10
│   ├── Bubble conversation bubble
11
│   ├── Conversations conversation list
12
│   └── Notification notification
13
└── H — Hybrid UI (hybrid interface)
14
    ├── Think thinking process
15
    ├── ThoughtChain thought chain
16
    ├── Actions action bar
17
    ├── FileCard file card
18
    ├── Sources cited sources
19
    ├── Mermaid diagram rendering
20
    ├── Folder file tree
21
    └── CodeHighlighter code highlighting

RICH is not a linear process, but rather composable interaction units. You can use components from a single stage independently, or combine them into a complete AI application.

3. Hybrid UI: Merging GUI with Natural Language#

The Hybrid UI (HUI) concept proposed by Ant Design X attempts to resolve a core contradiction: traditional GUI operations are efficient but have a high learning curve, while natural language interaction is flexible but expresses intent ambiguously.

HUI divides interaction modes into three types:

This design allows the same interface to perform precise operations through traditional forms while also expressing flexibly through natural language — “having your cake and eating it too.”

4. Core Components at a Glance#

1
import { Bubble } from '@ant-design/x';
2

3
<Bubble
4
  placement="start"
5
  avatar={{ icon: <RobotOutlined /> }}
6
  content="Hello, I'm an AI assistant"
7
/>

1
import { Sender } from '@ant-design/x';
2

3
<Sender
4
  onSubmit={(value) => console.log(value)}
5
  placeholder="Type your question..."
6
/>

1
import { ThoughtChain } from '@ant-design/x';
2

3
<ThoughtChain
4
  items={[
5
    { title: 'Analyze the question', description: 'Identify keywords...', status: 'success' },
6
    { title: 'Search the knowledge base', description: 'Matched 3 related documents', status: 'success' },
7
    { title: 'Generate answer', status: 'pending' },
8
  ]}
9
/>

1
import { Sources } from '@ant-design/x';
2

3
<Sources
4
  items={[
5
    { title: 'React official documentation', url: 'https://react.dev' },
6
    { title: 'Ant Design X documentation', url: 'https://x.ant.design' },
7
  ]}
8
/>

5. XMarkdown: Streaming Markdown Rendering#

@ant-design/x-markdown is a Markdown rendering engine optimized specifically for AI streaming output. It solves three core problems that traditional Markdown renderers face in streaming scenarios:

1
import { XMarkdown } from '@ant-design/x-markdown';
2

3
<XMarkdown
4
  content={streamingText}
5
  streaming={{ tail: '▋' }} //Streaming cursor indicator
6
/>

1
<XMarkdown
2
  content={streamingText}
3
  streaming={{
4
    tail: '▋',
5
    tailComponent: <BlinkingCursor />
6
  }}
7
/>

1
<XMarkdown
2
  content={untrustedContent}
3
  escapeRawHtml={true}
4
/>

6. X SDK: AI Data Stream Management#

@ant-design/x-sdk encapsulates the complete data flow for interacting with AI models:

1
import { XRequest } from '@ant-design/x-sdk';
2

3
const request = XRequest({
4
  baseURL: 'https://api.openai.com/v1',
5
  model: 'gpt-4o',
6
  apiKey: process.env.OPENAI_API_KEY,
7
});

1
XRequest({
2
  baseURL: 'https://api.example.com',
3
  model: 'custom-model',
4
  streamSeparator: '\n',      //Stream delimiter
5
  partSeparator: 'data: ',    //Part delimiter
6
  kvSeparator: ': ',          //Key-value delimiter
7
});

1
import { useXChat } from '@ant-design/x-sdk';
2

3
const { messages, onRequest } = useXChat({
4
  request,
5
  queueRequest: true, //New in v2.3.0: request queue support
6
});

7. X Card: A2UI Dynamic Cards#

The @ant-design/x-card released in v2.5.0 is the most eye-catching new member of the entire ecosystem. It is based on the A2UI protocol, allowing AI Agents to dynamically generate structured UI:

1
import { XCard } from '@ant-design/x-card';
2

3
<XCard
4
  //A2UI JSON description returned by AI
5
  a2ui={agentResponse}
6
  dataModel={userData}
7
/>

The core value of A2UI lies in this: AI doesn’t just return text — it returns interactive cards. For example, AI can return a complete interactive interface containing forms, charts, and buttons, rather than just a text description.

8. Quick Start#

1
#Core component library
2
npm install @ant-design/x
3

4
#Streaming Markdown (optional)
5
npm install @ant-design/x-markdown
6

7
#AI SDK (optional)
8
npm install @ant-design/x-sdk

1
import {
2
  Bubble,
3
  Conversations,
4
  Sender,
5
  XProvider,
6
} from '@ant-design/x';
7
import { XMarkdown } from '@ant-design/x-markdown';
8
import { useXChat, XRequest } from '@ant-design/x-sdk';
9

10
export default function ChatApp() {
11
  const request = XRequest({
12
    baseURL: 'https://api.openai.com/v1',
13
    model: 'gpt-4o',
14
    apiKey: process.env.NEXT_PUBLIC_OPENAI_API_KEY,
15
  });
16

17
  const { messages, onRequest } = useXChat({ request });
18

19
  return (
20
    <XProvider>
21
      <div style={{ height: '100vh', display: 'flex', flexDirection: 'column' }}>
22
        <Conversations
23
          items={messages.map((msg) => ({
24
            key: msg.id,
25
            label: msg.content.slice(0, 30),
26
          }))}
27
        />
28
        <div style={{ flex: 1, overflow: 'auto', padding: 16 }}>
29
          {messages.map((msg) => (
30
            <Bubble
31
              key={msg.id}
32
              placement={msg.role === 'user' ? 'end' : 'start'}
33
              content={<XMarkdown content={msg.content} />}
34
            />
35
          ))}
36
        </div>
37
        <Sender onSubmit={onRequest} />
38
      </div>
39
    </XProvider>
40
  );
41
}

9. 2026 Version Evolution#

Ant Design X maintained a monthly minor version release cadence in 2026:

As can be seen, the team continues to explore the boundaries of AI interface as code—from streaming Markdown to dynamic card rendering, every step is lowering the barrier to AI application development.

10. Comparison with Competitors#

Ant Design X’s differentiated advantage lies in its complete UI component system + streaming rendering engine, not just data flow management.

11. Summary#

Ant Design X’s positioning is very clear: it is not yet another AI SDK, but a complete AI interface solution. Its core value lies in:

1. The RICH paradigm provides a standardized design language for AI interaction
2. Hybrid UI breaks down the boundary between GUI and Chat
3. XMarkdown solves the core pain points of streaming rendering
4. X Card opens up the possibility of AI dynamically generating UI
5. Out-of-the-box: seamless integration with the Ant Design ecosystem, zero learning curve for React developers

If you are developing an AI chat product, Agent console, or intelligent assistant interface, Ant Design X is currently the most mature and complete choice in the React ecosystem.

References#

• Ant Design X Official Website
• Ant Design X GitHub
• Ant Design X Changelog
• RICH Interaction Paradigm Introduction
• npm @ant-design/x