X Components

🎯 Skill Positioning

This skill covers all UI components in @ant-design/x — the React component library for building AI-driven chat interfaces based on the RICH interaction paradigm.

It covers component selection, API usage, composition patterns, and common anti-patterns.

Prerequisite: This skill handles UI only. For data flow and streaming, see use-x-chat, x-chat-provider, x-request skills.

Table of Contents

• 📦 Package Overview
• 🗂️ Component Groups
• 🚀 Quick Start Decision Guide
• 🛠 Recommended Workflow
• 🚨 Development Rules
• 🤝 Skill Collaboration
• 🔗 Reference Resources

📦 Package Overview

npm install @ant-design/x

@ant-design/x extends antd. If you use ConfigProvider, replace it with XProvider.

🗂️ Component Groups

Based on the RICH interaction paradigm:

🚀 Quick Start Decision Guide

🛠 Recommended Workflow

1. Pick components from COMPONENTS.md for each interaction stage.
2. Use PATTERNS.md to understand how components compose into full pages.
3. Wrap the app root with XProvider (replaces antd's ConfigProvider) for locale, theme, and shortcut keys.
4. Use API.md for precise prop names — do not guess them.

Minimal Full-Page Example

import { XProvider, Welcome, Prompts, Bubble, Sender } from '@ant-design/x';

export default () => (
  <XProvider>
    <Welcome title="Hello!" description="How can I help you?" />
    <Prompts
      items={[{ key: '1', label: 'What can you do?' }]}
      => console.log(info.data.label)}
    />
    <Bubble.List items={[{ key: '1', content: 'Hello World', placement: 'end' }]} />
    <Sender => console.log(msg)} />
  </XProvider>
);

🚨 Development Rules

• Always use XProvider at the app root — it supersedes antd's ConfigProvider and enables locale, direction, and x-specific shortcut keys.
• Bubble.List not Bubble in loops — Bubble.List handles scroll anchoring, auto-scroll, and role-based layout; mapping Bubble manually loses these.
• Keep components prop stable in Bubble and Bubble.List — inline object creation causes re-renders and resets typing animations.
• Set streaming={true} during stream, streaming={false} on final chunk — leaving it true permanently breaks the done state.
• ThoughtChain vs Think: use ThoughtChain for multi-step tool/agent call chains; use Think for a collapsible single-block reasoning display.
• Actions.Copy, Actions.Feedback, Actions.Audio are preset sub-components — prefer them over building custom equivalents.
• Sender onSubmit vs onChange: onSubmit fires on send button or Enter key; onChange fires on every keystroke — do not conflate them.
• Never render Mermaid or CodeHighlighter inside a Bubble content string — use contentRender or the components map instead.

🤝 Skill Collaboration

🔗 Reference Resources

• COMPONENTS.md — Component-by-component guide with usage, key props, and examples
• PATTERNS.md — Full-page composition patterns and integration recipes
• API.md — Auto-generated prop reference from official component docs — covers all 17 components

Official Documentation

• Ant Design X Overview
• Bubble
• Sender
• Conversations
• ThoughtChain
• Actions
• Welcome
• Prompts
• Attachments
• Sources
• Suggestion
• Think
• Folder
• XProvider