Riverside Loft

import { renderGenerativeUI } from "@assistant-ui/react-generative-ui";

<div data-aui-theme="elements">
  {renderGenerativeUI(spec, library, { status: "done" })}
</div>

{
  "$type": "Card",
  "title": "Riverside Loft",
  "children": [
    {
      "$type": "Image",
      "$key": "image",
      "src": "https://images.unsplash.com/photo-1522708323590-d24dbb6b0267?w=640&q=80",
      "alt": "Cozy loft interior with an open kitchen and a red armchair"
    },
    {
      "$type": "Row",
      "$key": "meta",
      "justify": "between",
      "align": "center",
      "children": [
        {
          "$type": "Caption",
          "$key": "details",
          "value": "Alfama · 2 guests · 1 bed"
        },
        {
          "$type": "Badge",
          "$key": "rating",
          "value": "4.9",
          "variant": "success"
        }
      ]
    },
    {
      "$type": "Button",
      "$key": "book",
      "label": "Book for $142/night",
      "buttonStyle": "primary",
      "block": true,
      "$action": {
        "type": "book_stay",
        "stayId": "riverside-loft"
      }
    }
  ]
}