What Datasets Are Used with A2UI: Sample Data and Binding Guide

The google/A2UI repository ships with five self-contained JSON datasets—restaurant listings, employee contact records, searchable contact directories, pie chart statistics, and geographic map coordinates—that agents load to populate UI components via dataModelUpdate messages.

A2UI (Agent-to-UI) is an open-source framework from Google that renders dynamic interfaces by binding runtime agent data to component catalogs. Understanding what datasets are used with A2UI helps developers implement the data-driven architecture, where JSON-serializable payloads replace static UI content without modifying frontend code.

Sample Datasets Included in the Repository

The reference implementations rely on small, static JSON files located in the samples/agent/adk/ directory. These files act as mock databases that sample agents query and transform into UI updates.

Restaurant Finder Data

The Restaurant Finder ADK agent uses samples/agent/adk/restaurant_finder/restaurant_data.json to populate list views. This dataset contains an array of objects with fields for name, detail, imageUrl, rating, infoLink, and address. The agent reads this file and emits dataModelUpdate messages that bind each restaurant field to a List component using JSON-Pointer syntax.

Contact Records for Multiple Surfaces

The Contact Multiple Surfaces sample demonstrates binding one dataset to varied UI representations (cards, tables, and maps). It sources data from samples/agent/adk/contact_multiple_surfaces/contact_data.json, which stores employee records including id, name, title, team, location, email, phone, calendar, and avatar. The same schema appears in samples/agent/adk/contact_lookup/contact_data.json for the Contact Lookup sample, which adds search and filtering capabilities.

Chart and Map Data (RizzCharts)

The RizzCharts sample illustrates data visualization using two coordinated datasets:

• samples/agent/adk/rizzcharts/examples/standard_catalog/chart.json – Contains pie chart items with label and value properties.
• samples/agent/adk/rizzcharts/examples/standard_catalog/map.json – Stores geographic points with latitude, longitude, and label for map widgets.

Both files are referenced by the catalog definition in samples/agent/adk/rizzcharts/rizzcharts_catalog_definition.json, which declares how chart and map components consume these data paths.

How Datasets Bind to UI Components

A2UI employs a catalog-and-model pattern where datasets never directly render UI elements. Instead, they populate a runtime data model that components reference through declarative bindings.

1. Catalog Definition – The UI hierarchy is described in a catalog JSON file (e.g., rizzcharts_catalog_definition.json). Components declare data dependencies using JSON-Pointer paths such as /chart/items[0].label or /restaurants[0].rating.

2. Data Model Updates – At runtime, the agent sends A2UI protocol messages. The dataModelUpdate payload contains a list of key/value pairs where keys match the catalog's JSON-Pointer paths and values contain the dataset content.

3. Automatic Rendering – Angular, React, or Lit renderers observe the data model. When an update arrives, the framework re-renders only the bound components, reflecting the new dataset state without page reloads.

Loading and Sending Dataset Updates in Code

The following examples demonstrate how agents transform the sample JSON files into dataModelUpdate messages consumed by A2UI renderers.

Python: Streaming Restaurant Data

The Python SDK in agent_sdks/python/src/a2ui/a2a.py provides A2UIClient and MessageBuilder to package updates. This snippet reads restaurant_data.json and emits field-level updates:

import json
from a2ui import A2UIClient, MessageBuilder

client = A2UIClient()
with open("samples/agent/adk/restaurant_finder/restaurant_data.json") as f:
    restaurants = json.load(f)

updates = []
for i, r in enumerate(restaurants):
    base = f"/restaurants[{i}]"
    updates.extend([
        {"key": f"{base}.name", "valueString": r["name"]},
        {"key": f"{base}.detail", "valueString": r["detail"]},
        {"key": f"{base}.imageUrl", "valueString": r["imageUrl"]},
        {"key": f"{base}.rating", "valueString": r["rating"]},
        {"key": f"{base}.infoLink", "valueString": r["infoLink"]},
        {"key": f"{base}.address", "valueString": r["address"]},
    ])

msg = MessageBuilder().data_model_update(
    surface_id="restaurant-view",
    path="/",
    contents=updates,
)
client.send(msg)

Angular: Binding Chart Datasets

In the Angular implementation of RizzCharts, the component loads chart.json and converts it to the expected update format:

import { Component, OnInit } from '@angular/core';
import { A2UIClient, MessageBuilder } from '@a2ui/angular';
import chartData from '../../../../../samples/agent/adk/rizzcharts/examples/standard_catalog/chart.json';

@Component({
  selector: 'app-pie-chart',
  template: `<a2ui-catalog [catalog]="catalog" [dataModel]="dataModel"></a2ui-catalog>`
})
export class PieChartComponent implements OnInit {
  catalog = {};
  dataModel = {};

  ngOnInit() {
    const client = new A2UIClient();
    const updates = chartData.map((item, i) => [
      { key: `/chart/items[${i}].label`, valueString: item.label },
      { key: `/chart/items[${i}].value`, valueNumber: item.value },
    ]).flat();

    const msg = MessageBuilder()
      .dataModelUpdate('sales-dashboard', '/', updates);
    client.send(msg);
  }
}

Lit: Rendering Contact Lists

For Web Components using Lit, the dataset is imported directly and bound to local properties:

import { html, LitElement } from 'lit';
import contactData from '../../../../../samples/agent/adk/contact_multiple_surfaces/contact_data.json';

class ContactList extends LitElement {
  static properties = { contacts: { type: Array } };
  contacts = contactData;

  render() {
    return html`
      <ul>
        ${this.contacts.map(c => html`
          <li>
            <img src=${c.imageUrl} alt="Avatar" />
            <strong>${c.name}</strong> – ${c.title}
          </li>
        `)}
      </ul>
    `;
  }
}
customElements.define('contact-list', ContactList);

Key Dataset Files and Schema References

File Path	Dataset Description
samples/agent/adk/restaurant_finder/restaurant_data.json	Restaurant listings with metadata for the finder agent.
samples/agent/adk/contact_multiple_surfaces/contact_data.json	Employee directory for multi-surface rendering demos.
samples/agent/adk/contact_lookup/contact_data.json	Searchable contact records for lookup functionality.
samples/agent/adk/rizzcharts/examples/standard_catalog/chart.json	Statistical data for pie chart visualizations.
samples/agent/adk/rizzcharts/examples/standard_catalog/map.json	Geographic coordinates for map widget binding.
samples/agent/adk/rizzcharts/rizzcharts_catalog_definition.json	Catalog defining component schemas and data pointers.
specification/v0_9/json/basic_catalog.json	Core A2UI schema specification for valid dataset structures.

Summary

• Five sample JSON datasets ship with google/A2UI: restaurant listings, two contact directories, chart statistics, and map coordinates.
• JSON-Pointer paths in catalog definitions determine how UI components consume dataset fields.
• dataModelUpdate messages transmit dataset contents from the agent to the frontend at runtime.
• Python, Angular, and Lit SDKs provide helpers to load JSON files and emit protocol-compliant updates.
• Schema validation is guided by basic_catalog.json in the specification directory.

Frequently Asked Questions

Where are the A2UI sample datasets located?

All sample datasets reside under samples/agent/adk/ in the repository root. Restaurant data lives in restaurant_finder/, contact records appear in both contact_multiple_surfaces/ and contact_lookup/, and visualization data is stored in rizzcharts/examples/standard_catalog/.

How do I use my own dataset with A2UI?

Replace any sample JSON file with your own data, ensuring your JSON structure matches the keys referenced in the catalog's JSON-Pointer paths. Update the agent code to load your file path while preserving the dataModelUpdate key naming convention (e.g., /items[0].propertyName).

What format should custom datasets follow?

Datasets must be JSON-serializable objects or arrays. The schema is defined in specification/v0_9/json/basic_catalog.json, which validates component bindings and data types. Each data point intended for UI display must map to a unique JSON-Pointer key used in the catalog definition.

Can A2UI consume live API data instead of static JSON?

Yes. The sample JSON files are for demonstration only. Production agents can query external APIs, transform the responses into the key/value list format expected by dataModelUpdate, and stream live data to A2UI components without changing the frontend rendering logic.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}