Module Map

Visual curriculum grid showing all modules in a course. Each card displays module icon, title, description, duration, and a live status badge (locked/Start/Done) driven by progress_store. Locked modules are greyed out. Completed modules turn green. Cards navigate to module url on click.

Surfaces

google-apps-script-webwebgoogle-meet-stagemcp-apps ⚠

Degraded on

Surface	Note
mcp-apps	renders fully but without persistence — progress and live data need an Apps Script deployment

Live preview

Course map

Templates (2 componentIds in modules)

Fields

Field	Type
title	string. Section heading. Default "Course Modules".	optional
columns	integer. Grid columns, max 4. Default 3.	optional
modules	array (required). Array of module objects. Each module supports: id (string, required), title, description, icon, duration, lessons, required[] (array of module ids that must be complete to unlock), and either: page (array of atom blocks, PREFERRED — auto-encoded into a self-contained URL at render time, no separate save needed) or url (string — only for external URLs or pre-saved nav pages). Always use page for inline module content.	required

Example payload

{
  "type": "module_map",
  "modules": 1
}

ARD catalog entry

{
  "identifier": "urn:air:a2uicatalog.ai:atom:module_map",
  "displayName": "Module Map",
  "type": "application/vnd.a2ui.atom+json",
  "url": "https://a2uicatalog.ai/atoms/module_map",
  "capabilities": [
    "google-apps-script-web",
    "web",
    "google-meet-stage",
    "mcp-apps"
  ],
  "description": "Visual curriculum grid showing all modules in a course. Each card displays module icon, title, description, duration, and a live status badge (locked/Start/Done) driven by progress_store. Locked modules are greyed out. Completed modules turn green. Cards navigate to module url on click.",
  "representativeQueries": [
    "show a course curriculum grid \u2014 module cards with live locked/available/complete status from progress_store",
    "visual curriculum grid showing all modules in a course. each card displays module icon, title, descr",
    "render a module map"
  ]
}

← Full ARD catalog

Deploy your own Google Apps Script renderer

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

Full deploy guide →