Software purchase

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

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

{
  "$type": "Card",
  "title": "Purchase Pro plan",
  "asForm": true,
  "confirm": {
    "label": "Confirm",
    "$action": {
      "type": "confirm_purchase"
    }
  },
  "cancel": {
    "label": "Discard"
  },
  "children": [
    {
      "$type": "Input",
      "$key": "purpose",
      "name": "purpose",
      "label": "What is it for?",
      "placeholder": "e.g. Engineering team"
    },
    {
      "$type": "Row",
      "$key": "dates",
      "gap": 3,
      "children": [
        {
          "$type": "DatePicker",
          "$key": "start",
          "name": "startDate",
          "label": "Start date"
        },
        {
          "$type": "DatePicker",
          "$key": "end",
          "name": "endDate",
          "label": "Renewal date"
        }
      ]
    },
    {
      "$type": "Row",
      "$key": "selects",
      "gap": 3,
      "children": [
        {
          "$type": "Select",
          "$key": "seats",
          "name": "seats",
          "label": "Volume",
          "placeholder": "Seats",
          "options": [
            {
              "label": "5 seats",
              "value": "5"
            },
            {
              "label": "10 seats",
              "value": "10"
            },
            {
              "label": "25 seats",
              "value": "25"
            },
            {
              "label": "50 seats",
              "value": "50"
            }
          ]
        },
        {
          "$type": "Select",
          "$key": "frequency",
          "name": "frequency",
          "label": "Frequency",
          "placeholder": "Billing",
          "options": [
            {
              "label": "Monthly",
              "value": "monthly"
            },
            {
              "label": "Annual",
              "value": "annual"
            }
          ]
        }
      ]
    },
    {
      "$type": "Divider",
      "$key": "divider"
    },
    {
      "$type": "Fact",
      "$key": "total",
      "label": "Total amount",
      "value": "$125 per month"
    }
  ]
}