You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/concepts/actions.md
+33-33Lines changed: 33 additions & 33 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,17 +1,17 @@
1
-
# A2UI Client-to-Server Actions
1
+
# A2UI Renderer-to-Agent Actions
2
2
3
-
Interactivity in A2UI relies on a bidirectional communication loop. While the Agent drives the UI by streaming component and data updates, the Client communicates user intent back to the Agent through **Actions** and **Data Model Synchronization**.
3
+
Interactivity in A2UI relies on a bidirectional communication loop. While the Agent drives the UI by streaming component and data updates, the Renderer communicates user intent back to the Agent through **Actions** and **Data Model Synchronization**.
4
4
5
5
## Action Architecture
6
6
7
7
Actions allow UI components to trigger behavior. They are defined in the `Action` schema in [`common_types.json`](../specification/v0_9/json/common_types.json) and come in two flavors:
8
8
9
-
1.**Server Events**: Dispatched to the Agent for processing (e.g., clicking "Submit").
10
-
2.**Local Function Calls**: Executed entirely on the client (e.g., opening a URL).
9
+
1.**Agent Events**: Dispatched to the Agent for processing (e.g., clicking "Submit").
10
+
2.**Local Function Calls**: Executed entirely on the renderer (e.g., opening a URL).
11
11
12
12
### Action Wiring in Schema
13
13
14
-
Components like `Button` expose an `action` property. Here is how a server event is wired:
14
+
Components like `Button` expose an `action` property. Here is how an agent event is wired:
15
15
16
16
```json
17
17
{
@@ -36,9 +36,9 @@ Components like `Button` expose an `action` property. Here is how a server event
36
36
> [!NOTE]
37
37
> **Context vs. Data Model**: While the Data Model represents the entire state tree of a surface, the `context` in an action is effectively a hand-picked **"view"** or subset of that state. This simplifies the Agent's job by providing exactly the values needed for a specific event, without requiring the Agent to navigate a potentially large and complex data model.
38
38
39
-
### Local Actions vs. Server Events
39
+
### Local Actions vs. Agent Events
40
40
41
-
While Server Events are the primary way to interact with an agent, **Local Actions** allow for immediate client-side behavior without a network round-trip. This is essential for responsive UI patterns.
41
+
While Agent Events are the primary way to interact with an agent, **Local Actions** allow for immediate renderer-side behavior without a network round-trip. This is essential for responsive UI patterns.
42
42
43
43
```json
44
44
{
@@ -56,14 +56,14 @@ While Server Events are the primary way to interact with an agent, **Local Actio
56
56
57
57
Common uses for Local Actions include:
58
58
59
-
-**Validation**: Validating inputs for a form before submitting it to the server.
59
+
-**Validation**: Validating inputs for a form before submitting it to the agent.
60
60
-**Formatting**: Using `formatString` to format a local display value.
61
61
62
62
### Basic Catalog Action Validation (Checks)
63
63
64
-
The basic catalog defines a limited set of checks that can be performed on the client. Interactive components can define a list of `checks` (using the `Checkable` schema in [`common_types.json`](../specification/v0_9/json/common_types.json)). For a `Button`, if any check fails, the button is **automatically disabled** on the client.
64
+
The basic catalog defines a limited set of checks that can be performed on the renderer. Interactive components can define a list of `checks` (using the `Checkable` schema in [`common_types.json`](../specification/v0_9/json/common_types.json)). For a `Button`, if any check fails, the button is **automatically disabled** on the renderer.
65
65
66
-
-**UX Focus**: Action checks are designed to manage **UI State (User Experience)** by preventing invalid interactions before they happen. They are not a replacement for **Data Integrity** checks, which must still be performed on the server.
66
+
-**UX Focus**: Action checks are designed to manage **UI State (User Experience)** by preventing invalid interactions before they happen. They are not a replacement for **Data Integrity** checks, which must still be performed on the agent.
67
67
68
68
This allows the UI to enforce requirements (like a non-empty field) before the user even tries to submit.
69
69
@@ -87,12 +87,12 @@ This allows the UI to enforce requirements (like a non-empty field) before the u
87
87
88
88
## Local State Updates & The "Write" Contract
89
89
90
-
Before an action is even dispatched, the client is already managing the state of the UI locally. A2UI defines a **Read/Write Contract** for all input components (like `TextField`, `CheckBox`, or `Slider`).
90
+
Before an action is even dispatched, the renderer is already managing the state of the UI locally. A2UI defines a **Read/Write Contract** for all input components (like `TextField`, `CheckBox`, or `Slider`).
91
91
92
92
1.**Read (Model → View)**: When a component renders, it pulls its value from the bound `path` in the Data Model.
93
-
2.**Write (View → Model)**: As soon as a user interacts (e.g., typing a character or clicking a checkbox), the client**immediately** writes the new value into the local Data Model.
93
+
2.**Write (View → Model)**: As soon as a user interacts (e.g., typing a character or clicking a checkbox), the renderer**immediately** writes the new value into the local Data Model.
94
94
95
-
This means the local model is **always** the source of truth for the UI's current state. This "View-to-Model" synchronization happens purely on the client. Only when a User Action (like a Button click) is triggered is this state synchronized back to the server.
95
+
This means the local model is **always** the source of truth for the UI's current state. This "View-to-Model" synchronization happens purely on the renderer. Only when a User Action (like a Button click) is triggered is this state synchronized back to the agent.
96
96
97
97
> [!IMPORTANT]
98
98
> **Synchronous Updates**: Local model updates are **synchronous**. This guarantees that the Data Model is fully updated before any Action resolves its `context` paths or a `DataModelSync` payload is packaged. There are no race conditions between typing and clicking; the "Write" is always committed first.
@@ -105,19 +105,19 @@ This separation allows for a robust form submission pattern:
105
105
106
106
-**Binding**: A `TextField` is bound to `/reservationTime`.
107
107
-**Interaction**: The user types "7:00 PM". The local model at `/reservationTime` is updated instantly.
108
-
-**Submission**: The user clicks a "Book" button. The button's action resolves the `path: "/reservationTime"` from the local model and sends the current value to the server.
108
+
-**Submission**: The user clicks a "Book" button. The button's action resolves the `path: "/reservationTime"` from the local model and sends the current value to the agent.
109
109
110
110
## User Interaction Flow
111
111
112
112
When a user interacts with a component (e.g., clicks a button):
113
113
114
-
1.**Resolve**: The client resolves all `path` references in the `context` against the local **Data Model**.
115
-
2.**Construct**: The client builds an `action` payload conforming to [`client_to_server.json`](../specification/v0_9/json/client_to_server.json).
114
+
1.**Resolve**: The renderer resolves all `path` references in the `context` against the local **Data Model**.
115
+
2.**Construct**: The renderer builds an `action` payload conforming to [`client_to_server.json`](../specification/v0_9/json/client_to_server.json).
116
116
3.**Dispatch**: The payload is sent via the chosen transport (e.g., A2A, WebSockets).
117
117
118
118
### Example: The Action Payload (v0.9)
119
119
120
-
If a user clicks the button above with a data model containing `{"reservationTime": "7:00 PM", "partySize": 4}`, the client sends a message using the `action` key:
120
+
If a user clicks the button above with a data model containing `{"reservationTime": "7:00 PM", "partySize": 4}`, the renderer sends a message using the `action` key:
121
121
122
122
```json
123
123
{
@@ -153,13 +153,13 @@ if action_name == "submit_reservation":
153
153
response =await llm.generate(query)
154
154
```
155
155
156
-
## Client-to-Server Error Reporting
156
+
## Renderer-to-Agent Error Reporting
157
157
158
-
In addition to user actions, the client can report system-level errors back to the server using the `error` payload defined in [`client_to_server.json`](../specification/v0_9/json/client_to_server.json).
158
+
In addition to user actions, the renderer can report system-level errors back to the agent using the `error` payload defined in [`client_to_server.json`](../specification/v0_9/json/client_to_server.json).
159
159
160
160
### Validation Failures
161
161
162
-
If the agent sends A2UI JSON that violates the catalog schema or protocol rules, the client sends a `VALIDATION_FAILED` error. This is a critical feedback loop for agentic systems:
162
+
If the agent sends A2UI JSON that violates the catalog schema or protocol rules, the renderer sends a `VALIDATION_FAILED` error. This is a critical feedback loop for agentic systems:
163
163
164
164
```json
165
165
{
@@ -177,11 +177,11 @@ The agent can catch this error, apologize (or self-correct internally), and re-s
177
177
178
178
## Data Model Sync (v0.9)
179
179
180
-
In A2UI v0.9, we introduced a powerful "stateless" synchronization feature. This allows the client to automatically include the **entire data model** of a surface in the metadata of every message it sends to the server.
180
+
In A2UI v0.9, we introduced a powerful "stateless" synchronization feature. This allows the renderer to automatically include the **entire data model** of a surface in the metadata of every message it sends to the agent.
181
181
182
182
### Enabling Sync
183
183
184
-
Synchronization is requested by the agent during surface initialization. By setting `sendDataModel: true` in the `createSurface` message, the agent instructs the client to start the sync loop.
184
+
Synchronization is requested by the agent during surface initialization. By setting `sendDataModel: true` in the `createSurface` message, the agent instructs the renderer to start the sync loop.
185
185
186
186
```json
187
187
{
@@ -196,7 +196,7 @@ Synchronization is requested by the agent during surface initialization. By sett
196
196
197
197
### Sync on the Wire
198
198
199
-
When sync is enabled, the client does not send the data model as a separate message. Instead, it attaches it as **metadata** to the outgoing transport envelope (e.g., an A2A message).
199
+
When sync is enabled, the renderer does not send the data model as a separate message. Instead, it attaches it as **metadata** to the outgoing transport envelope (e.g., an A2A message).
200
200
201
201
In an A2A (Agent-to-Agent) binding, the data model is placed in an `a2uiClientDataModel` object within the envelope's `metadata` field.
202
202
@@ -226,13 +226,13 @@ In an A2A (Agent-to-Agent) binding, the data model is placed in an `a2uiClientDa
226
226
-**Stateless Agents**: The agent doesn't need to maintain local state for every user session; it receives the full current context with every single interaction.
227
227
-**Verbal Shortcuts**: Allows the user to trigger actions via voice or text (e.g., "okay submit") even without clicking a specific button. Since the agent receives the updated data model with the text message, it can process the request immediately.
228
228
229
-
## Client Metadata & Capabilities
229
+
## Renderer Metadata & Capabilities
230
230
231
-
Before an agent can safely send a UI, the client must advertise which component catalogs it supports. This is handled via the `a2uiClientCapabilities` object.
231
+
Before an agent can safely send a UI, the renderer must advertise which component catalogs it supports. This is handled via the `a2uiClientCapabilities` object.
232
232
233
233
### Advertising Capabilities
234
234
235
-
Clients include an `a2uiClientCapabilities` object in the **metadata** of their messages to the server (e.g., in the `metadata` field of an A2A envelope).
235
+
Renderers include an `a2uiClientCapabilities` object in the **metadata** of their messages to the agent (e.g., in the `metadata` field of an A2A envelope).
236
236
237
237
```json
238
238
{
@@ -246,7 +246,7 @@ Clients include an `a2uiClientCapabilities` object in the **metadata** of their
246
246
}
247
247
```
248
248
249
-
-**`supportedCatalogIds`**: An array of catalog URIs the client can render.
249
+
-**`supportedCatalogIds`**: An array of catalog URIs the renderer can render.
250
250
-**`inlineCatalogs`**: (Optional) For development or specialized environments, allows sending the full catalog schema inline.
251
251
252
252
Without this handshake, an agent cannot be certain that the renderer can handle the specific components being sent.
@@ -287,18 +287,18 @@ A2UI is designed with secure, sandboxed communication as a core principle. Becau
287
287
288
288
### Sandboxed Execution
289
289
290
-
A core selling point of A2UI is security through restriction. By prohibiting arbitrary code execution (like injecting raw JavaScript) from the agent, A2UI ensures that agents can only trigger pre-registered, client-side behaviors. The `functionCall` mechanism acts as a safe, sandboxed way for the agent to interact with the client environment without exposing the user to malicious scripts.
290
+
A core selling point of A2UI is security through restriction. By prohibiting arbitrary code execution (like injecting raw JavaScript) from the agent, A2UI ensures that agents can only trigger pre-registeredbehaviors. The `functionCall` mechanism acts as a safe, sandboxed way for the agent to interact with the renderer's environment without exposing the user to malicious scripts.
291
291
292
292
### Data Model Isolation and Orchestrator Routing
293
293
294
-
When `sendDataModel: true` is enabled, the client includes the surface's entire data model in outgoing messages. Developers must understand the visibility of this data:
294
+
When `sendDataModel: true` is enabled, the renderer includes the surface's entire data model in outgoing messages. Developers must understand the visibility of this data:
295
295
296
296
-**Point-to-Point Visibility**: Only the backend receiving the transport envelope (the Agent that created the surface, or an intermediate Orchestrator) can read this payload.
297
297
-**The Orchestrator's Responsibility**: In a multi-agent architecture, a central Orchestrator often routes user intents to specialized sub-agents. The Orchestrator must enforce **data isolation**. It is responsible for parsing the `a2uiClientDataModel`, identifying the `surfaceId`, and ensuring that the data model is only passed to the specific sub-agent that owns that surface. Data from one agent's surface must never leak to another agent.
298
298
299
299
## Orchestration & Routing
300
300
301
-
In multi-agent systems, a central **Orchestrator** often manages interactions between a user and several specialized sub-agents. A key challenge is ensuring that `action` messages from the client are routed back to the specific sub-agent that generated the UI surface.
301
+
In multi-agent systems, a central **Orchestrator** often manages interactions between a user and several specialized sub-agents. A key challenge is ensuring that `action` messages from the renderer are routed back to the specific sub-agent that generated the UI surface.
When the client sends an `action` back to the orchestrator, the orchestrator looks up the `surfaceId` and transfers the request to the correct sub-agent.
320
+
When the renderer sends an `action` back to the orchestrator, the orchestrator looks up the `surfaceId` and transfers the request to the correct sub-agent.
321
321
322
322
```python
323
323
# Simplified Orchestrator Logic: Route Action
@@ -412,8 +412,8 @@ The agent created the surface with `sendDataModel: true`:
412
412
}
413
413
```
414
414
415
-
**Client Transmission:**
416
-
The client sends an A2A message containing the user's text and the data model in the metadata:
415
+
**Renderer Transmission:**
416
+
The renderer sends an A2A message containing the user's text and the data model in the metadata:
Copy file name to clipboardExpand all lines: docs/glossary.md
+10-8Lines changed: 10 additions & 8 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -23,8 +23,7 @@ And, sometimes, an agent is using a predefined catalog, thus forcing the rendere
23
23
24
24
### GenUI Component
25
25
26
-
UI component, allowed for use by AI. Examples: date picker, carousel, button, hotel selector.
27
-
26
+
UI component, allowed for use by agent. Examples: date picker, carousel, button, hotel selector.
28
27
29
28
### Catalog
30
29
@@ -44,7 +43,6 @@ It is observed that depending on use case, catalog components may be more or les
44
43
45
44
Components like HotelCheckout or FlightSelector.
46
45
47
-
48
46
### Basic Catalog
49
47
50
48
A catalog maintained by the A2UI team to get up and running quickly with A2UI.
@@ -106,7 +104,7 @@ Functionality of A2UI renderer consists of layers that can be developed separate
106
104
107
105
Code that implements the execution of the agent’s instructions in a concrete framework. For example:
108
106
109
-
- JavaScript core and catalogs may be adapted to Angular, Electron and Lit frameworks.
107
+
- JavaScript core and catalogs may be adapted to Angular, Electron, React and Lit frameworks.
110
108
- Dart core and catalogs may be adapted to Flutter and Jaspr frameworks.
111
109
112
110
See [Angular adapter](https://github.com/google/A2UI/tree/main/renderers/angular/README.md).
@@ -136,6 +134,10 @@ As the protocol allows streaming, any message can be finished (completely delive
136
134
137
135
See [data flow](https://github.com/google/A2UI/blob/main/docs/concepts/data-flow.md).
138
136
137
+
### Agent turn
138
+
139
+
Set of messages sent by agent, before it starts waiting for user input.
140
+
139
141
### Data model
140
142
141
143
Observable, hierarchical, JSON-like object, shared between renderer and agent and updatable by both. Each Surface has a separate Data Model.
@@ -154,7 +156,7 @@ See [example in basic catalog](https://github.com/google/A2UI/blob/db1fbe726b8d4
154
156
155
157
### Client function
156
158
157
-
A function provided for AI to invoke when needed.
159
+
A function provided for agent to invoke when needed.
158
160
159
161
Do not confuse with LLM tool:
160
162
@@ -170,11 +172,11 @@ See [example](https://github.com/google/A2UI/blob/main/specification/v0_9/json/c
170
172
171
173
### Action
172
174
173
-
A string that explains to the AI what should be done.
175
+
A string that explains to the agent what should be done.
174
176
175
177
It may be an alias (like “option1”) or detailed explanation (like “order three pounds of ice cream of different flavors for a kids party”).
176
178
177
-
See [detailed guide on actions](https://github.com/google/A2UI/blob/main/docs/concepts/client_to_server_actions.md).
179
+
See [detailed guide on actions](https://github.com/google/A2UI/blob/main/docs/concepts/actions.md).
178
180
179
181
## Generative UI terms
180
182
@@ -204,4 +206,4 @@ Information, categorized as **not accessible by AI** (for example, credit card i
204
206
205
207
Which information should not be accessible by AI is defined by owners of the application and it is **different in different contexts**. For example, in some contexts medical history should never go to AI, while in others AI is heavily used to help with medical diagnostics and thus needs medical history.
206
208
207
-
This term is important in GenUI context, because end users want to **clearly see** what their input is allowed to go to AI and which is not allowed.
209
+
This term is important in the GenUI context, because end users want to **clearly see** what their input is allowed to go to the AI and what is not allowed.
0 commit comments