Elements

45 / 59 · Generative

Current weather

A glanceable weather card with a large temperature reading and conditions.

Installation

npm install @assistant-ui/react-generative-ui

Usage

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

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

Spec

Data
{
  "$type": "Card",
  "children": [
    {
      "$type": "Row",
      "$key": "header",
      "justify": "between",
      "align": "center",
      "children": [
        {
          "$type": "Text",
          "$key": "city",
          "value": "Austin, TX",
          "color": "secondary"
        },
        {
          "$type": "Icon",
          "$key": "icon",
          "name": "sun",
          "size": "lg"
        }
      ]
    },
    {
      "$type": "Text",
      "$key": "temp",
      "value": "94°F",
      "size": "3xl",
      "weight": "bold"
    },
    {
      "$type": "Text",
      "$key": "description",
      "value": "Sunny, feels like 98°F",
      "color": "secondary"
    }
  ]
}

Component vocabulary →