Ant Design X

Ant Design X is a React component library purpose-built for AI-driven interfaces, extending the Ant Design design system with atomic building blocks for chat, copilot, and agent experiences. It ships ready-made components for message bubbles, streaming responses, prompt suggestions, file attachments, and reasoning traces, so teams building LLM-powered products don’t have to design conversational UI patterns from scratch.

The project is organized as a monorepo alongside companion packages — @ant-design/x-sdk for managing chat data flows and streaming responses, @ant-design/x-markdown for rendering streamed markdown/LaTeX/Mermaid content, and @ant-design/x-card for protocol-driven dynamic card rendering — giving teams a full toolkit for AI interface development rather than a single isolated component set.

What You Get

• Chat-focused components: Bubble/BubbleList for streaming message threads, Sender for the input composer, and Conversations for session management
• Agent UX primitives: ThoughtChain and Think for surfacing reasoning traces, Suggestion and Prompts for quick-action affordances
• File and attachment handling via Attachments, FileCard, and Folder components with drag-and-drop support
• A shared XProvider for cross-component theming/config, consistent with Ant Design’s ConfigProvider pattern
• Companion packages (x-sdk, x-markdown, x-card, x-skill) covering data-flow hooks, markdown rendering, and dynamic card protocols

Common Use Cases

• Building an internal AI copilot or assistant panel embedded in an existing Ant Design admin dashboard
• Shipping a customer-facing chat/agent product that needs streaming responses, citations, and reasoning-trace UI
• Prototyping conversational AI experiences quickly using pre-built, accessible components instead of custom chat UI

Under The Hood

Architecture: The repo is an npm-workspaces monorepo (packages/x, x-sdk, x-markdown, x-card, x-skill) where @ant-design/x is the flagship UI package. Each component (e.g. components/bubble/Bubble.tsx, components/sender/Sender.tsx, components/x-provider/index.tsx) follows a consistent internal layout: a typed interface.ts, a cssinjs-driven style/ module, an optional component-scoped context.ts, colocated __tests__/ and dumi demo/ folders, and bilingual doc pages. The barrel file components/index.ts re-exports the full public surface, and a shared XProvider (mirroring antd’s ConfigProvider) threads prefix-class, theming, and locale context across every component. Tech Stack: Written almost entirely in TypeScript (97% per GitHub’s language breakdown), targeting React 19 as a peer dependency, and built with father (Ant Design’s own bundler) into es/lib/dist outputs. Styling runs on @ant-design/cssinjs and @ant-design/cssinjs-utils for token-based theming, with @rc-component/* packages (motion, resize-observer, trigger, virtual-list, util) supplying shared low-level primitives across the Ant Design ecosystem. Docs and playgrounds are generated with dumi and Sandpack; linting/formatting run through Biome. Code Quality: 83 test files live under per-component __tests__/ directories, run via Jest with --collect-coverage, plus dedicated .jest.node.js and .jest.site.js configs for SSR/site-level testing, test:dekko for public API surface diffing, and test:package-diff for bundle regression checks. Props are fully typed per component (interface.ts), and generics are used deliberately in the SDK (e.g. useXChat<ChatMessage, ParsedMessage, Input, Output>), with an X-prefixed naming convention (XProvider, XRequest, useXChat) chosen specifically to avoid collisions with plain antd symbols. API Design: The component API extends Ant Design v5+‘s semantic-DOM conventions (styles/classNames per-slot overrides) so existing antd users face almost no new concepts, and getting started requires only wrapping components in XProvider — no scaffolding step. Documentation is unusually deep for an open-source UI kit: bilingual per-component reference pages, live Sandpack playgrounds under docs/playground, a dedicated conversational-UI design-principles guide (docs/spec/*), full API tables (type/default/version columns) for SDK hooks, and framework-specific setup guides for Next.js, Vite, CRA, Umi, and RSBuild.