Vertical step sequence where completed steps show an animated SVG checkmark draw, the active step pulses with a sonar-style glow ring, and pending steps are muted. State is driven by active_index — a single integer the agent increments as each step completes. No JavaScript required.
| Surface | Note |
|---|---|
| googlechat | Renders as a plain text list with emoji status markers; no connectors or animation. |
| Renders as a simple ordered list; no visual states. | |
| Renders as a static ordered list at the active_index state; no animation. |
| Field | Type | |
|---|---|---|
| steps | list of strings or {label, description} objects. Each step in the sequence. | required |
| active_index | integer (optional, default 0). Index of the currently executing step. Steps before it are completed; steps after are pending. | optional |
| color | string. Accent colour for completed/active states. Default "#38bdf8". | optional |
| label | string. Heading above the step list. | optional |
{
"type": "stepper",
"steps": [
{
"title": "Step one",
"body": "First thing to do."
},
{
"title": "Step two",
"body": "Then this."
}
]
}{
"identifier": "urn:air:a2uicatalog.ai:atom:stepper",
"displayName": "Stepper",
"type": "application/vnd.a2ui.atom+json",
"url": "https://a2uicatalog.ai/atoms/stepper",
"capabilities": [
"web",
"meet-stage",
"gas-sidebar",
"apps-script-web"
],
"description": "Vertical step sequence where completed steps show an animated SVG checkmark draw, the active step pulses with a sonar-style glow ring, and pending steps are muted. State is driven by active_index \u2014 a single integer the agent increments as each step completes. No JavaScript required.",
"representativeQueries": [
"show a CSS animated vertical step sequence with checkmark draw and active pulse",
"vertical step sequence where completed steps show an animated svg checkmark draw, the active step pu",
"render a stepper"
]
}The renderer is open source. Deploy your own instance in 4 commands — you own the URL, no dependency on the demo endpoint.
git clone https://github.com/a2uicatalog/a2ui
cd apps-script-surface/gas-schema-renderer
clasp push && clasp deploy