← all repositories
ant-design/x

Ant Design's bet on AI: chat UIs, streaming markdown, and agent cards

A component toolkit for building LLM interfaces without reinventing the chat bubble.

4.6k stars TypeScript Chat AssistantsApp Builders
x
Velocity · 7d
+6.0
★ / day
Trend
steady
star history

What it does

Ant Design X is a monorepo of React packages for constructing AI-driven interfaces. The core @ant-design/x provides atomic components following a “RICH interaction paradigm” (the README doesn’t elaborate what RICH stands for). Companion packages handle streaming data management (x-sdk), streaming-friendly Markdown rendering with formula and Mermaid support (x-markdown), dynamic card rendering via an A2UI protocol (x-card), and pre-built agent skills (x-skill).

The interesting bit

The x-card package implements the A2UI protocol, allowing AI agents to emit structured JSON that renders into interactive UI cards — think of it as the agent sketching an interface in real time. The Markdown renderer is explicitly optimized for streaming, which matters more than you’d think when tokens dribble in at 20 tokens/second.

Key highlights

  • Battle-tested at Ant Group (Alibaba’s fintech arm), not a weekend experiment
  • Four focused packages instead of one kitchen-sink library
  • Streaming-first architecture for both Markdown and card rendering
  • Agent skills library (x-skill) for common conversation patterns
  • Built atop the established Ant Design ecosystem

Caveats

  • The README is heavy on badges and light on API specifics; you’ll need to dig into per-package READMEs for real documentation
  • “RICH interaction paradigm” and “A2UI protocol” are namedropped without explanation — either industry terms from the Chinese ecosystem or internal Ant Group vocabulary
  • Development workflow assumes utoo, a niche build tool from the UmiJS/Mako lineage

Verdict

Worth evaluating if you’re building enterprise chat UIs in React and want Ant Design’s visual consistency. Skip if you need framework-agnostic solutions or detailed docs before npm install.

heatdrop uses Google Analytics to see which pages get read — nothing else. Your call. How we handle data.