A layered-depth concept explainer — an opening hook line, a hero "mental model" card carrying the one-line analogy, then depth rungs down a connected rail, each rung one level deeper into the concept, terminating in a worked-example rung. Shares article_journey's warm palette token system (paper/ink/accent/mono-* etc. via the palette field) and IBM Plex fonts so the article atoms read as one design system. renderers/web_article.py is the reference implementation; apps-script-surface/gas-wired-renderer/atoms_concept.gs is the port that carries it to every other surface (GAS ?p= URLs, the MCP Apps bundle and the Worker's /api/render all compile from the .gs sources), verified at parity against the reference.
| Surface | Note |
|---|---|
| mcp-apps | IBM Plex is @font-face'd from a2uicatalog.ai, but the MCP Apps bundle is CSP-clean (resourceDomains []) and /api/render sends no font-src — the faces are blocked and the Georgia/system-mono fallback stack renders instead. Layout, palette and rail are unaffected; only the typeface changes. Pass use_plex_fonts false to opt out explicitly. |
| Field | Type | |
|---|---|---|
| title | string. Main heading. | optional |
| eyebrow | string. Small uppercase label above the title. | optional |
| dek | string. Italic one-line subtitle under the title. | optional |
| source | object — {title, url, author?, publication?, published?, read_minutes?, label? (default "Analysis of"), steered_by?}. Set this whenever the ladder explains SOMEONE ELSE'S work: it renders an attribution bar ABOVE the eyebrow and headline, with the source title as a real link, so the artifact reads at first glance as a piece ABOUT that piece rather than a standalone article that could be mistaken for — or stand in for — the original. Provenance is structural here, not a phrasing convention: a derivative reading that hides its source is the copyright-and-honesty failure this field exists to make impossible. Omit for original work. `steered_by` (string or array of strings, optional) records what the reader asked this reading to look for, rendered under a READING STEERED BY rule inside the same bar — a steered reading is a different object from a neutral one, and which one you are looking at should never have to be inferred. Backtick spans render as inline code. | optional |
| hook | string. The opening grabber — rendered as a large accent-barred paragraph before the model card. Backtick spans render as inline code. | optional |
| model | string. The one-line mental-model analogy ("think of it as...") — rendered as a hero card labelled THE MODEL. Backtick spans render as inline code. | optional |
| model_note | string. One short elaboration line under the analogy inside the model card. | optional |
| rungs | array (required). Each item is a concept_rung atom object (see that type) — also independently addressable by ComponentId when emitted in the A2UI v1.0 ChildList wire format, so a live agent can deepen or patch one level without resending the whole surface. | required |
| closing_note | string. Italic closing line under the rungs. Backtick spans render as inline code. | optional |
| theme | string. 'light' (default) or 'dark' — selects the base palette before any per-token overrides. | optional |
| palette | object. Same token set as article_journey: paper, paper_raised, ink, ink_soft, line, accent, accent_soft, blocked, blocked_soft, cleared, cleared_soft, mono_bg, mono_fg, mono_accent — each a CSS colour string. Unset tokens keep the theme default. | optional |
| use_plex_fonts | boolean (optional, default true). Loads IBM Plex Mono and IBM Plex Serif via same-origin @font-face — see THIRD-PARTY-NOTICES.md. Set false for system font stacks only. | optional |
{
"type": "concept_ladder",
"rungs": []
}{
"identifier": "urn:air:a2uicatalog.ai:atom:concept_ladder",
"displayName": "Concept Ladder",
"type": "application/vnd.a2ui.atom+json",
"url": "https://a2uicatalog.ai/atoms/concept_ladder",
"capabilities": [
"web",
"google-apps-script-web",
"mcp-apps"
],
"description": "A layered-depth concept explainer \u2014 an opening hook line, a hero \"mental model\" card carrying the one-line analogy, then depth rungs down a connected rail, each rung one level deeper into the concept, terminating in a worked-example rung. Shares article_journey's warm palette token system (paper/ink/accent/mono-* etc. via the palette field) and IBM Plex fonts so the article atoms read as one design system. renderers/web_article.py is the reference implementation; apps-script-surface/gas-wired-renderer/atoms_concept.gs is the port that carries it to every other surface (GAS ?p= URLs, the MCP Apps bundle and the Worker's /api/render all compile from the .gs sources), verified at parity against the reference.",
"representativeQueries": [
"show a layered-depth concept explainer \u2014 hook, mental-model card, depth rungs, worked example",
"a layered-depth concept explainer \u2014 an opening hook line, a hero \"mental model\" card carrying the on",
"render a concept ladder"
]
}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