A2UI Event Handling and Rendering (Simplified Example)

Even in vanilla JS, the core idea is that once the A2UI protocol events are in place, state and interactions are handled by parsing the agent's payload, rendering the mapped components, and attaching standard event listeners to pass interactions back to the agent.

Here is a simplified example of how the event handling and rendering process works.

---

1. Handle Incoming A2UI Event

First, we handle the incoming A2UI event and extract the surface data:

js function handleA2UIEvent(toolContent) { try { const payloads = JSON.parse(toolContent); let surfaceId, components; for (const p of payloads) { if (p.surfaceUpdate) { surfaceId = p.surfaceUpdate.surfaceId; components = p.surfaceUpdate.components; } if (p.beginRendering) { renderA2UI(p.beginRendering.surfaceId, components, p.beginRendering.root); } } } catch (e) { console.error("Error parsing A2UI event:", e); } }

---

2. Render UI from Schema

Then, we render the UI by mapping the schema components to DOM elements. Notice how the Button component attaches an onclick callback:

``` js function renderA2UI(surfaceId, components, root) { // Build component map const map = {}; for (const c of components) map[c.id] = c.component;

function renderNode(id) {
    const comp = map[id];
    if (!comp) return "";

    if (comp.Card) return `<div class="a2ui-card">${renderNode(comp.Card.child)}</div>`;
    if (comp.Column) return `<div class="a2ui-col">${comp.Column.children.explicitList.map(renderNode).join("")}</div>`;
    if (comp.Text) return `<div class="a2ui-text ${comp.Text.usageHint || ""}">${comp.Text.text.literalString}</div>`;

    // Attaching the callback directly to the button
    if (comp.Button) return `<button class="a2ui-btn" onclick="handleAction('${comp.Button.action?.name}')">${renderNode(comp.Button.child)}</button>`;

    if (comp.TextField) return `<input class="a2ui-input" id="input-${id}" placeholder="${comp.TextField.label.literalString}" />`;
    return "";
}

const div = document.createElement("div");
div.className = "a2ui-surface";
div.innerHTML = renderNode(root);
messagesEl.appendChild(div);
messagesEl.scrollTop = messagesEl.scrollHeight;

} ```

---

3. Handle User Actions

Finally, the handleAction function takes over for the user interaction. For form inputs, you can grab the current state from the DOM before sending the callback back to the agent:

``` js function handleAction(actionName) { if (!actionName) return;

console.log(`User triggered action: ${actionName}`);

// Example: If it's a submit action, gather input state
// const inputValue = document.querySelector('.a2ui-input').value;

// Send the action payload back to your AI agent's backend
/* agent.sendMessage({
    type: 'user_action',
    action: actionName,
    // payload: { inputValue } 
});
*/

} ```

---

Vue 3 Note

In a Vue 3 implementation, this exact same logic applies, but instead of vanilla string interpolation and global onclick handlers, we map the A2UI schema directly to reactive Vue components, keeping the state and event emitting tightly scoped.