Elements

50 / 59 · Generative

Channel message

A chat message card with a channel/timestamp row, an author row with a round avatar, and a Markdown body.

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

Content
{
  "$type": "Card",
  "children": [
    {
      "$type": "Row",
      "$key": "meta",
      "justify": "between",
      "children": [
        {
          "$type": "Caption",
          "$key": "channel",
          "value": "#product-updates"
        },
        {
          "$type": "Caption",
          "$key": "timestamp",
          "value": "Today at 2:14 PM"
        }
      ]
    },
    {
      "$type": "Row",
      "$key": "author-row",
      "align": "center",
      "children": [
        {
          "$type": "Image",
          "$key": "avatar",
          "src": "https://i.pravatar.cc/150?img=12",
          "alt": "Jordan Lee",
          "size": "sm",
          "round": true
        },
        {
          "$type": "Text",
          "$key": "author",
          "value": "Jordan Lee",
          "weight": "semibold"
        }
      ]
    },
    {
      "$type": "Markdown",
      "$key": "body",
      "value": "Shipping three things this week:\n\n1. **Faster search** across the whole workspace\n2. **Dark mode** for the mobile app\n3. A refreshed **onboarding flow**\n\nLet us know what you think!"
    }
  ]
}

Component vocabulary →