DOCSEARCHbyAlgolia
Submit Docs

Ant Design X

repository·main·Indexed 26 days ago

https://github.com/ant-design/x

A specialized component library for building enterprise-level AI interfaces. It includes atomic UI components like Bubble and Sender, the @ant-design/x-sdk for data stream management, @ant-design/x-markdown for high-performance streaming Markdown rendering, and @ant-design/x-card for dynamic card rendering. The library provides tools for managing AI application data streams and connecting to OpenAI-compatible model/agent services.

Tokens
186.3K
Snippets
294
Records
1K
Agent score
86%

What's inside Ant Design X

  1. Overview of Ant Design X packages

    main

    Ant Design X is a suite of enterprise-level components designed for building AI-driven user interfaces. The ecosystem consists of several specialized packages:

    • @ant-design/x: Core enterprise-level LLM components based on the RICH interaction paradigm, providing atomic components for various AI interaction stages.
    • @ant-design/x-sdk: A set of tool APIs designed to manage AI application data streams and connect to model agent services.
    • @ant-design/x-markdown: A high-performance, extensible Markdown renderer optimized for streaming content. It supports streaming rendering of formulas, code highlighting, and Mermaid diagrams.
    • @ant-design/x-card: A dynamic card renderer based on the A2UI protocol. It allows AI Agents to build and render interactive interfaces via structured JSON message streams, supporting streaming, data binding, and responsive updates.
    • @ant-design/x-skill: A specialized intelligent skill library for Ant Design X, providing pre-designed Agent skills to accelerate the development of high-quality AI chat applications.

  2. Overview of @ant-design/x Components

    main

    The library provides atomic components based on the RICH interaction paradigm for AI conversation scenarios:

    • General: Bubble (message bubble), Conversations (conversation management), Notification (system notification)
    • Wake-up: Welcome (welcome screen), Prompts (prompt set)
    • Expression: Sender (input box), Attachment (input attachment), Suggestion (quick command)
    • Confirmation: Think (thinking process), ThoughtChain (chain of thought)
    • Feedback: Actions (action list), FileCard (file card), Sources (source citation), CodeHighlighter (code highlighting), Mermaid (chart tool), Folder (file tree)
    • Global Config: XProvider (theme, locale, etc.)

  3. Overview of Ant Design X ecosystem

    main

    Ant Design X is a composite toolkit for AI applications, providing a complete toolchain that integrates UI components, a streaming Markdown rendering engine, and an AI SDK. The ecosystem consists of several specialized packages:

    • @ant-design/x: A React UI library based on the Ant Design design system, specifically designed for AI-driven interfaces. It includes out-of-the-box intelligent conversation components and seamless API integration.
    • @ant-design/x-markdown: A high-performance streaming Markdown rendering engine optimized for streaming content. It supports extensions like formulas, code highlighting, and Mermaid diagrams.
    • @ant-design/x-card: A dynamic card renderer based on the A2UI protocol. It allows AI Agents to build interactive interfaces using structured JSON message streams, supporting streaming rendering, data binding, and responsive updates.
    • @ant-design/x-sdk: A data stream management toolset for AI conversations, providing APIs to simplify the development of AI-driven application workflows.
    • @ant-design/x-skill: A specialized intelligence skill library providing pre-designed Agent skills to accelerate the construction of high-quality AI conversation applications.

  4. Introduction to @ant-design/x-card and A2UI

    main

    @ant-design/x-card is a dynamic card rendering component based on the A2UI protocol. It allows AI Agents to build and render interactive interfaces dynamically using a structured stream of JSON messages.

    Core Concepts of A2UI (Agent-to-User Interface):

    • Streaming Messages: UI updates flow from the Agent to the client as a sequence of JSON messages.
    • Declarative Components: The UI is described as data rather than being programmed via code.
    • Data Binding: The UI structure is decoupled from the application state, enabling responsive updates.

    Advantages over AI-generated HTML:

    • Security: Uses a predefined component catalog, eliminating code execution risks.
    • Cross-platform: A single data structure adapts to Web, mobile, and other native components.
    • Streaming Rendering: Supports progressive rendering for a smoother user experience.
    • LLM Friendly: Uses flat JSON structures that support incremental generation, reducing LLM errors.

  5. Introduction to @ant-design/x-card

    main

    @ant-design/x-card is a dynamic card rendering component based on the A2UI protocol. It enables AI Agents to build and render interactive UIs through structured JSON message streams.

    Key features include:

    • Streaming Messages: UI updates flow from the Agent to the client as a sequence of JSON messages.
    • Declarative Components: UI is described as data, not code.
    • Data Binding: UI structure is decoupled from application state, enabling reactive updates.

  8. Explore related Ant Design X packages

    main

    Ant Design X is composed of several specialized packages:

    • @ant-design/x-sdk: Tool APIs for managing AI application data streams and connecting to OpenAI-compatible model/agent services.
    • @ant-design/x-markdown: A stream-friendly, high-performance Markdown renderer supporting formulas, code highlighting, and mermaid diagrams.
    • @ant-design/x-card: Dynamic card renderer.
    • @ant-design/x-skill: Skill-related components.

  10. Available components in 1.0.0-alpha.0

    main

    The initial alpha release (1.0.0-alpha.0) introduced the following core components:

    • Bubble: A message bubble component (supports direction).
    • Bubble.List: A list container for bubbles.
    • Conversations: Manages conversation threads.
    • Prompts: For handling user prompts.
    • Sender: The input area for sending messages.
    • ThoughtChain: For displaying reasoning chains.

  12. Core Features of @ant-design/x-card

    main

    The @ant-design/x-card package provides several key capabilities for building AI-driven UIs:

    • Progressive Rendering: UI builds up incrementally as responses arrive.
    • Adjacency List Model: Uses a flat component list instead of a nested tree, making it LLM-friendly and fault-tolerant.
    • Component Validation: Automatically validates component properties against the provided Catalog.
    • Type Safety: Provides full TypeScript definitions for commands, payloads, and catalogs.