GenUI component library

Surface node types a human_gate node's genuiCheckpointSurfaceJson config can render while a run is paused for approval.

Example · dashboard strip

Card + horizontal Stack of Buttons — common pattern for toolbars.

Structured surfaces a human_gate checkpoint can present while a run is paused.

Status

{
  "root": {
    "type": "Stack",
    "props": {
      "direction": "col",
      "gap": 20
    },
    "children": [
      {
        "type": "Text",
        "props": {
          "content": "Structured surfaces a human_gate checkpoint can present while a run is paused."
        }
      },
      {
        "type": "Card",
        "props": {
          "title": "Status"
        },
        "children": [
          {
            "type": "Stack",
            "props": {
              "direction": "row",
              "gap": 8
            },
            "children": [
              {
                "type": "Button",
                "id": "refresh",
                "props": {
                  "label": "Refresh",
                  "actionId": "reload_metrics"
                }
              },
              {
                "type": "Button",
                "id": "export",
                "props": {
                  "label": "Export"
                }
              }
            ]
          }
        ]
      }
    ]
  }
}

Example · form column

Text, FormField nodes, and a closing action.

Quick capture

TitleAmount

{
  "root": {
    "type": "Stack",
    "props": {
      "direction": "col",
      "gap": 16
    },
    "children": [
      {
        "type": "Text",
        "props": {
          "content": "Quick capture"
        }
      },
      {
        "type": "FormField",
        "id": "title",
        "props": {
          "label": "Title",
          "inputType": "text"
        }
      },
      {
        "type": "FormField",
        "id": "amount",
        "props": {
          "label": "Amount",
          "inputType": "number"
        }
      },
      {
        "type": "Button",
        "id": "save",
        "props": {
          "label": "Save draft",
          "actionId": "save_draft"
        }
      }
    ]
  }
}

Type reference

Matches GenuiNode in apps/studio/lib/genui.ts.

Stack
Layout container; composes children vertically or horizontally.
- props.gap?
- props.direction? col | row
- children[]
Text
Static copy block for labels, descriptions, or lightweight prose.
- props.content
Button
Primary affordance; actionId maps to a client handler name (dispatch is currently inert).
- id
- props.label
- props.actionId?
Card
Grouped panel with an optional title and nested GenUI children.
- props.title?
- children?[]
FormField
Label + input shell for structured data collection UIs.
- id
- props.label
- props.inputType? text | number

Using GenUI in a graph

Set a human_gate node's genuiCheckpointSurfaceJson config field to { "root": <GenuiNode> } — it renders here and in the node inspector once the run reaches that checkpoint. Action dispatch stays inert for now, matching MUI's original behavior.

GenUI component library

Command Palette