x-card

Render dynamic UI components from JSON command streams via the A2UI protocol.

3|1|Updated Apr 20, 2026
One-click install
npx skills add https://github.com/wangzi6224/NexusAI --skill x-card
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: x-card
Source: https://github.com/wangzi6224/NexusAI/tree/main/.cursor/skills/x-card
Command: npx skills add https://github.com/wangzi6224/NexusAI --skill x-card

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @ant-design/x-card, and includes references (resource) components.

What problem does it solve?

This skill solves the challenge of creating rich, interactive user interfaces directly from AI Agent responses, moving beyond simple text-based chat to structured, functional UI components.

Core Features & Use Cases

  • A2UI Protocol Implementation: Enables dynamic rendering of XCard.Box and XCard.Card components based on JSON command streams.
  • Action Handling: Provides a robust mechanism for capturing user interactions (like button clicks or form submissions) and routing them back to the Agent.
  • Use Case: Build a dynamic booking assistant where the AI Agent renders a date picker, a seat selection grid, and a confirmation button directly in the chat interface, updating the UI state in real-time as the user interacts.

Quick Start

Use the x-card skill to render a new surface with the id welcome and register the local catalog for the booking flow.

Frequently Asked Questions about x-card

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render dynamic UI components from AI Agent responses in React?

You can render dynamic UI components from AI Agent responses in React by implementing the A2UI protocol to parse JSON command streams into interactive XCard surfaces like data-bound forms and event-driven workflows.

Can I capture user interactions and send them back to an AI Agent in a chat interface?

Yes, you can capture user interactions like button clicks or form submissions in a chat interface and route them back to the AI Agent using a bidirectional communication mechanism paired with state management via JSON Pointer.

What is the A2UI protocol for dynamic UI rendering?

The A2UI protocol is a mechanism for dynamic UI rendering that enables AI Agents to stream JSON commands, facilitating incremental updates and real-time state management for interactive surfaces directly within a chat interface.

Does this dynamic UI rendering approach support incremental updates for React components?

Yes, dynamic UI rendering supports incremental updates for React components, allowing the AI Agent to stream JSON commands that update the UI state in real time as the user interacts with elements like a booking flow.

How to build a dynamic booking assistant with real-time UI state updates?

Build a dynamic booking assistant by streaming A2UI protocol JSON commands to render a date picker, seat selection grid, and confirmation button, capturing user interactions to update the React UI state in real time.

Do I need the Ant Design X Card dependency to render A2UI protocol components?

Yes, you need the Ant Design X Card dependency to render A2UI protocol components, as it provides the foundational XCard.Box and XCard.Card elements required for creating dynamic, interactive surfaces.