Experience points or gamification progress bar showing current XP, level label, and XP needed to reach the next level. The fill animates from the previous value to the current value on render via CSS transition. A level-up flash overlay triggers when xp_current equals or exceeds xp_next.
| Surface | Note |
|---|---|
| Renders as a static labelled progress bar — no animation or level-up effect |
| Field | Type | |
|---|---|---|
| level_label | string. Current level name e.g. "Level 3 — Intermediate". | required |
| xp_current | integer. Current XP within the current level. | required |
| xp_next | integer. XP required to reach the next level. | required |
| accent | string. Bar fill colour. Default "#6366f1". | optional |
| show_flash | boolean (optional, default true). Trigger level-up flash when xp_current >= xp_next. | optional |
{
"type": "xp_bar",
"level_label": 75,
"xp_current": 2,
"xp_next": 75
}{
"identifier": "urn:air:a2uicatalog.ai:atom:xp_bar",
"displayName": "Xp Bar",
"type": "application/vnd.a2ui.atom+json",
"url": "https://a2uicatalog.ai/atoms/xp_bar",
"capabilities": [
"web",
"google-meet-stage",
"google-apps-script-web",
"mcp-apps"
],
"description": "Experience points or gamification progress bar showing current XP, level label, and XP needed to reach the next level. The fill animates from the previous value to the current value on render via CSS transition. A level-up flash overlay triggers when xp_current equals or exceeds xp_next.",
"representativeQueries": [
"show a animated XP/points progress bar with level label and level-up flash",
"experience points or gamification progress bar showing current xp, level label, and xp needed to rea",
"render a xp bar"
]
}The renderer is an open-source Google Apps Script web app. 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 a2ui/apps-script-surface/gas-wired-renderer
clasp push && clasp deploy