The AG-UI Protocol: How AI Agents Drive User Interfaces

One of the practical challenges in building Agentic UI is the communication layer between the AI agent and the frontend. How does the agent tell the interface what to show? How does the interface tell the agent what the user just did? How do you keep both sides in sync in real time?

For a long time, every team solved this differently. Custom websocket implementations, proprietary JSON schemas, bespoke state synchronization logic. The result was fragile, expensive to build, and impossible to reuse across projects.

AG-UI (Agent-User Interaction) is an open protocol designed to solve this problem — standardizing how agents and interfaces communicate, the same way HTTP standardized how browsers and servers communicate.

The problem it solves

Building Agentic UI without a standard protocol requires:

• Custom real-time connections for streaming agent updates to the frontend
• Proprietary payload formats for describing UI components (every implementation different)
• Bespoke state synchronization logic to keep agent and interface in sync
• One-off integrations for each agent framework and frontend library

The result: months of engineering work per implementation, fragile integrations, and no ability to share components or patterns across projects.

AG-UI addresses this by defining:

• A standard transport layer: HTTP + Server-Sent Events (SSE) for real-time streaming
• A standard payload format: JSON descriptions of UI components that any frontend can render
• A standard state sync model: Bidirectional updates between agent and interface
• Framework agnosticism: Works with any agent framework (OpenAI, Anthropic, custom) or frontend library (React, Vue, Svelte)

How it works

The communication flow is straightforward:

Step	Actor	Action
1	User	Interacts with the interface (types, clicks, uploads)
2	Frontend	Sends the action to the agent via HTTP POST
3	Agent	Processes intent, invokes tools, determines next UI state
4	Agent	Streams UI updates back via Server-Sent Events
5	Frontend	Renders the components described in the JSON payload
6	Loop	User interacts with the rendered UI — repeat

The agent describes what the interface should show using JSON component blueprints. The frontend has a component library that knows how to render each component type — a document upload widget, a step progress indicator, a confirmation card, a form field.

Here's a simplified example of what an agent might stream to the frontend during a KYC onboarding flow:

{
  "type": "ui_update",
  "component": "document_upload",
  "data": {
    "title": "Upload your ID",
    "accepted_formats": ["jpg", "png", "pdf"],
    "guidance": "Make sure all four corners are visible",
    "step": 2,
    "total_steps": 5
  }
}

The frontend renders the upload widget. When the user submits the document, the frontend sends the action back to the agent:

{
  "action": "document_submitted",
  "document_type": "passport",
  "context": { "session_id": "sess_abc123" }
}

The agent processes the document, runs verification, and streams the next UI state — perhaps a processing indicator, then a confirmation, then the next step in the journey.

The relationship to other protocols

AG-UI is often discussed alongside MCP (Model Context Protocol), which standardizes how agents connect to data sources and tools. They serve different layers:

Protocol	Purpose	Layer
MCP	Connects agents to tools and data sources	Backend
AG-UI	Connects agents to user interfaces	Frontend

They're complementary. MCP lets the agent access data; AG-UI lets the agent show it to users. Most Agentic UI implementations use both.

Why this matters for financial services

In financial services, the components an agent needs to orchestrate are specific and compliance-sensitive: identity verification flows, document capture, consent capture, disclosure presentation, step-by-step application forms.

A standardized protocol means these components can be built once, validated once (for compliance), and reused across products and journeys. A KYC document upload component built to AG-UI spec can be used in a banking onboarding flow, an insurance application, and a lending journey — without rebuilding the integration each time.

This has real implications for time-to-market and compliance overhead. Instead of each product team building their own agent-to-UI integration, they share a component library that's already been tested and approved.

Security considerations

Any implementation of AG-UI in financial services needs to address security at every layer:

• Authentication: Verify user identity before processing actions (JWT, OAuth)
• Authorization: Ensure users can only access their own data
• Input validation: Sanitize all inputs to prevent injection attacks
• Rate limiting: Prevent abuse at the per-user and per-endpoint level
• Audit logging: Track every action and every UI state for compliance and incident investigation

These aren't AG-UI-specific requirements — they're requirements for any system handling sensitive financial data. But they need to be designed in from the start, not retrofitted.

The practical takeaway

AG-UI is still an emerging standard, but the underlying pattern — agents communicating with frontends through a structured, streaming protocol — is already how the best Agentic UI implementations work. Whether you use AG-UI specifically or implement the same pattern under a different name, the architecture is sound.

For teams building Agentic UI in financial services, the key decisions are:

1. Define your component library — what UI components does your agent need to orchestrate? Document upload, step progress, consent capture, confirmation cards?
2. Design the state model — how does the agent track where the customer is in the journey?
3. Build the streaming layer — SSE is the standard approach; it's well-supported and reliable
4. Enforce security at every layer — authentication, authorization, audit logging

The protocol handles the plumbing. The value is in the journey design.

---

See Agentic UI in action — an AI agent orchestrating a complete financial services journey end-to-end. Explore the SuprAgent demo.