Beyond the Chat Wall: What Google I/O 2026 Actually Means for Frontend Developers

User: "Book me a flight"
Agent: "I need to know your departure city, arrival city, and date..."
User: "New York to San Francisco, July 15th"
Agent: "What time do you prefer? Economy or business class?"
User: "Morning departure, economy"
Agent: "OK, found 5 flights..."

[Agent Engine] 
    ──(Streams A2UI Schema)──> [Next.js Route Handler / Security Layer]
                                        │
                        [Dynamic Component Hydration] 
                    <──(JSON over SSE)──┘

// components/a2ui/registry.tsx
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { ResponsiveContainer, BarChart, Bar, XAxis, YAxis, Tooltip } from "recharts";

export const A2UI_REGISTRY = {
  "ui.MetricCard": ({ 
    title, 
    value, 
    description 
  }: { 
    title: string; 
    value: string; 
    description?: string 
  }) => (
    <Card className="border-l-4 border-l-primary animate-in fade-in duration-300">
      <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.AgentDataChart": ({ 
    data, 
    dataKey, 
    xKey 
  }: { 
    data: any[]; 
    dataKey: string; 
    xKey: string 
  }) => (
    <Card className="p-4 h-[300px] w-full animate-in fade-in duration-500">
      <ResponsiveContainer width="100%" height="100%">
        <BarChart data={data}>
          <XAxis 
            dataKey={xKey} 
            stroke="#888888" 
            fontSize={12} 
            tickLine={false} 
            axisLine={false} 
          />
          <YAxis 
            stroke="#888888" 
            fontSize={12} 
            tickLine={false} 
            axisLine={false} 
            tickFormatter={(v) => `$${v}`} 
          />
          <Tooltip />
          <Bar 
            dataKey={dataKey} 
            fill="currentColor" 
            radius={[4, 4, 0, 0]} 
            className="fill-primary" 
          />
        </BarChart>
      </ResponsiveContainer>
    </Card>
  ),

  "ui.FormInput": ({ 
    label, 
    placeholder, 
    type = "text",
    required = false
  }: { 
    label: string; 
    placeholder: string; 
    type?: string;
    required?: boolean
  }) => (
    <div className="space-y-2 animate-in fade-in duration-300">
      <label className="text-sm font-medium">{label}</label>
      <input
        type={type}
        placeholder={placeholder}
        required={required}
        className="w-full px-3 py-2 border border-input rounded-md text-sm"
      />
    </div>
  ),

  "ui.Button": ({ 
    label, 
    variant = "default" 
  }: { 
    label: string; 
    variant?: "default" | "secondary" | "destructive"
  }) => (
    <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"
          : variant === "secondary"
          ? "bg-secondary text-secondary-foreground hover:bg-secondary/80"
          : "bg-destructive text-destructive-foreground hover:bg-destructive/90"
      }`}
    >
      {label}
    </button>
  )
};

export type RegistryKeys = keyof typeof A2UI_REGISTRY;

// components/a2ui/renderer.tsx
import React from "react";
import { A2UI_REGISTRY, RegistryKeys } from "./registry";

interface A2UIElementPayload {
  type: string;
  props: Record<string, any>;
}

interface A2UIStreamProps {
  payload: string;
  onRenderError?: (error: Error) => void;
}

export function A2UIRenderer({ payload, onRenderError }: A2UIStreamProps) {
  try {
    const parsed: A2UIElementPayload = JSON.parse(payload);

    // Strict Verification: Reject unknown components
    if (!(parsed.type in A2UI_REGISTRY)) {
      console.warn(
        `[A2UI Security Guard] Rejected rendering of unknown component type: ${parsed.type}`
      );
      return (
        <div className="text-sm text-muted-foreground p-4 bg-muted/50 rounded-lg border border-dashed">
          ⚠️ Agent requested an unsupported view layout: <code>{parsed.type}</code>
        </div>
      );
    }

    const Component = A2UI_REGISTRY[parsed.type as RegistryKeys];

    // Render the verified component safely
    return (
      <div className="animate-in fade-in duration-300">
        <Component {...parsed.props} />
      </div>
    );
  } catch (err) {
    const error = err instanceof Error ? err : new Error("Unknown error");
    onRenderError?.(error);
    return (
      <div className="text-xs text-destructive p-3 bg-destructive/10 rounded-md border border-destructive/20">
        ❌ Failed to parse agent presentation: {error.message}
      </div>
    );
  }
}

// app/api/agent-stream/route.ts
import { NextRequest, NextResponse } from "next/server";

interface AgentRequest {
  userMessage: string;
  sessionId: string;
}

export async function POST(request: NextRequest) {
  const body: AgentRequest = await request.json();

  // Create a streaming response
  const encoder = new TextEncoder();
  const customReadable = new ReadableStream({
    async start(controller) {
      try {
        // Call your agent backend (ADK, Vertex AI, etc.)
        const agentResponse = await fetch(
          `${process.env.AGENT_BACKEND_URL}/stream`,
          {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({ message: body.userMessage })
          }
        );

        if (!agentResponse.ok) throw new Error("Agent request failed");

        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 {
                // Stream the A2UI payload to the frontend
                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"
    }
  });
}

// components/AgentChat.tsx
"use client";

import { useEffect, useState, useRef } from "react";
import { A2UIRenderer } from "./a2ui/renderer";

interface A2UIEvent {
  type: "text" | "component" | "error" | "done";
  data: string;
}

export function AgentChat() {
  const [events, setEvents] = useState<A2UIEvent[]>([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [userInput, setUserInput] = useState("");
  const scrollRef = useRef<HTMLDivElement>(null);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!userInput.trim()) return;

    setIsLoading(true);
    setError(null);
    setEvents([]);

    try {
      const response = await fetch("/api/agent-stream", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          userMessage: userInput,
          sessionId: "session-123" // Use actual session ID
        })
      });

      if (!response.ok) throw new Error("Request failed");

      const reader = response.body?.getReader();
      if (!reader) throw new Error("No response body");

      const decoder = new TextDecoder();
      let buffer = "";

      while (true) {
        const { done, value } = await reader.read();
        if (done) break;

        buffer += decoder.decode(value, { stream: true });
        const lines = buffer.split("\n");
        buffer = lines.pop() || "";

        for (const line of lines) {
          if (line.startsWith("event: ")) {
            const eventType = line.slice(7);
            const dataLine = lines[lines.indexOf(line) + 1];

            if (dataLine?.startsWith("data: ")) {
              const data = dataLine.slice(6);

              if (eventType === "a2ui") {
                setEvents((prev) => [
                  ...prev,
                  { type: "component", data }
                ]);
              } else if (eventType === "error") {
                const errorData = JSON.parse(data);
                setError(errorData.message);
              } else if (eventType === "done") {
                setIsLoading(false);
              }
            }
          }
        }
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : "Unknown error");
      setIsLoading(false);
    }

    setUserInput("");
  };

  // Auto-scroll to latest
  useEffect(() => {
    scrollRef.current?.scrollIntoView({ behavior: "smooth" });
  }, [events]);

  return (
    <div className="flex flex-col h-screen gap-4 p-4">
      <div className="flex-1 overflow-y-auto space-y-4">
        {/* Render all A2UI components */}
        {events.map((event, idx) => (
          <div key={idx}>
            {event.type === "component" && (
              <A2UIRenderer payload={event.data} />
            )}
            {event.type === "text" && (
              <p className="text-sm text-muted-foreground">{event.data}</p>
            )}
          </div>
        ))}

        {isLoading && (
          <div className="flex gap-2 p-4 bg-muted/50 rounded-lg">
            <div className="w-2 h-2 rounded-full bg-primary animate-pulse" />
            <div className="w-2 h-2 rounded-full bg-primary animate-pulse animation-delay-100" />
            <div className="w-2 h-2 rounded-full bg-primary animate-pulse animation-delay-200" />
          </div>
        )}

        {error && (
          <div className="p-4 bg-destructive/10 border border-destructive/20 rounded-lg text-destructive text-sm">
            {error}
          </div>
        )}

        <div ref={scrollRef} />
      </div>

      <form onSubmit={handleSubmit} className="flex gap-2">
        <input
          type="text"
          value={userInput}
          onChange={(e) => setUserInput(e.target.value)}
          placeholder="Ask the agent..."
          disabled={isLoading}
          className="flex-1 px-4 py-2 border border-input rounded-lg text-sm"
        />
        <button
          type="submit"
          disabled={isLoading}
          className="px-4 py-2 bg-primary text-primary-foreground rounded-lg text-sm hover:bg-primary/90 disabled:opacity-50"
        >
          Send
        </button>
      </form>
    </div>
  );
}

Agent: "Your portfolio value is $250,000. Your YTD return is 12.5%. 
Would you like to rebalance? If so, tell me which sectors to adjust."
User: "Yes, increase tech by 10%"
Agent: "OK, I'll rebalance... done."

Agent streams:
[
  { type: "ui.MetricCard", props: { title: "Portfolio Value", value: "$250,000" } },
  { type: "ui.AgentDataChart", props: { data: [...], dataKey: "return", xKey: "month" } },
  { type: "ui.RebalanceForm", props: { sectors: ["Tech", "Healthcare", "Finance"], ...] } }
]

User fills form once → Agent gets structured input → Done in one interaction