Lens Grid

Grid of selectable cards for a config question with a small fixed set of options, each worth a short explanation — unlike a dropdown, which hides the explanation until opened. Not driven by the standard onClick wire (there is no event carrying "which card"); pass target (a ValueStore id) and the card's own click updates it directly, mirroring theme_toggle's persist_to pattern.

Surfaces

google-apps-script-webmcp-apps

Degraded on

Surface	Note
email	Renders as a plain list, no selection state or click affordance.

Fields

Field	Type
target	string (required). A ValueStore primitive's id, set to a card's value on click.	required
options	array of {value, label, caption?, selected?} (required).	required
columns	number (optional, default 2).	optional
gap	number (optional, px, default 10).	optional
selected	string. Current value, for which card renders highlighted on first paint — a repaint must pass the reader's last choice back in here or it resets, same rule as theme_toggle's initial.	optional

Example payload

{
  "type": "lens_grid",
  "target": "end-node",
  "options": [
    {
      "label": "Option A",
      "value": "a"
    },
    {
      "label": "Option B",
      "value": "b"
    },
    {
      "label": "Option C",
      "value": "c"
    }
  ]
}

ARD catalog entry

{
  "identifier": "urn:air:a2uicatalog.ai:atom:lens_grid",
  "displayName": "Lens Grid",
  "type": "application/vnd.a2ui.atom+json",
  "url": "https://a2uicatalog.ai/atoms/lens_grid",
  "capabilities": [
    "google-apps-script-web",
    "mcp-apps"
  ],
  "description": "Grid of selectable cards for a config question with a small fixed set of options, each worth a short explanation \u2014 unlike a dropdown, which hides the explanation until opened. Not driven by the standard onClick wire (there is no event carrying \"which card\"); pass target (a ValueStore id) and the card's own click updates it directly, mirroring theme_toggle's persist_to pattern.",
  "representativeQueries": [
    "show a selectable card grid for a small, explained set of options",
    "grid of selectable cards for a config question with a small fixed set of options, each worth a short",
    "render a lens grid"
  ]
}

← 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 →