This section contains sample of Agent response that contains A2UI. Please note that A2UI is only a part of the whole JSON response. Therefore, Agent and UI must agree on the JSON structure.
The JSON structure in this page uses AIP standard. If you use other standard, please adjust accordingly.
Sample Agent Response
Modify the agent implementation to return the response in this JSON format (streaming is optional):
The above JSON will make the UI render the following component:
The above JSON will make the UI render the following component:
Sample Agent Response with Delete Surface
The following is JSON that will display 2 separate surface:
The following is JSON that will delete existing rendered surface:
See the component screenshot and compare it with the JSON to get the idea on how to construct A2UI-compliant JSON.
Handle User Interaction
Every time user interact with action component (e.g. clicks a button), agent receives a userAction payload from client and should act accordingly. Therefore, agent needs to implement a handler that receives and processes the userAction .
userAction object has the following structure (ref):
Event Flow Example:
Let's use our HITL message above as an example. For simplicity, we'll focus on a single button component.
When user clicks the button, agent will receive:
The agent's handler receives and process the userAction and responds accordingly. If the UI needs to change, agent sends new surfaceUpdate and/or dataModelUpdate messages over the existing SSE stream.
interface UserActionRequest {
name: string; //The name of the action, taken directly from the `action.name` property of the component
surfaceId: string; //The id of the surface where the event originated
sourceComponentId: string; //The id of the component that triggered the event
timestamp: string; //An ISO 8601 timestamp of when the event occurred
context: Record<string, unknown>; //A JSON object containing the key-value pairs from the component's `action.context`, after resolving all values
}
