利用 A2UI 自訂元件目錄建構 AI 生成儀表板：2026 指南

The Complete 2026 Guide: Building Interactive Dashboards with A2UI RizzCharts

The Complete 2026 Guide: Building Interactive Dashboards with A2UI RizzCharts

🎯 Key Takeaways (TL;DR)

Table of Contents

What is A2UI RizzCharts?

RizzCharts is an official sample application that showcases how to build an AI-powered ecommerce dashboard using A2UI (Agent to UI) protocol. It demonstrates the power of declarative UI generation where AI agents create rich, interactive visualizations that render natively across platforms.

The sample uses:

💡 Pro Tip

RizzCharts demonstrates a real-world pattern: AI agents generating domain-specific visualizations (charts, maps) that feel native to the application, not generic chat responses.

Key Capabilities

Why Custom Component Catalogs Matter

The standard A2UI catalog provides common UI elements (Text, Button, TextField, Card, etc.), but real-world applications often need domain-specific components:

How Custom Catalogs Work

The flow:

Architecture Deep Dive

Project Structure

Core Components

The main agent class that processes user requests and generates A2UI payloads:

Handles session setup and A2UI extension activation:

Dynamically loads and merges component schemas:

Implementation Step-by-Step

Step 1: Define Custom Components

Create a JSON schema defining your custom components. Here's the RizzCharts catalog:

Step 2: Create Data Fetching Tools

Implement tools that the agent uses to fetch data:

Step 3: Configure Agent Instructions

The agent receives detailed instructions for generating A2UI payloads:

Step 4: Create A2UI Message Payloads

A complete A2UI payload consists of three messages:

Custom Components: Chart and GoogleMap

Chart Component

The Chart component renders interactive doughnut or pie charts:

DrillDown Support: Each chart item can have nested drillDown data for hierarchical visualization:

GoogleMap Component

The GoogleMap component displays an interactive map with customizable pins:

Pin Properties:

Data Binding and Reactive Updates

A2UI separates UI structure from application state through data binding:

Literal vs. Path Values

When the data at chart.title changes, the component automatically updates—no component regeneration needed.

JSON Pointer Paths

A2UI uses RFC 6901 JSON Pointer syntax:

Scoped Paths in Templates

When using templates for dynamic lists, paths are scoped to each array item:

For /mapConfig.locations/0, the path name resolves to /mapConfig.locations/0/name.

Running the RizzCharts Sample

Prerequisites

Setup

The server starts on http://localhost:10002 by default.

Environment Variables

Testing with Example Queries

Once running, send requests like:

Best Practices

1. Descriptive Component IDs

2. Separate Structure from Data

Use data bindings for dynamic content:

3. Generate Unique Surface IDs

Each request should generate a unique surfaceId:

4. Validate Against Schema

Always validate generated JSON against the A2UI schema:

5. Security Considerations

⚠️ Important Security Note

FAQ

Q: What is the difference between standard and custom catalogs?

A: The standard catalog includes common UI components (Text, Button, Card, List, etc.) that work across all A2UI clients. Custom catalogs extend this with domain-specific components (Chart, GoogleMap, StockTicker) that require client-side implementation. RizzCharts demonstrates both approaches with fallback support.

Q: How does A2UI compare to sending HTML/iframes?

A: A2UI is declarative data, not code. The client renders components using its own native widgets, ensuring:

Q: Can I use RizzCharts components with other protocols?

A: Yes! While RizzCharts uses A2A Protocol, the A2UI message format works with any transport: SSE, WebSockets, AG UI, or direct HTTP. The AP2 Protocol also integrates with A2UI for payment-enabled agent interfaces.

Q: How do I implement custom components on the client?

A: Register component implementations in your client framework:

See the Lit samples for reference implementations.

Q: What happens if the client doesn't support a catalog?

A: RizzCharts includes fallback support. The ComponentCatalogBuilder checks client capabilities:

The standard catalog examples use List and Card components to display the same data without Chart/GoogleMap.

Conclusion

The RizzCharts sample demonstrates the full power of A2UI for building agent-driven dashboards:

Next Steps

Last updated: January 2026

Keywords: A2UI, Agent to UI, RizzCharts, custom components, declarative UI, A2A Protocol, ecommerce dashboard, data visualization, AI agents, LLM UI generation

Related Articles

Explore more content related to this topic

The Complete Developer Tutorial: Building AI Agent UIs with A2UI and A2A Protocol in 2026

Master A2UI and A2A Protocol development with this complete tutorial. Learn to build AI agent UIs, implement renderers, create custom components, and integrate secure multi-agent communication for cross-platform applications.

The Complete Guide to A2UI Protocol: Building Agent-Driven UIs with Google's A2UI in 2025

A comprehensive guide to A2UI (Agent to UI), a declarative UI protocol for agent-driven interfaces. Learn how AI agents generate rich, interactive UIs that render natively across platforms without executing arbitrary code.

The A2UI Protocol: A 2026 Complete Guide to Agent-Driven Interfaces

Discover A2UI, the security-first declarative UI protocol that enables AI agents to generate rich, interactive user interfaces. Learn how A2UI solves the 'Chat Wall' problem, achieves security through data vs. code separation, and enables dynamic cross-platform interfaces. Includes real-world examples and implementation guidance.

A2UI Introduction - Declarative UI Protocol for Agent-Driven Interfaces

Discover A2UI, the declarative UI protocol that enables AI agents to generate rich, interactive user interfaces. Learn how A2UI works, who it's for, how to use it, and see real-world examples from Google Opal, Gemini Enterprise, and Flutter GenUI SDK.

Universal Commerce Protocol (UCP): The Complete 2026 Guide to Agentic Commerce Standards

Discover Universal Commerce Protocol (UCP), the open standard revolutionizing agentic commerce. Learn how UCP enables seamless interoperability between AI platforms, businesses, and payment providers, solving fragmented commerce journeys with standardized APIs for checkout, order management, and payment processing.

Table of Contents

An open protocol for agent interoperability, enabling seamless collaboration between AI agents across platforms.

Protocol

Resources

About

© 2025 A2A Protocol. All rights reserved.