Elements

56 / 59 · Generative

Response time

A single-series line chart with axis ticks.

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",
  "title": "Response time (p50)",
  "children": [
    {
      "$type": "Chart",
      "$key": "chart",
      "variant": "line",
      "showAxis": true,
      "data": [
        {
          "label": "12a",
          "value": 120
        },
        {
          "label": "4a",
          "value": 98
        },
        {
          "label": "8a",
          "value": 210
        },
        {
          "label": "12p",
          "value": 340
        },
        {
          "label": "4p",
          "value": 280
        },
        {
          "label": "8p",
          "value": 190
        }
      ]
    }
  ]
}

Component vocabulary →