Building the Agentic UI Stack: A Deep Dive into AG-UI, A2UI, and State Sync

A Coding Deep Dive into Agentic UI, Generative UI, State Synchronization, and Interrupt-Driven Approval Flows

This tutorial demonstrates the construction of a complete Agentic UI stack from scratch using pure Python. The implementation utilizes the AG-UI protocol, which features approximately 16 event types streamed via Server-Sent Events (SSE) for real-time observability.

Why This Matters

Traditional UIs are static and struggle to represent the non-linear reasoning of AI agents, leading to black box experiences for users. By implementing protocols like A2UI for declarative component trees and AG-UI for state synchronization, developers can move beyond text-only chat to context-adaptive, generative interfaces that maintain safety through human-in-the-loop interrupt signals. This architecture ensures that high-stakes actions, such as emailing thousands of customers, are intercepted before execution, bridging the gap between autonomous agent reasoning and controlled user interaction.

Key Insights

• AG-UI Event Stream: A system supporting 16 distinct event types, including RUN_STARTED and TOOL_CALL_START, enables real-time monitoring of agent behavior via SSE.
• A2UI Declarative Layer: Google’s A2UI specification uses a flat JSON adjacency model to define interfaces without sending executable code, ensuring security and portability.
• Bidirectional State Synchronization: Utilizing JSON Patch operations via STATE_DELTA keeps the agent’s internal state and the frontend UI in lockstep during mutations.
• Generative UI: LLMs can dynamically select UI patterns, such as dashboards or forms, based on user intent, producing structured A2UI component trees instead of plain text.
• Interrupt-Driven Approval: High-risk actions trigger INTERRUPT events, pausing agent execution until a human provides an approve, reject, or modify response.

Working Examples

Implementation of the AG-UI event system for streaming agent behavior via SSE.

from enum import Enum
from dataclasses import dataclass, field
import uuid, time, json

class AGUIEventType(str, Enum):
    RUN_STARTED = "RUN_STARTED"
    TEXT_MESSAGE_CONTENT = "TEXT_MESSAGE_CONTENT"
    TOOL_CALL_START = "TOOL_CALL_START"
    STATE_DELTA = "STATE_DELTA"
    INTERRUPT = "INTERRUPT"

@dataclass
class AGUIEvent:
    type: AGUIEventType
    data: dict = field(default_factory=dict)
    event_id: str = field(default_factory=lambda: str(uuid.uuid4())[:8])
    timestamp: float = field(default_factory=time.time)

    def to_sse(self) -> str:
        payload = {"type": self.type.value, "id": self.event_id, **self.data}
        return f"event: ag-ui\ndata: {json.dumps(payload)}\n\n"

Definition of the A2UI flat adjacency model for declarative component trees.

@dataclass
class A2UIComponent:
    id: str
    type: str
    properties: dict = field(default_factory=dict)
    children: list[str] = field(default_factory=list)

    def to_dict(self) -> dict:
        d = {"id": self.id, "type": self.type, **self.properties}
        if self.children: d["children"] = self.children
        return d

Practical Applications

• Use Case: A data analyst agent building a real-time dashboard for revenue monitoring. Pitfall: Hardcoding UI layouts instead of using declarative A2UI components, which limits the agent’s ability to adapt to new data shapes.
• Use Case: A multi-agent document review pipeline (Researcher, Editor, Reviewer) updating a shared state. Pitfall: Failing to use atomic STATE_DELTA updates, leading to state drift between the backend agent and the frontend renderer.

References:

• https://www.marktechpost.com/2026/04/30/a-coding-deep-dive-into-agentic-ui-generative-ui-state-synchronization-and-interrupt-driven-approval-flows/