A2UI Catalogue

A component vocabulary for agent-driven interfaces.
The model names an atom. The renderer compiles the HTML, CSS, SVG, and animation.

---

The idea

Rather than asking an agent to generate custom UI every turn — expensive, fragile, unpredictable — give it a stable vocabulary of atoms and let it compose from those.

Raw HTML   609 tok  ████████████████████████████████████████
OpenUI     287 tok  ███████████████████
A2UI        68 tok  ████

35× fewer output tokens. Identical UI. The renderer expands a 68-token atom reference into 2,395 tokens of compiled HTML server-side — it never re-enters the model's context window.

---

Google Apps Script renderer — try it live

295 atoms running natively in Google Apps Script. No CDN, no dependencies, no server. Paste a JSON block list, get a rendered page.

{
  "title": "Hello A2UI",
  "theme": "light",
  "blocks": [
    { "component": "heading", "level": 1, "text": "My first A2UI page" },
    { "component": "callout", "icon": "💡", "text": "Built with **295 atoms** in Google Apps Script." },
    { "component": "chartjs_bar", "title": "Quick chart", "bar_color": "#6366f1",
      "data": [{ "label": "A", "value": 80 }, { "label": "B", "value": 45 }, { "label": "C", "value": 62 }] }
  ]
}

What's in the GAS renderer

Feature	Detail
295 registered atoms	Full parity with renderers/web_article.py
CSS-only interactions	Tabs, carousel, gallery lightbox, modals, accordions — zero JS required
Inline SVG charts	Bar, line, pie, donut, heatmap, punch card, sankey, cohort retention, GitHub activity grid
8 form input types	text, email, select, radio, checkbox, switch, slider, date — native HTML controls
Animation fallbacks	32 motion atoms degrade to readable content cards
No CDN	Works inside GAS sandboxed iframes with no external requests
Large payload support	Automatically switches to POST for schemas too large for a URL

Copy apps-script-surface/a2ui-gem-renderer/atom.gs and atoms_charts.gs into any GAS project and call renderAtoms(blocks, { theme: 'light' }).

---

What's in this repo

Directory	Contents
atoms/	Atom schema definitions (435 atoms, schema.yaml)
renderers/	Surface renderers — web_article.py is the canonical web renderer
apps-script-surface/	GAS renderer — atom.gs + atoms_charts.gs (295 atoms, no CDN)
components/	Lit Web Components for the meet-stage surface
scripts/	Publishing pipeline to Firestore
vendors/	Landscape analysis of 9 UI libraries mapped to A2UI atoms
benchmarks/	OpenUI comparison benchmark — token counts across 7 scenarios
spec/	A2UI v0.9 draft spec and gdm-v0.2 component contract
examples/	Playbook YAML examples
knowledge-catalogue/	Curriculum-to-atom pipeline — converts structured knowledge into A2UI blocks. Separate concern from the atom vocabulary itself; see knowledge-catalogue/README.md.

---

435 atoms across 5 surfaces

Atoms declare which surfaces they support at the schema level. An agent picks an atom by name, supplies parameters, and the renderer handles the rest.

[{
  "type": "stat_card",
  "label": "Output tokens saved",
  "value": "97%",
  "delta": "+35×"
}]

Agents never write HTML. They compose from the vocabulary.

---

Surface compatibility

Symbol	Meaning
✅	Full support
⚠️	Renders with caveats
❌	Incompatible — do not use
—	Not applicable

View full compatibility matrix (435 atoms)

Atom	web	meet-stage	googlechat	email	pdf	Source
intro	✅	✅	✅	✅	✅	a2ui
body	✅	✅	✅	✅	✅	a2ui
heading	✅	✅	✅	✅	✅	a2ui
subheading	✅	✅	✅	✅	✅	a2ui
quote	✅	✅	⚠️	✅	✅	a2ui
code	✅	✅	⚠️	⚠️	✅	a2ui
pipeline	✅	✅	⚠️	⚠️	✅	a2ui
bullet_list	✅	✅	✅	✅	✅	a2ui
divider	✅	✅	⚠️	✅	✅	a2ui
youtube	✅	✅	❌	❌	❌	a2ui
image	✅	✅	⚠️	✅	✅	a2ui
image_pair	✅	✅	⚠️	⚠️	✅	a2ui
diagram	✅	✅	⚠️	⚠️	✅	a2ui
github_repo_card	✅	⚠️	⚠️	⚠️	⚠️	a2ui
repo_links	✅	✅	⚠️	✅	✅	a2ui
closing	✅	✅	✅	✅	✅	a2ui
callout	✅	✅	⚠️	⚠️	✅	a2ui
steps	✅	✅	⚠️	⚠️	✅	a2ui
table	✅	✅	⚠️	✅	✅	a2ui
tabs	✅	✅	❌	❌	❌	a2ui
key_value	✅	✅	⚠️	⚠️	✅	a2ui
before_after	✅	✅	❌	❌	⚠️	a2ui
api_reference	✅	✅	⚠️	⚠️	✅	a2ui
gallery	✅	⚠️	❌	❌	⚠️	a2ui
video_pair	✅	✅	❌	❌	❌	a2ui
carousel	✅	✅	❌	❌	⚠️	a2ui
timeline	✅	✅	⚠️	⚠️	✅	a2ui
annotated_code	✅	✅	❌	❌	⚠️	a2ui
stat_card	✅	✅	❌	❌	⚠️	UIverse.io community
progress_bar	✅	✅	❌	❌	⚠️	UIverse.io community
badge_group	✅	✅	❌	⚠️	⚠️	UIverse.io community
sparkline	✅	✅	❌	❌	❌	UIverse.io community
heatmap	✅	✅	❌	❌	❌	UIverse.io community
punch_card	✅	✅	❌	❌	❌	a2ui
sankey_flow	✅	✅	❌	❌	❌	a2ui
cohort_retention	✅	✅	❌	❌	❌	a2ui
donut_stat	✅	✅	⚠️	❌	❌	UIverse.io community
metric_delta	✅	✅	✅	✅	✅	a2ui
task_list	✅	✅	❌	❌	❌	a2ui
sentiment_summary	✅	✅	❌	❌	❌	a2ui
trend_indicator	✅	✅	✅	✅	✅	a2ui
breadcrumb	✅	✅	⚠️	⚠️	⚠️	a2ui
pagination	✅	✅	⚠️	⚠️	⚠️	a2ui
stepper	✅	✅	⚠️	⚠️	⚠️	a2ui
tab_bar	✅	✅	⚠️	⚠️	⚠️	a2ui
anchor_list	✅	✅	⚠️	✅	✅	a2ui
faq_accordion	✅	✅	⚠️	⚠️	✅	a2ui
glossary_term	✅	✅	✅	✅	✅	a2ui
footnote	✅	✅	✅	✅	✅	a2ui
blockquote_with_avatar	✅	✅	⚠️	⚠️	✅	a2ui
pull_stat	✅	✅	✅	✅	✅	a2ui
accordion_item	✅	✅	❌	❌	❌	a2ui
tooltip	✅	✅	❌	❌	❌	a2ui
hover_card	✅	✅	❌	❌	❌	a2ui
collapsible_panel	✅	✅	❌	❌	❌	a2ui
css_modal	✅	✅	❌	❌	❌	UIverse.io community
audio_player	✅	✅	⚠️	⚠️	—	a2ui
audio_link	✅	✅	✅	✅	✅	a2ui
pdf_preview	✅	✅	⚠️	⚠️	—	a2ui
document_link	✅	✅	✅	✅	✅	a2ui
video_thumbnail	✅	✅	⚠️	⚠️	—	a2ui
video_card	✅	✅	⚠️	⚠️	—	a2ui
code_diff	✅	✅	⚠️	❌	⚠️	a2ui
code_snippet_pair	✅	✅	⚠️	⚠️	—	a2ui
framed_screenshot	✅	✅	❌	❌	❌	a2ui
image_with_caption	✅	✅	✅	✅	✅	a2ui
alert_banner	✅	✅	⚠️	❌	—	UIverse.io community
toast_notification	✅	✅	❌	❌	—	UIverse.io community
loading_skeleton	✅	✅	❌	❌	—	UIverse.io community
empty_state	✅	✅	⚠️	⚠️	—	a2ui
spinner	✅	✅	❌	❌	—	UIverse.io community
status_pill	✅	✅	⚠️	⚠️	—	UIverse.io community
inline_feedback_message	✅	✅	⚠️	⚠️	—	a2ui
rating_stars	✅	✅	⚠️	⚠️	—	UIverse.io community
progress_circle	✅	✅	❌	❌	⚠️	UIverse.io community
action_required_card	✅	✅	✅	⚠️	—	a2ui
feature_matrix	✅	✅	⚠️	❌	✅	a2ui
pricing_tier_card	✅	✅	✅	✅	✅	a2ui
pricing_tier_group	✅	✅	⚠️	⚠️	✅	a2ui
pros_cons_list	✅	✅	✅	✅	✅	a2ui
side_by_side_spec	✅	✅	⚠️	❌	✅	a2ui
product_spec_table	✅	✅	⚠️	❌	✅	a2ui
comparison_grid	✅	✅	⚠️	⚠️	✅	a2ui
versus_block	✅	✅	⚠️	⚠️	—	a2ui
rating_comparison	✅	✅	✅	✅	✅	a2ui
capability_checklist	✅	✅	⚠️	❌	✅	a2ui
toggle_switch	✅	✅	❌	❌	❌	UIverse.io community
expandable_text	✅	✅	❌	❌	❌	a2ui
flip_card	✅	✅	❌	❌	❌	UIverse.io community
image_hotspots	✅	✅	❌	❌	❌	UIverse.io community
css_dropdown_menu	✅	✅	❌	❌	❌	UIverse.io community
star_rating_input	✅	✅	❌	❌	❌	UIverse.io community
segmented_control	✅	✅	❌	❌	❌	UIverse.io community
zoomable_image	✅	✅	❌	❌	❌	UIverse.io community
custom_checkbox_group	✅	✅	❌	❌	❌	UIverse.io community
css_slide_panel	✅	✅	❌	❌	❌	UIverse.io community
testimonial_card	✅	✅	⚠️	⚠️	✅	a2ui
star_rating_display	✅	✅	⚠️	⚠️	✅	UIverse.io community
avatar_group	✅	✅	⚠️	⚠️	✅	UIverse.io community
contributor_list	✅	✅	⚠️	⚠️	✅	a2ui
customer_logo_grid	✅	✅	⚠️	⚠️	✅	a2ui
social_proof_banner	✅	✅	⚠️	⚠️	✅	UIverse.io community
media_mention_card	✅	✅	⚠️	⚠️	✅	a2ui
expert_endorsement	✅	✅	⚠️	⚠️	✅	a2ui
review_callout	✅	✅	⚠️	⚠️	✅	a2ui
social_feed_embed	✅	✅	❌	❌	❌	a2ui
terminal_block	✅	⚠️	⚠️	⚠️	—	a2ui
file_tree	✅	⚠️	⚠️	⚠️	—	ui
tabbed_code	✅	⚠️	⚠️	⚠️	—	ui
http_request_block	✅	⚠️	⚠️	⚠️	—	Flowbite
env_var_list	✅	⚠️	⚠️	⚠️	—	a2ui
prerequisite_checklist	✅	—	⚠️	⚠️	—	Flowbite
keyboard_shortcut	✅	—	⚠️	⚠️	—	Flowbite
api_param_table	✅	⚠️	⚠️	⚠️	—	ui
version_badge	✅	—	⚠️	⚠️	—	Flowbite
deprecation_notice	✅	—	⚠️	⚠️	—	ui
experimental_banner	✅	—	⚠️	⚠️	—	Flowbite
cli_command	✅	⚠️	⚠️	⚠️	—	UIverse.io community
copy_code_button	✅	⚠️	⚠️	⚠️	—	UIverse.io community
log_output	✅	⚠️	⚠️	⚠️	—	a2ui
json_tree_viewer	✅	⚠️	⚠️	⚠️	—	ui
key_takeaways	✅	—	⚠️	⚠️	—	Flowbite
summary_box	✅	—	⚠️	⚠️	—	ui
learning_objectives	✅	—	⚠️	⚠️	—	Flowbite
changelog_entry	✅	⚠️	⚠️	⚠️	—	ui
release_notes	✅	—	⚠️	⚠️	—	Flowbite
further_reading	✅	—	⚠️	⚠️	—	a2ui
resources_list	✅	—	⚠️	⚠️	—	Flowbite
sidebar_note	✅	⚠️	⚠️	⚠️	—	ui
difficulty_badge	✅	—	⚠️	⚠️	—	Flowbite
caution_block	✅	—	⚠️	⚠️	—	ui
checklist_interactive	✅	⚠️	⚠️	⚠️	—	Flowbite
glossary_inline	✅	⚠️	⚠️	⚠️	—	ui
time_estimate	✅	—	⚠️	⚠️	—	Flowbite
progress_checkpoint	✅	⚠️	⚠️	⚠️	—	ui
social_share_bar	✅	⚠️	⚠️	⚠️	—	UIverse.io community
newsletter_cta	✅	⚠️	⚠️	⚠️	—	Flowbite
author_bio_card	✅	—	⚠️	⚠️	—	Flowbite
related_posts_grid	✅	⚠️	⚠️	⚠️	—	a2ui
series_overview_card	✅	—	⚠️	⚠️	—	ui
reaction_group	✅	⚠️	⚠️	⚠️	—	UIverse.io community
share_quote	✅	⚠️	⚠️	⚠️	—	Flowbite
follow_cta	✅	—	⚠️	⚠️	—	Flowbite
follow_button	✅	⚠️	⚠️	⚠️	—	UIverse.io community
reading_progress_bar	✅	⚠️	⚠️	⚠️	—	a2ui
table_of_contents	✅	⚠️	⚠️	⚠️	—	a2ui
article_hero	✅	—	⚠️	⚠️	—	a2ui
scroll_to_top	✅	⚠️	⚠️	⚠️	—	a2ui
article_series_nav	✅	—	⚠️	⚠️	—	a2ui
embed_codepen	✅	⚠️	⚠️	⚠️	—	a2ui
embed_stackblitz	✅	⚠️	⚠️	⚠️	—	a2ui
embed_gist	✅	—	⚠️	⚠️	—	a2ui
embed_tweet	✅	⚠️	⚠️	⚠️	—	a2ui
embed_google_slides	✅	⚠️	⚠️	⚠️	—	a2ui
lottie_animation	✅	⚠️	⚠️	⚠️	—	a2ui
figma_embed	✅	⚠️	⚠️	⚠️	—	a2ui
color_swatch_grid	✅	✅	—	⚠️	—	a2ui
live_demo_embed	✅	⚠️	⚠️	⚠️	—	a2ui
benchmark_comparison	✅	✅	—	⚠️	—	a2ui
chartjs_bar	✅	⚠️	⚠️	⚠️	—	a2ui
chartjs_line	✅	⚠️	⚠️	⚠️	—	a2ui
data_table_sortable	✅	⚠️	—	⚠️	—	a2ui
metric_comparison_card	✅	✅	—	⚠️	—	a2ui
mini_sparkline_set	✅	✅	—	⚠️	—	a2ui
status_dashboard	✅	✅	—	⚠️	—	a2ui
uptime_timeline	✅	✅	—	⚠️	—	a2ui
command_palette	✅	⚠️	⚠️	⚠️	—	a2ui
search_result_card	✅	✅	—	⚠️	—	a2ui
post_metadata_bar	✅	⚠️	—	⚠️	—	a2ui
footnote_group	✅	⚠️	—	✅	—	a2ui
notification_badge	✅	⚠️	—	⚠️	—	a2ui
expandable_list	✅	⚠️	—	⚠️	—	a2ui
poll_block	✅	⚠️	—	⚠️	—	a2ui
abbr_tooltip	✅	⚠️	—	⚠️	—	a2ui
copy_to_clipboard	✅	⚠️	—	⚠️	—	a2ui
conversion_funnel	✅	✅	❌	—	—	a2ui
gauge_sla	✅	✅	❌	—	—	a2ui
stacked_area	✅	✅	❌	—	—	a2ui
scatter_trend	✅	✅	❌	—	—	a2ui
call_mood_board	✅	✅	❌	—	—	a2ui
github_activity_grid	✅	✅	❌	—	—	a2ui
form	✅	⚠️	❌	❌	❌	Thesys
form_input	✅	⚠️	❌	❌	❌	Thesys
form_select	✅	⚠️	❌	❌	❌	Thesys
form_radio_group	✅	⚠️	❌	❌	❌	Thesys
form_checkbox_group	✅	⚠️	❌	❌	❌	Thesys
form_switch_group	✅	⚠️	❌	❌	❌	Thesys
form_slider	✅	⚠️	❌	❌	❌	Thesys
form_date_picker	✅	⚠️	❌	❌	❌	Thesys
modal	✅	✅	❌	❌	❌	Thesys
follow_up_chips	✅	⚠️	❌	❌	❌	Thesys
choicebox_group	✅	⚠️	❌	❌	❌	a2ui
feedback_prompt	✅	⚠️	❌	❌	❌	a2ui
entity_list	✅	✅	✅	✅	✅	a2ui
prompt_template	✅	✅	⚠️	⚠️	✅	a2ui
model_card	✅	✅	✅	✅	✅	a2ui
conversation_snippet	✅	✅	✅	✅	✅	a2ui
shortcut_legend	✅	✅	✅	✅	✅	a2ui
rating_summary_bar	✅	✅	✅	✅	✅	a2ui
roadmap_card	✅	✅	✅	✅	✅	a2ui
notification_stack	✅	✅	✅	✅	✅	a2ui
inline_alert	✅	✅	⚠️	⚠️	⚠️	a2ui
tag_block	✅	✅	⚠️	✅	✅	Thesys
variant_selector	✅	✅	❌	❌	❌	Thesys
markdown_block	✅	✅	⚠️	✅	✅	Thesys
chartjs_pie	✅	✅	⚠️	❌	✅	Thesys
text_callout	✅	✅	✅	✅	✅	Thesys
source_citation	✅	✅	⚠️	✅	✅	a2ui
llm_comparison_table	✅	✅	⚠️	⚠️	✅	a2ui
confidence_bar	✅	✅	⚠️	✅	✅	a2ui
token_budget_meter	✅	✅	⚠️	⚠️	✅	a2ui
product_thumbnail	✅	✅	⚠️	✅	✅	Shopify Polaris
order_status_card	✅	✅	⚠️	✅	✅	Shopify Polaris
inventory_table	✅	✅	⚠️	✅	✅	Shopify Polaris
jira_ticket	✅	✅	⚠️	✅	✅	Atlassian Design System
sprint_board	✅	✅	⚠️	⚠️	✅	Atlassian Design System
lozenge	✅	✅	⚠️	✅	✅	Atlassian Design System
data_grid	✅	✅	⚠️	⚠️	✅	IBM Carbon Design System
tree_view	✅	✅	⚠️	✅	✅	IBM Carbon Design System
heatmap_calendar	✅	✅	⚠️	⚠️	✅	IBM Carbon Design System
combobox	✅	✅	❌	❌	⚠️	ui
feature_grid	✅	⚠️	❌	⚠️	✅	shadcn
navigation_menu	✅	❌	❌	❌	⚠️	shadcn
multi_select_input	✅	✅	❌	❌	⚠️	ui
otp_input	✅	⚠️	❌	❌	❌	ui
bento_grid	✅	⚠️	❌	⚠️	✅	shadcn
cta_section	✅	⚠️	⚠️	✅	✅	Tailwind UI
animated_counter	✅	⚠️	❌	❌	⚠️	a2ui
media_stream_card	✅	✅	❌	⚠️	⚠️	a2ui
live_aggregator	✅	✅	❌	⚠️	⚠️	a2ui
vote_button_group	✅	✅	❌	⚠️	⚠️	a2ui
effect_overlay	✅	✅	❌	⚠️	⚠️	a2ui
skeleton_stage_card	✅	✅	❌	❌	⚠️	a2ui
marquee_strip	✅	✅	⚠️	❌	⚠️	a2ui
typewriter_text	✅	✅	⚠️	❌	⚠️	a2ui
animated_border_card	✅	✅	⚠️	❌	⚠️	a2ui
aurora_background	✅	✅	⚠️	❌	⚠️	a2ui
dot_grid_background	✅	✅	⚠️	❌	✅	a2ui
shimmer_button	✅	✅	⚠️	❌	⚠️	a2ui
card_stack	✅	✅	⚠️	❌	⚠️	a2ui
meteor_shower	✅	✅	⚠️	❌	⚠️	a2ui
blur_fade_in	✅	✅	⚠️	❌	⚠️	a2ui
glow_button	✅	✅	⚠️	❌	⚠️	a2ui
animated_beam	✅	✅	⚠️	❌	⚠️	a2ui
encrypted_reveal	✅	✅	⚠️	❌	⚠️	a2ui
word_flip	✅	✅	⚠️	❌	⚠️	a2ui
sonar_pulse	✅	✅	⚠️	❌	⚠️	a2ui
typewriter	✅	✅	⚠️	❌	⚠️	a2ui
number_odometer	✅	✅	⚠️	❌	⚠️	a2ui
typing_indicator	✅	✅	⚠️	❌	⚠️	a2ui
countdown_timer	✅	✅	⚠️	❌	⚠️	a2ui
gradient_text	✅	✅	⚠️	❌	⚠️	a2ui
reveal_on_scroll	✅	⚠️	⚠️	❌	⚠️	a2ui
word_scramble	✅	✅	⚠️	❌	⚠️	a2ui
svg_path_draw	✅	✅	⚠️	❌	⚠️	a2ui
toast_notification	✅	⚠️	⚠️	❌	⚠️	a2ui
parallax_card	✅	⚠️	⚠️	❌	⚠️	a2ui
quiz_question	✅	⚠️	❌	❌	⚠️	a2ui
fill_in_blank	✅	⚠️	❌	❌	⚠️	a2ui
match_exercise	✅	⚠️	❌	❌	⚠️	a2ui
hint_reveal	✅	✅	⚠️	⚠️	⚠️	a2ui
achievement_badge	✅	✅	⚠️	✅	✅	a2ui
score_summary	✅	✅	⚠️	⚠️	✅	a2ui
xp_bar	✅	✅	❌	❌	⚠️	a2ui
lesson_nav	✅	⚠️	⚠️	⚠️	⚠️	a2ui
course_progress_card	✅	✅	⚠️	⚠️	✅	a2ui
highlighted_text	✅	✅	⚠️	⚠️	✅	a2ui

✅ works fully ⚠️ degraded — renders with caveats ❌ incompatible — do not use

---

Vendor landscape

Nine UI libraries benchmarked against the A2UI atom vocabulary — gaps identified, licences checked, adaptation priority set. See vendors/LANDSCAPE.md for the full analysis.

Tier	Libraries
Tier 1 — act now	AI-native patterns, Microsoft Fluent UI
Tier 2 — delivered	Shopify Polaris, Atlassian Design System, IBM Carbon
Tier 3 — monitor	Tailwind UI, Radix UI, MagicUI / Aceternity, Vercel Geist

---

Using this vocabulary

1. Copy atoms/schema.yaml into your agent's system prompt or tool definition
2. Teach your agent the composition pattern — pick atoms by name, supply parameters
3. Parse the agent's output and render using:
   • Google Apps Script — copy atom.gs + atoms_charts.gs into any GAS project, call renderAtoms(blocks)
   • Python / web — use renderers/web_article.py (server-side, supports all 435 atoms including animations)
   • Meet Stage — renderers/meet_stage.py for live presentation panels via gdm-html-panel
   • Your own renderer — the spec is framework-agnostic

The renderer handles HTML, CSS, SVG, and animation. The model never touches them.

---

On the name

This catalogue is compliant with the Google A2UI v0.9 specification. Google established the A2- prefix for agent-interface concepts and published the v0.9 spec in June 2026 — this vocabulary is independently developed and interoperable with that spec. Not affiliated with Google.

Related work

Source	Relevance
A2UI v0.9 — Google Developers Blog	Google's A2UI spec — separates structure (agent) from implementation (renderer), no surface compatibility layer yet
MCP-UI — Interactive UI for MCP	Capability negotiation at client handshake level, not component level
The State of Agentic UI — CopilotKit	Compares AG-UI, MCP-UI, A2UI — none have atom-level surface tagging
W3C UI Specification Schema CG	Machine-readable meta-model for cross-platform UI constraints — closest to this approach

---

License

MIT. See LICENSE for details.

---

Built by Curtis Krygier.