[{"data":1,"prerenderedAt":588},["ShallowReactive",2],{"navigation":3,"/recipes/booking-receipt":117,"/recipes/booking-receipt-surround":583},[4,11,98],{"title":5,"path":6,"stem":7,"children":8,"icon":10},"Introduction","/getting-started","1.getting-started/1.index",[9],{"title":5,"path":6,"stem":7,"icon":10},"i-lucide-house",{"title":12,"path":13,"stem":14,"children":15,"icon":17},"Component Catalog","/components","2.components/01.index",[16,18,22,26,30,34,38,42,46,50,54,58,62,66,70,74,78,82,86,90,94],{"title":12,"path":13,"stem":14,"icon":17},"i-lucide-layout-grid",{"title":19,"path":20,"stem":21},"Text","/components/text","2.components/02.text",{"title":23,"path":24,"stem":25},"Button","/components/button","2.components/03.button",{"title":27,"path":28,"stem":29},"Slider","/components/slider","2.components/04.slider",{"title":31,"path":32,"stem":33},"ChoicePicker","/components/choicepicker","2.components/05.choicepicker",{"title":35,"path":36,"stem":37},"Modal","/components/modal","2.components/06.modal",{"title":39,"path":40,"stem":41},"DateTimeInput","/components/datetimeinput","2.components/07.datetimeinput",{"title":43,"path":44,"stem":45},"Image","/components/image","2.components/08.image",{"title":47,"path":48,"stem":49},"Icon","/components/icon","2.components/09.icon",{"title":51,"path":52,"stem":53},"Video","/components/video","2.components/10.video",{"title":55,"path":56,"stem":57},"AudioPlayer","/components/audioplayer","2.components/11.audioplayer",{"title":59,"path":60,"stem":61},"Row","/components/row","2.components/12.row",{"title":63,"path":64,"stem":65},"Column","/components/column","2.components/13.column",{"title":67,"path":68,"stem":69},"List","/components/list","2.components/14.list",{"title":71,"path":72,"stem":73},"Card","/components/card","2.components/15.card",{"title":75,"path":76,"stem":77},"Tabs","/components/tabs","2.components/16.tabs",{"title":79,"path":80,"stem":81},"Divider","/components/divider","2.components/17.divider",{"title":83,"path":84,"stem":85},"TextField","/components/textfield","2.components/18.textfield",{"title":87,"path":88,"stem":89},"CheckBox","/components/checkbox","2.components/19.checkbox",{"title":91,"path":92,"stem":93},"Slideover","/components/slideover","2.components/20.slideover",{"title":95,"path":96,"stem":97},"Table","/components/table","2.components/21.table",{"title":99,"path":100,"stem":101,"children":102,"icon":104},"Recipes","/recipes","3.recipes/01.index",[103,105,109,113],{"title":99,"path":100,"stem":101,"icon":104},"i-lucide-chef-hat",{"title":106,"path":107,"stem":108},"Booking Receipt","/recipes/booking-receipt","3.recipes/02.booking-receipt",{"title":110,"path":111,"stem":112},"Establishment Detail","/recipes/establishment-detail","3.recipes/03.establishment-detail",{"title":114,"path":115,"stem":116},"Booking History","/recipes/booking-history","3.recipes/04.booking-history",{"id":118,"title":106,"body":119,"description":575,"extension":576,"links":577,"meta":578,"navigation":580,"path":107,"seo":581,"stem":108,"__hash__":582},"docs/3.recipes/02.booking-receipt.md",{"type":120,"value":121,"toc":569},"minimark",[122,126,135,164,169,172,417,421,518,522,531,535,542,562,565],[123,124,106],"h1",{"id":125},"booking-receipt",[127,128,129,130,134],"p",{},"A complete booking confirmation dialog — the kind of UI that ",[131,132,133],"strong",{},"Agent"," streams to the client after a customer books a service through the platform.",[127,136,137,138,141,142,145,146,145,148,145,150,145,152,145,154,145,157,145,159,145,161,163],{},"This recipe uses ",[131,139,140],{},"only standard catalog components"," — no custom extensions needed. It demonstrates how an AI agent composes existing primitives (",[143,144,35],"code",{},", ",[143,147,71],{},[143,149,63],{},[143,151,59],{},[143,153,19],{},[143,155,156],{},"Heading",[143,158,79],{},[143,160,23],{},[143,162,47],{},") into a polished, production-ready receipt.",[165,166,168],"h2",{"id":167},"what-the-ai-generates","What the AI Generates",[127,170,171],{},"The agent streams this JSONL payload to create the receipt:",[173,174,179],"pre",{"className":175,"code":176,"language":177,"meta":178,"style":178},"language-jsonl shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\"version\":\"v0.10\",\"createSurface\":{\"surfaceId\":\"booking_receipt\",\"catalogId\":\"standard\"}}\n{\"version\":\"v0.10\",\"updateComponents\":{\"surfaceId\":\"booking_receipt\",\"components\":[\n  {\"id\":\"root\",\"component\":\"Modal\",\"trigger\":\"trigger_btn\",\"content\":\"receipt_card\"},\n  {\"id\":\"trigger_btn\",\"component\":\"Button\",\"label\":\"View Booking Receipt\",\"variant\":\"primary\",\"icon\":\"i-lucide-receipt\"},\n  {\"id\":\"receipt_card\",\"component\":\"Column\",\"children\":[\"header_row\",\"divider_1\",\"details_col\",\"divider_2\",\"pricing_col\",\"divider_3\",\"footer_row\"]},\n  {\"id\":\"header_row\",\"component\":\"Column\",\"children\":[\"status_icon\",\"receipt_title\",\"receipt_subtitle\"],\"alignment\":\"center\"},\n  {\"id\":\"status_icon\",\"component\":\"Icon\",\"icon\":\"i-lucide-circle-check\",\"size\":\"48\",\"color\":\"green\"},\n  {\"id\":\"receipt_title\",\"component\":\"Text\",\"text\":\"Booking Confirmed\",\"variant\":\"heading\",\"level\":2},\n  {\"id\":\"receipt_subtitle\",\"component\":\"Text\",\"text\":\"Your appointment has been scheduled successfully.\",\"variant\":\"muted\"},\n  {\"id\":\"divider_1\",\"component\":\"Divider\"},\n  {\"id\":\"details_col\",\"component\":\"Column\",\"children\":[\"detail_service\",\"detail_provider\",\"detail_date\",\"detail_location\"]},\n  {\"id\":\"detail_service\",\"component\":\"Row\",\"children\":[\"detail_service_label\",\"detail_service_value\"]},\n  {\"id\":\"detail_service_label\",\"component\":\"Text\",\"text\":\"Service\",\"variant\":\"muted\"},\n  {\"id\":\"detail_service_value\",\"component\":\"Text\",\"text\":\"Deep Tissue Massage — 60 min\"},\n  {\"id\":\"detail_provider\",\"component\":\"Row\",\"children\":[\"detail_provider_label\",\"detail_provider_value\"]},\n  {\"id\":\"detail_provider_label\",\"component\":\"Text\",\"text\":\"Provider\",\"variant\":\"muted\"},\n  {\"id\":\"detail_provider_value\",\"component\":\"Text\",\"text\":\"Elísabet Jónsdóttir\"},\n  {\"id\":\"detail_date\",\"component\":\"Row\",\"children\":[\"detail_date_label\",\"detail_date_value\"]},\n  {\"id\":\"detail_date_label\",\"component\":\"Text\",\"text\":\"Date & Time\",\"variant\":\"muted\"},\n  {\"id\":\"detail_date_value\",\"component\":\"Text\",\"text\":\"Mon, Feb 17 · 14:00 – 15:00\"},\n  {\"id\":\"detail_location\",\"component\":\"Row\",\"children\":[\"detail_location_label\",\"detail_location_value\"]},\n  {\"id\":\"detail_location_label\",\"component\":\"Text\",\"text\":\"Location\",\"variant\":\"muted\"},\n  {\"id\":\"detail_location_value\",\"component\":\"Text\",\"text\":\"Drammen Wellness Studio, Laugavegur 42\"},\n  {\"id\":\"divider_2\",\"component\":\"Divider\"},\n  {\"id\":\"pricing_col\",\"component\":\"Column\",\"children\":[\"price_subtotal\",\"price_discount\",\"price_total\"]},\n  {\"id\":\"price_subtotal\",\"component\":\"Row\",\"children\":[\"price_subtotal_label\",\"price_subtotal_value\"]},\n  {\"id\":\"price_subtotal_label\",\"component\":\"Text\",\"text\":\"Subtotal\",\"variant\":\"muted\"},\n  {\"id\":\"price_subtotal_value\",\"component\":\"Text\",\"text\":\"12.900 ISK\"},\n  {\"id\":\"price_discount\",\"component\":\"Row\",\"children\":[\"price_discount_label\",\"price_discount_value\"]},\n  {\"id\":\"price_discount_label\",\"component\":\"Text\",\"text\":\"First-time discount\",\"variant\":\"muted\"},\n  {\"id\":\"price_discount_value\",\"component\":\"Text\",\"text\":\"−1.290 ISK\",\"color\":\"green\"},\n  {\"id\":\"price_total\",\"component\":\"Row\",\"children\":[\"price_total_label\",\"price_total_value\"]},\n  {\"id\":\"price_total_label\",\"component\":\"Text\",\"text\":\"Total\",\"variant\":\"heading\",\"level\":4},\n  {\"id\":\"price_total_value\",\"component\":\"Text\",\"text\":\"11.610 ISK\",\"variant\":\"heading\",\"level\":4},\n  {\"id\":\"divider_3\",\"component\":\"Divider\"},\n  {\"id\":\"footer_row\",\"component\":\"Row\",\"children\":[\"btn_calendar\",\"btn_done\"]},\n  {\"id\":\"btn_calendar\",\"component\":\"Button\",\"label\":\"Add to Calendar\",\"variant\":\"outline\",\"icon\":\"i-lucide-calendar-plus\"},\n  {\"id\":\"btn_done\",\"component\":\"Button\",\"label\":\"Done\",\"variant\":\"primary\"}\n]}}\n","jsonl","",[143,180,181,189,195,201,207,213,219,225,231,237,243,249,255,261,267,273,279,285,291,297,303,309,315,321,327,333,339,345,351,357,363,369,375,381,387,393,399,405,411],{"__ignoreMap":178},[182,183,186],"span",{"class":184,"line":185},"line",1,[182,187,188],{},"{\"version\":\"v0.10\",\"createSurface\":{\"surfaceId\":\"booking_receipt\",\"catalogId\":\"standard\"}}\n",[182,190,192],{"class":184,"line":191},2,[182,193,194],{},"{\"version\":\"v0.10\",\"updateComponents\":{\"surfaceId\":\"booking_receipt\",\"components\":[\n",[182,196,198],{"class":184,"line":197},3,[182,199,200],{},"  {\"id\":\"root\",\"component\":\"Modal\",\"trigger\":\"trigger_btn\",\"content\":\"receipt_card\"},\n",[182,202,204],{"class":184,"line":203},4,[182,205,206],{},"  {\"id\":\"trigger_btn\",\"component\":\"Button\",\"label\":\"View Booking Receipt\",\"variant\":\"primary\",\"icon\":\"i-lucide-receipt\"},\n",[182,208,210],{"class":184,"line":209},5,[182,211,212],{},"  {\"id\":\"receipt_card\",\"component\":\"Column\",\"children\":[\"header_row\",\"divider_1\",\"details_col\",\"divider_2\",\"pricing_col\",\"divider_3\",\"footer_row\"]},\n",[182,214,216],{"class":184,"line":215},6,[182,217,218],{},"  {\"id\":\"header_row\",\"component\":\"Column\",\"children\":[\"status_icon\",\"receipt_title\",\"receipt_subtitle\"],\"alignment\":\"center\"},\n",[182,220,222],{"class":184,"line":221},7,[182,223,224],{},"  {\"id\":\"status_icon\",\"component\":\"Icon\",\"icon\":\"i-lucide-circle-check\",\"size\":\"48\",\"color\":\"green\"},\n",[182,226,228],{"class":184,"line":227},8,[182,229,230],{},"  {\"id\":\"receipt_title\",\"component\":\"Text\",\"text\":\"Booking Confirmed\",\"variant\":\"heading\",\"level\":2},\n",[182,232,234],{"class":184,"line":233},9,[182,235,236],{},"  {\"id\":\"receipt_subtitle\",\"component\":\"Text\",\"text\":\"Your appointment has been scheduled successfully.\",\"variant\":\"muted\"},\n",[182,238,240],{"class":184,"line":239},10,[182,241,242],{},"  {\"id\":\"divider_1\",\"component\":\"Divider\"},\n",[182,244,246],{"class":184,"line":245},11,[182,247,248],{},"  {\"id\":\"details_col\",\"component\":\"Column\",\"children\":[\"detail_service\",\"detail_provider\",\"detail_date\",\"detail_location\"]},\n",[182,250,252],{"class":184,"line":251},12,[182,253,254],{},"  {\"id\":\"detail_service\",\"component\":\"Row\",\"children\":[\"detail_service_label\",\"detail_service_value\"]},\n",[182,256,258],{"class":184,"line":257},13,[182,259,260],{},"  {\"id\":\"detail_service_label\",\"component\":\"Text\",\"text\":\"Service\",\"variant\":\"muted\"},\n",[182,262,264],{"class":184,"line":263},14,[182,265,266],{},"  {\"id\":\"detail_service_value\",\"component\":\"Text\",\"text\":\"Deep Tissue Massage — 60 min\"},\n",[182,268,270],{"class":184,"line":269},15,[182,271,272],{},"  {\"id\":\"detail_provider\",\"component\":\"Row\",\"children\":[\"detail_provider_label\",\"detail_provider_value\"]},\n",[182,274,276],{"class":184,"line":275},16,[182,277,278],{},"  {\"id\":\"detail_provider_label\",\"component\":\"Text\",\"text\":\"Provider\",\"variant\":\"muted\"},\n",[182,280,282],{"class":184,"line":281},17,[182,283,284],{},"  {\"id\":\"detail_provider_value\",\"component\":\"Text\",\"text\":\"Elísabet Jónsdóttir\"},\n",[182,286,288],{"class":184,"line":287},18,[182,289,290],{},"  {\"id\":\"detail_date\",\"component\":\"Row\",\"children\":[\"detail_date_label\",\"detail_date_value\"]},\n",[182,292,294],{"class":184,"line":293},19,[182,295,296],{},"  {\"id\":\"detail_date_label\",\"component\":\"Text\",\"text\":\"Date & Time\",\"variant\":\"muted\"},\n",[182,298,300],{"class":184,"line":299},20,[182,301,302],{},"  {\"id\":\"detail_date_value\",\"component\":\"Text\",\"text\":\"Mon, Feb 17 · 14:00 – 15:00\"},\n",[182,304,306],{"class":184,"line":305},21,[182,307,308],{},"  {\"id\":\"detail_location\",\"component\":\"Row\",\"children\":[\"detail_location_label\",\"detail_location_value\"]},\n",[182,310,312],{"class":184,"line":311},22,[182,313,314],{},"  {\"id\":\"detail_location_label\",\"component\":\"Text\",\"text\":\"Location\",\"variant\":\"muted\"},\n",[182,316,318],{"class":184,"line":317},23,[182,319,320],{},"  {\"id\":\"detail_location_value\",\"component\":\"Text\",\"text\":\"Drammen Wellness Studio, Laugavegur 42\"},\n",[182,322,324],{"class":184,"line":323},24,[182,325,326],{},"  {\"id\":\"divider_2\",\"component\":\"Divider\"},\n",[182,328,330],{"class":184,"line":329},25,[182,331,332],{},"  {\"id\":\"pricing_col\",\"component\":\"Column\",\"children\":[\"price_subtotal\",\"price_discount\",\"price_total\"]},\n",[182,334,336],{"class":184,"line":335},26,[182,337,338],{},"  {\"id\":\"price_subtotal\",\"component\":\"Row\",\"children\":[\"price_subtotal_label\",\"price_subtotal_value\"]},\n",[182,340,342],{"class":184,"line":341},27,[182,343,344],{},"  {\"id\":\"price_subtotal_label\",\"component\":\"Text\",\"text\":\"Subtotal\",\"variant\":\"muted\"},\n",[182,346,348],{"class":184,"line":347},28,[182,349,350],{},"  {\"id\":\"price_subtotal_value\",\"component\":\"Text\",\"text\":\"12.900 ISK\"},\n",[182,352,354],{"class":184,"line":353},29,[182,355,356],{},"  {\"id\":\"price_discount\",\"component\":\"Row\",\"children\":[\"price_discount_label\",\"price_discount_value\"]},\n",[182,358,360],{"class":184,"line":359},30,[182,361,362],{},"  {\"id\":\"price_discount_label\",\"component\":\"Text\",\"text\":\"First-time discount\",\"variant\":\"muted\"},\n",[182,364,366],{"class":184,"line":365},31,[182,367,368],{},"  {\"id\":\"price_discount_value\",\"component\":\"Text\",\"text\":\"−1.290 ISK\",\"color\":\"green\"},\n",[182,370,372],{"class":184,"line":371},32,[182,373,374],{},"  {\"id\":\"price_total\",\"component\":\"Row\",\"children\":[\"price_total_label\",\"price_total_value\"]},\n",[182,376,378],{"class":184,"line":377},33,[182,379,380],{},"  {\"id\":\"price_total_label\",\"component\":\"Text\",\"text\":\"Total\",\"variant\":\"heading\",\"level\":4},\n",[182,382,384],{"class":184,"line":383},34,[182,385,386],{},"  {\"id\":\"price_total_value\",\"component\":\"Text\",\"text\":\"11.610 ISK\",\"variant\":\"heading\",\"level\":4},\n",[182,388,390],{"class":184,"line":389},35,[182,391,392],{},"  {\"id\":\"divider_3\",\"component\":\"Divider\"},\n",[182,394,396],{"class":184,"line":395},36,[182,397,398],{},"  {\"id\":\"footer_row\",\"component\":\"Row\",\"children\":[\"btn_calendar\",\"btn_done\"]},\n",[182,400,402],{"class":184,"line":401},37,[182,403,404],{},"  {\"id\":\"btn_calendar\",\"component\":\"Button\",\"label\":\"Add to Calendar\",\"variant\":\"outline\",\"icon\":\"i-lucide-calendar-plus\"},\n",[182,406,408],{"class":184,"line":407},38,[182,409,410],{},"  {\"id\":\"btn_done\",\"component\":\"Button\",\"label\":\"Done\",\"variant\":\"primary\"}\n",[182,412,414],{"class":184,"line":413},39,[182,415,416],{},"]}}\n",[165,418,420],{"id":419},"design-rationale","Design Rationale",[422,423,424,440],"table",{},[425,426,427],"thead",{},[428,429,430,434,437],"tr",{},[431,432,433],"th",{},"Pattern",[431,435,436],{},"Why",[431,438,439],{},"A2UI Component",[441,442,443,460,476,488,504],"tbody",{},[428,444,445,449,452],{},[446,447,448],"td",{},"Status header",[446,450,451],{},"Green check icon + confirmation text gives immediate visual feedback",[446,453,454,456,457,459],{},[143,455,47],{}," + ",[143,458,19],{}," (heading)",[428,461,462,465,468],{},[446,463,464],{},"Key-value rows",[446,466,467],{},"Service details in label → value pairs for scanability",[446,469,470,472,473,475],{},[143,471,59],{}," with two ",[143,474,19],{}," children",[428,477,478,481,484],{},[446,479,480],{},"Divider sections",[446,482,483],{},"Visual separation between header, details, pricing, and actions",[446,485,486],{},[143,487,79],{},[428,489,490,493,496],{},[446,491,492],{},"Pricing breakdown",[446,494,495],{},"Subtotal, discount, total — standard receipt pattern",[446,497,498,500,501,503],{},[143,499,63],{}," of ",[143,502,59],{}," pairs",[428,505,506,509,512],{},[446,507,508],{},"Dual CTA",[446,510,511],{},"\"Add to Calendar\" (secondary) + \"Done\" (primary) — common receipt footer",[446,513,514,472,516,475],{},[143,515,59],{},[143,517,23],{},[165,519,521],{"id":520},"try-it","Try It",[127,523,524,525,530],{},"Paste the JSONL above into the ",[526,527,529],"a",{"href":528},"/playground","Playground"," to see it render live.",[165,532,534],{"id":533},"real-world-context","Real-World Context",[127,536,537,538,541],{},"In the ",[131,539,540],{},"AI Agents"," platform, this receipt is generated when:",[543,544,545,553,556,559],"ol",{},[546,547,548,549,552],"li",{},"A customer completes a booking through ",[131,550,551],{},"AI Agent"," (the customer-facing agent)",[546,554,555],{},"AI Agent confirms the slot with the backend and streams the receipt",[546,557,558],{},"The receipt renders progressively — header first, then details, then pricing",[546,560,561],{},"The customer sees each section appear as it streams in, creating a natural \"building\" feel",[127,563,564],{},"The same JSONL payload renders identically whether the client is a Nuxt web app, a Flutter mobile app, or any other A2UI-compatible renderer.",[566,567,568],"style",{},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":178,"searchDepth":185,"depth":191,"links":570},[571,572,573,574],{"id":167,"depth":191,"text":168},{"id":419,"depth":191,"text":420},{"id":520,"depth":191,"text":521},{"id":533,"depth":191,"text":534},"A modal booking confirmation composed from standard A2UI catalog components — the kind of interface Agent generates after a customer completes a booking.","md",null,{"icon":579},"i-lucide-receipt",true,{"title":106,"description":575},"l25BFUcvXKgEQwPRrPaPgSNcDGgSGJ8o862nn5AD-68",[584,586],{"title":99,"path":100,"stem":101,"description":585,"icon":104,"children":-1},"Real-world A2UI composition patterns — how AI agents build complete interfaces from standard catalog components.",{"title":110,"path":111,"stem":112,"description":587,"children":-1},"A slideover panel revealing venue information — demonstrates the Slideover component with nested layout composition.",1771187321369]