A Complete Breakdown of Agent Architecture and the A2UI Protocol
The Paradigm Shift
At Google I/O 2026, something fundamental shifted and it wasn't announced as a headline.
Sundar Pichai opened the keynote with a single thesis: AI is moving from tools that help you think to agents that help you act.
But here's what the infrastructure-focused keynotes didn't address: Where do these agents actually live on your screen?
If your answer is "inside a scrollable chat window," you're thinking about the problem from 2024.
Google I/O 2026 answered that question with something quieter, more profound, and far more important to your job as a frontend developer: the A2UI Protocol a specification for how agents communicate with user interfaces.
What Google Actually Announced
The Models
Gemini 3.5 Flash: 4x faster than frontier models, surpasses Pro in coding and reasoning. Rolling out now across Search, Gmail, Workspace, and the API. Your default choice.
Gemini 3.5 Pro: Coming next month. More reasoning depth for complex tasks.
Gemini Omni: Treats text, images, audio, and video as native inputs and outputs. Still testing, but this changes what agents can understand about context.
The Agent Infrastructure
Agent Development Kit (ADK) v1.0: Code-first framework in Python, JavaScript, Java, Go. Graph-based orchestration for multi-agent systems. JavaScript is a first-class language.
Agent Studio: Low-code/no-code prototyping in Google Workspace. Export to ADK when you need custom logic.
Agent Runtime: Built for persistence. Your agent can fire a task, pause, wait for an external trigger, resume exactly where it left off.
Agent Gateway: Authorization + injection prevention. Security lives here, not on your frontend.
Search and Workplace Agents
The keynote showed agents integrated directly into Search, Gmail, Docs, and YouTube none as text-in-text-out chat. All with specific visual affordances.
Someone had to design and build the frontend for these agents to present themselves to humans.
That's where you come in.
The Critical Gap: Why Your Job Changed
Here's what the keynote didn't say explicitly:
The backend infrastructure is mature. The frontend architecture is not.
Traditional agent interface:
User: "Book me a flight"
Agent: "I need to know your departure city, arrival city, and date..."
User: "NYC to SF, July 15"
Agent: "What time? Economy or business?"
User: "Morning, economy"
Agent: "Found 5 flights..."
This works. It's also slow and tedious.
A2UI Changes Everything
When agents run across trust boundaries (your frontend, third-party APIs, partner systems), they can't execute code or touch the DOM. They can only send structured descriptions of what UI they need.
Your job is to interpret that schema and render it safely with components you control.
Instead of 5 chat rounds:
- Agent sends:
{ type: "flight_booking", props: { city, date, party_size } }
- Your frontend renders: A single form with date picker, party selector
- User fills it once
- Done
This isn't just better UX. It's a fundamentally different architecture.
Building With A2UI
The Component Registry
First, establish a strictly typed element registry. This ensures the agent can only render pre-approved, safe UI building blocks:
// components/a2ui/registry.tsx
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { ResponsiveContainer, BarChart, Bar, XAxis, YAxis } from "recharts";
export const A2UI_REGISTRY = {
"ui.MetricCard": ({ title, value, description }: any) => (
<Card className="border-l-4 border-l-primary">
<CardHeader className="pb-2">
<CardTitle className="text-sm font-medium text-muted-foreground">{title}</CardTitle>
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{value}</div>
{description && <p className="text-xs text-muted-foreground mt-1">{description}</p>}
</CardContent>
</Card>
),
"ui.DataChart": ({ data, dataKey, xKey }: any) => (
<Card className="p-4 h-[300px]">
<ResponsiveContainer width="100%" height="100%">
<BarChart data={data}>
<XAxis dataKey={xKey} stroke="#888888" fontSize={12} />
<YAxis stroke="#888888" fontSize={12} tickFormatter={(v) => `$${v}`} />
<Bar dataKey={dataKey} fill="currentColor" radius={[4, 4, 0, 0]} />
</BarChart>
</ResponsiveContainer>
</Card>
),
"ui.Button": ({ label, variant = "default" }: any) => (
<button className={`px-4 py-2 rounded-md font-medium text-sm transition-colors ${
variant === "default" ? "bg-primary text-primary-foreground hover:bg-primary/90" : ""
}`}>
{label}
</button>
)
};
export type RegistryKeys = keyof typeof A2UI_REGISTRY;
The Runtime Renderer
Parse A2UI schema and render safely. If an agent tries to inject an unknown component, it gets caught:
// components/a2ui/renderer.tsx
import { A2UI_REGISTRY, RegistryKeys } from "./registry";
interface A2UIPayload {
type: string;
props: Record<string, any>;
}
export function A2UIRenderer({ payload }: { payload: string }) {
try {
const parsed: A2UIPayload = JSON.parse(payload);
// Strict verification: reject unknown components
if (!(parsed.type in A2UI_REGISTRY)) {
return (
<div className="text-sm text-muted-foreground p-4 bg-muted/50 rounded-lg">
⚠️ Agent requested unsupported layout: <code>{parsed.type}</code>
</div>
);
}
const Component = A2UI_REGISTRY[parsed.type as RegistryKeys];
return <Component {...parsed.props} />;
} catch (err) {
return (
<div className="text-xs text-destructive p-3 bg-destructive/10 rounded-md">
❌ Failed to parse agent presentation
</div>
);
}
}
Streaming A2UI Over SSE
Wire this into your Next.js route handler:
// app/api/agent-stream/route.ts
import { NextRequest, NextResponse } from "next/server";
export async function POST(request: NextRequest) {
const { userMessage } = await request.json();
const encoder = new TextEncoder();
const customReadable = new ReadableStream({
async start(controller) {
try {
const agentResponse = await fetch(`${process.env.AGENT_BACKEND_URL}/stream`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ message: userMessage })
});
const reader = agentResponse.body?.getReader();
if (!reader) throw new Error("No response body");
while (true) {
const { done, value } = await reader.read();
if (done) break;
const text = new TextDecoder().decode(value);
const lines = text.split("\n");
for (const line of lines) {
if (line.startsWith("data: ")) {
const data = line.slice(6);
if (data === "[DONE]") {
controller.enqueue(encoder.encode("event: done\ndata: {}\n\n"));
} else {
controller.enqueue(encoder.encode(`event: a2ui\ndata: ${data}\n\n`));
}
}
}
}
controller.close();
} catch (error) {
controller.enqueue(encoder.encode(`event: error\ndata: ${JSON.stringify({
message: error instanceof Error ? error.message : "Unknown error"
})}\n\n`));
controller.close();
}
}
});
return new NextResponse(customReadable, {
headers: {
"Content-Type": "text/event-stream",
"Cache-Control": "no-cache",
Connection: "keep-alive"
}
});
}
Why This Matters for Frontend Developers
You're no longer just building interfaces. You're building the layer that lets autonomous systems present themselves to humans safely.
The Jobs Coming:
Agent UI Architect: Design and build component registries that agents can speak to. More infrastructure than design.
Agentic Experience Designer: Figure out how to make agent-generated UIs feel intentional and trustworthy, not random.
Frontend Agent Developer: Use ADK (in JavaScript) to build agents that talk to your own UIs. You understand both sides.
Right now, most frontend developers are still thinking about this as a chat interface problem.
The ones who understand A2UI, who've built dynamic component registries, who've thought through streaming and error handling and security—those are the people who'll be leading agent product teams by Q4.
Security: It's Not as Risky as It Sounds
Your first instinct is right: letting a remote agent dictate what renders on a user's screen is dangerous.
This is why security can't live solely on the frontend.
Defense in Depth:
Gateway Sanitization (Backend): All A2UI streams transit through Agent Gateway, checking JSON schemas against injection signatures before they reach your frontend.
Registry Allowlisting (Frontend): Your registry only contains components you designed. An agent can't request ui.StealPassword—it doesn't exist. It gets rejected.
Prop Validation (Frontend): Each component validates incoming props. React escapes dangerous content automatically.
Scope Isolation (Frontend): Ephemeral UIs render in isolated containers. They can't modify global state or access localStorage.
The pattern: Data flows in. Components render out. No execution boundary is crossed.
What the Keynote Still Didn't Cover
Cost Visibility
Agents are expensive. Streaming each component costs tokens. Your UI should show users what they're spending.
Reasoning Transparency
Why did the agent choose that component for this task? Add expandable reasoning chains.
Interruption & Redirection
What if the user wants to pause mid-stream? Build controls that let users interrupt agents.
These are all frontend problems. They're critical to shipping agent products that users actually trust.
Resources
My Earlier Coverage
Official Google
Community
The Bet
Google spent I/O talking about agents and infrastructure. But they didn't spend much time on the glue layer how agents actually talk to humans.
That gap is where the next wave of frontend architecture lives.
If you understand A2UI, if you can build dynamic component registries, if you know how to stream and handle errors and present agent reasoning transparently you're not just a frontend developer anymore.
You're building the interface layer that lets autonomous systems do real work.
That's the job that matters right now.
The tools are out of the sandbox.
Build.
