Learning outcome
Send native interactions back to the agent without inventing side effects.
A checkbox toggle updates a bound value locally. It does not call Gemini immediately. A Button dispatches an A2UI event with name, originating surface/component IDs and context. The ViewModel resolves context.eventId against the fetched events before deciding whether to make another agent request or perform a local action.
Checkbox binding and button actions return context to Gemini.
Illustrative generated Button component
{
"id":"update-plan","component":"Button","child":"update-label",
"action":{"event":{"name":"refine","context":{"eventId":"published-event-id"}}}
}
A Text component named update-label must exist separately. venue, prepare and refine build agent requests carrying the action, history, prior components and current data snapshots. website and directions open the HTTPS URL from the known listing; they do not use an arbitrary URL supplied by Gemini. save only updates an in-memory set and tells the user registration is separate.
State carry-over in protocol.mjs
const prior = new Map(previousChecklist.map(c => [c.label, c.checked]));
const value = {};
for (const c of reply.components) {
if (c.component === 'CheckBox') {
value[c.value.path.slice(1)] = prior.get(c.label) === true;
}
}
On refine, the server uses the originating surface ID to find earlier components and values. It matches exact labels so a reordered item can use a new binding path without losing its checked value. New or changed labels start false. This is sample-specific state migration, not automatic A2UI persistence. If the originating tree has fallen outside the last-three-tree context window, carry-over is unavailable.
createSurface enables sendDataModel. The ViewModel also explicitly snapshots A2uiCoreSurfaceModel.dataModel at the root path for outgoing requests, including text follow-ups. That cast ties this sample to the pinned engine API. A checked registration item means the user marked it complete; it is not a verified ticket, payment or backend transaction.
Practice and checkpoint
Check one item, press Update my plan and inspect the new surface: both progress text and the checkbox must reflect completion. Reorder a fixture checklist with the same labels and verify preservation. Rename the label and predict false. Explain why stable domain item IDs would be a stronger production identity than label matching.
Source and next steps
- Pinned implementation — The exact app and server revision used by this lesson.
Back to roadmap · Practice this unit in the codelab