Recipes
Booking Receipt
A modal booking confirmation composed from standard A2UI catalog components — the kind of interface Agent generates after a customer completes a booking.
Booking Receipt
A complete booking confirmation dialog — the kind of UI that Agent streams to the client after a customer books a service through the platform.
This recipe uses only standard catalog components — no custom extensions needed. It demonstrates how an AI agent composes existing primitives (Modal, Card, Column, Row, Text, Heading, Divider, Button, Icon) into a polished, production-ready receipt.
What the AI Generates
The agent streams this JSONL payload to create the receipt:
{"version":"v0.10","createSurface":{"surfaceId":"booking_receipt","catalogId":"standard"}}
{"version":"v0.10","updateComponents":{"surfaceId":"booking_receipt","components":[
{"id":"root","component":"Modal","trigger":"trigger_btn","content":"receipt_card"},
{"id":"trigger_btn","component":"Button","label":"View Booking Receipt","variant":"primary","icon":"i-lucide-receipt"},
{"id":"receipt_card","component":"Column","children":["header_row","divider_1","details_col","divider_2","pricing_col","divider_3","footer_row"]},
{"id":"header_row","component":"Column","children":["status_icon","receipt_title","receipt_subtitle"],"alignment":"center"},
{"id":"status_icon","component":"Icon","icon":"i-lucide-circle-check","size":"48","color":"green"},
{"id":"receipt_title","component":"Text","text":"Booking Confirmed","variant":"heading","level":2},
{"id":"receipt_subtitle","component":"Text","text":"Your appointment has been scheduled successfully.","variant":"muted"},
{"id":"divider_1","component":"Divider"},
{"id":"details_col","component":"Column","children":["detail_service","detail_provider","detail_date","detail_location"]},
{"id":"detail_service","component":"Row","children":["detail_service_label","detail_service_value"]},
{"id":"detail_service_label","component":"Text","text":"Service","variant":"muted"},
{"id":"detail_service_value","component":"Text","text":"Deep Tissue Massage — 60 min"},
{"id":"detail_provider","component":"Row","children":["detail_provider_label","detail_provider_value"]},
{"id":"detail_provider_label","component":"Text","text":"Provider","variant":"muted"},
{"id":"detail_provider_value","component":"Text","text":"Elísabet Jónsdóttir"},
{"id":"detail_date","component":"Row","children":["detail_date_label","detail_date_value"]},
{"id":"detail_date_label","component":"Text","text":"Date & Time","variant":"muted"},
{"id":"detail_date_value","component":"Text","text":"Mon, Feb 17 · 14:00 – 15:00"},
{"id":"detail_location","component":"Row","children":["detail_location_label","detail_location_value"]},
{"id":"detail_location_label","component":"Text","text":"Location","variant":"muted"},
{"id":"detail_location_value","component":"Text","text":"Drammen Wellness Studio, Laugavegur 42"},
{"id":"divider_2","component":"Divider"},
{"id":"pricing_col","component":"Column","children":["price_subtotal","price_discount","price_total"]},
{"id":"price_subtotal","component":"Row","children":["price_subtotal_label","price_subtotal_value"]},
{"id":"price_subtotal_label","component":"Text","text":"Subtotal","variant":"muted"},
{"id":"price_subtotal_value","component":"Text","text":"12.900 ISK"},
{"id":"price_discount","component":"Row","children":["price_discount_label","price_discount_value"]},
{"id":"price_discount_label","component":"Text","text":"First-time discount","variant":"muted"},
{"id":"price_discount_value","component":"Text","text":"−1.290 ISK","color":"green"},
{"id":"price_total","component":"Row","children":["price_total_label","price_total_value"]},
{"id":"price_total_label","component":"Text","text":"Total","variant":"heading","level":4},
{"id":"price_total_value","component":"Text","text":"11.610 ISK","variant":"heading","level":4},
{"id":"divider_3","component":"Divider"},
{"id":"footer_row","component":"Row","children":["btn_calendar","btn_done"]},
{"id":"btn_calendar","component":"Button","label":"Add to Calendar","variant":"outline","icon":"i-lucide-calendar-plus"},
{"id":"btn_done","component":"Button","label":"Done","variant":"primary"}
]}}
Design Rationale
| Pattern | Why | A2UI Component |
|---|---|---|
| Status header | Green check icon + confirmation text gives immediate visual feedback | Icon + Text (heading) |
| Key-value rows | Service details in label → value pairs for scanability | Row with two Text children |
| Divider sections | Visual separation between header, details, pricing, and actions | Divider |
| Pricing breakdown | Subtotal, discount, total — standard receipt pattern | Column of Row pairs |
| Dual CTA | "Add to Calendar" (secondary) + "Done" (primary) — common receipt footer | Row with two Button children |
Try It
Paste the JSONL above into the Playground to see it render live.
Real-World Context
In the AI Agents platform, this receipt is generated when:
- A customer completes a booking through AI Agent (the customer-facing agent)
- AI Agent confirms the slot with the backend and streams the receipt
- The receipt renders progressively — header first, then details, then pricing
- The customer sees each section appear as it streams in, creating a natural "building" feel
The same JSONL payload renders identically whether the client is a Nuxt web app, a Flutter mobile app, or any other A2UI-compatible renderer.