A Google Apps Script web app you deploy once, then call with any payload from the catalog. Open source, MIT licensed. You own the URL — no dependency on the demo endpoint.
Three permanent short links, rendered live by MCP Apps on a2uicatalog.ai — the same sandboxed host, the same renderer source the steps below put in your own Apps Script account. Each demo proves a different capability.
A slide playbook over Toulouse-Blagnac: live ADS-B and METAR feeds, an isometric takeoff scene, and a fullscreen airspace command deck with a real-time traffic ticker. Everything arrives as one declarative payload — the aircraft on the radar are actually up there right now.
Proves: playbook slides, data-source atoms, fullscreen breakout — in a plain shareable link.
https://a2uicatalog.ai/s/atc
A padel tournament night as a wired surface: live scoring, rotation schedules, standings that update as you tap — state stores, actions, and sessions, still expressed as one declarative payload. Open it on two phones with the same link and score together.
Proves: the wired dialect — real interactivity without the agent writing a line of imperative code.
https://a2uicatalog.ai/s/americano
A five-module curriculum on A2UI and the Model Context Protocol: the payload contract, atoms and the graduation pipeline, the ?p= URL model, MCP fundamentals, and MCP Apps' sandboxed handshake. Flashcards, knowledge checks, and worked examples throughout.
Proves: module_map pagination — five module cards, each its own permanently-published page, so depth is unbounded while every link stays shareable. Module 3 explains why: the same atom builds sub-pages differently depending on whether it's rendering on Apps Script or here, in the browser.
https://a2uicatalog.ai/s/learn-a2ui
Prerequisites: Node.js 18+ (for npm, used to install clasp in step 2) and a Google account.
The renderer lives in apps-script-surface/gas-wired-renderer/ — 501 atoms, no CDN, no external dependencies.
# Clone and navigate to the renderer directory
git clone https://github.com/a2uicatalog/a2ui
cd a2ui/apps-script-surface/gas-wired-renderer
clasp is Google's Apps Script CLI. One-time login — uses your Google account to deploy the renderer as a GAS web app.
npm install -g @google/clasp clasp login
Creates a new GAS project in your Google account and pushes all renderer files. Takes about 30 seconds.
clasp create --type webapp --title "My A2UI Renderer" clasp push
Deploy as a web app accessible to anyone. You'll get a URL — that's your renderer endpoint.
clasp deploy --description "A2UI Renderer v1"
# → https://script.google.com/macros/s/YOUR_ID/exec
Runs in your Google account. No dependency on the catalog's demo URL. Survives any catalog changes.
Stat cards, charts, globes, animations, tables, forms — all render immediately. A handful of data-source atoms want their own API key (see below) and degrade gracefully without one.
Fork the renderer, add your own atoms, change the CSS, restrict to specific surfaces. It's your code.
Pull the latest from the repo and clasp push again when new atoms are added to the catalog.
Once deployed, use your renderer URL with any payload from the catalog.
// In any GAS project — call your renderer with atom blocks
function doGet() {
const blocks = [
{ type: "stat_card", value: "1,234", label: "Daily users", delta: "+12%", is_up: true },
{ type: "progress_bar", value: 75, label: "Q2 target" },
{ type: "globe_3d", theme: "earth", size: 300 }
];
const payload = Utilities.base64EncodeWebSafe(
Utilities.newBlob(JSON.stringify(blocks)).getBytes()
);
const url = "https://script.google.com/macros/s/YOUR_ID/exec?p=" + payload;
return HtmlService.createHtmlOutput(
'<script>window.location="' + url + '"</script>'
);
}
T212_API_KEY, T212_API_SECRET), Twelve Data (TWELVE_API_KEY) and Vertex AI (VERTEX_PROJECT_ID) each back one data-source atom. Set them under Project Settings → Script Properties in your Apps Script editor if you use those atoms; every other atom works with none set, and these three fail gracefully (return an explicit error, not a broken page) without their key.