A2UI response generation Skill

Overview

This skill is essential and must be used before generating A2UI (Agent to UI) JSON responses. It enables agents to retrieve A2UI UI JSON schematics and UI templates that best show the response, allowing for the generation of rich, interactive UI responses using the A2UI protocol.

Instead of loading the entire A2UI schema and all examples at once, this skill allows agents to retrieve only the relevant UI templates and schematics based on the response content. The A2UI protocol defines a JSON-based format for dynamically constructing and updating user interfaces. By breaking down the examples into modular templates, agents can:

1. Retrieve the appropriate A2UI UI JSON schematics for validation and structure reference
2. Select UI templates that best match and display the response content
3. Reduce prompt token usage by loading only necessary templates
4. Easily extend with new UI templates for different domains

File Structure

A2UI_response_generator/
├── SKILL.md                          # This file - main skill documentation
├── view_a2ui_schema.py               # Tool to view the complete A2UI schema (schema included in file)
├── view_a2ui_examples.py             # Tool to view UI template examples (templates included in file)
├── __init__.py                       # Package initialization
├── schema/                           # A2UI schema definitions
│   ├── __init__.py
│   └── base_schema.py                # Base A2UI schema
└── UI_templete_examples/             # UI template examples
    ├── __init__.py
    ├── booking_form.py               # Booking form template
    ├── contact_form.py               # Contact form template
    ├── email_compose_form.py         # Email compose form template
    ├── error_message.py              # Error message template
    ├── info_message.py               # Info message template
    ├── item_detail_card_with_image.py # Item detail card with image template
    ├── profile_view.py               # Profile view template
    ├── search_filter_form.py         # Search filter form template
    ├── simple_column_list_without_image.py # Simple list template
    ├── single_column_list.py         # Single column list template
    ├── success_confirmation_with_image.py # Success confirmation template
    └── two_column_list.py            # Two column list template

Quick Start

When it is required to generate UI JSON, follow these steps:

Important: Please use the

execute_shell_command

Step 1: Load the A2UI Schema

Run the following script to load the complete A2UI schema.

Currently available

schema_category

BASE_SCHEMA

Use the

execute_shell_command

python -m view_a2ui_schema --schema_category BASE_SCHEMA

Usage:

python -m view_a2ui_schema --schema_category [schema_category]

BASE_SCHEMA

About detailed usage, please refer to the

./view_a2ui_schema.py

Step 2: Select UI Template Examples

Select appropriate UI template examples based on your response content.

IMPORTANT: You MUST use the exact template names listed in the "Available UI template examples" table below. Do NOT use generic category names like 'list', 'form', 'confirmation', or 'detail'. You MUST use the specific template name (e.g.,

SINGLE_COLUMN_LIST_WITH_IMAGE

BOOKING_FORM_WITH_IMAGE

Use the

execute_shell_command

python -m view_a2ui_examples --template_name SINGLE_COLUMN_LIST_WITH_IMAGE

Usage:

python -m view_a2ui_examples --template_name [template_name]

Available UI template examples (when

schema_category

BASE_SCHEME

SINGLE_COLUMN_LIST_WITH_IMAGE

TWO_COLUMN_LIST_WITH_IMAGE

SIMPLE_LIST

SELECTION_CARD

MULTIPLE_SELECTION_CARDS

BOOKING_FORM_WITH_IMAGE

SEARCH_FILTER_FORM_WITH_IMAGE

CONTACT_FORM_WITH_IMAGE

EMAIL_COMPOSE_FORM_WITH_IMAGE

SUCCESS_CONFIRMATION_WITH_IMAGE

ERROR_MESSAGE

INFO_MESSAGE

ITEM_DETAIL_CARD

ITEM_DETAIL_CARD_WITH_IMAGE

PROFILE_VIEW

Remember: Always use the exact template names from the table above. Never use generic terms like 'list' or 'form' - they are NOT valid template names.

About detailed usage, please refer to the

./view_a2ui_examples.py

Step 3: Generate the A2UI Response

After loading the schema and examples, output your A2UI response directly as text. The text output must contain two parts separated by the delimiter

---a2ui_JSON---

First Part: Conversational text response: Your natural language reply to the user Second Part. A2UI JSON messages: A raw JSON array of A2UI message objects that MUST validate against the A2UI schema

Format:

[Your conversational response here]

---a2ui_JSON---
[
  { "beginRendering": { ... } },
  { "surfaceUpdate": { ... } },
  { "dataModelUpdate": { ... } }
]

Important: The JSON portion must be valid JSON and conform to the A2UI schema loaded in Step 1.

Domain-Specific Extensions

To add support for a new domain (e.g., flight booking, e-commerce), add new templates to

view_a2ui_examples.py

1. Define a new template constant in

   view_a2ui_examples.py

   (e.g.,

   FLIGHT_BOOKING_FORM_EXAMPLE

   )
2. Add the template to the

   TEMPLATE_MAP

   dictionary in

   view_a2ui_examples.py

3. Update this SKILL.md to include the new templates in the available templates list

Troubleshooting

If you encounter any issues running the scripts, make sure: you use the tool

execute_shell_command

1. You are in the correct skill directory (check the skill description for the actual path)
2. The script files (

   view_a2ui_schema.py

   and

   view_a2ui_examples.py

   ) exist in the skill directory
3. You have the required Python dependencies installed

For detailed usage of each script, please refer to:

• ./view_a2ui_schema.py

  - View the A2UI schema

• ./view_a2ui_examples.py

  - View A2UI template examples