Session

The Frontend Is the Agent Runtime: Building Multi-Agent UIs in Angular with Gemini

LLM features have converged on one architecture: a chat sidebar streaming Markdown into a div. It works, and it locks the most powerful capability of modern models (structured, streamed tool use) behind plain text.

This session is about the inverse. An architecture where the UI is the agent's runtime. Tool calls don't return strings; they instantiate live UI components mid-stream while the executor is still running, and those components feed user observations back into the loop. Specialist agents hand off through a typed tool. The user is a first-class node in the graph (approve, reject, choose, cancel), not a passive consumer of streamed text. This isn't LangGraph in the browser; the orchestration lives in the UI itself. If you've shipped an LLM feature and feel chat sidebars are a local maximum, this talk is for you.

The talk is anchored in Atlas, an open-source Angular travel-planning app: two specialist agents (flights and hotels, plus activities and experiences), Gemini via @google/genai. Why this is hard: modern Gemini models return encrypted thought-signature blobs that must round-trip verbatim across turns. Naive multi-turn implementations break on day one.

On stage: one prompt fans out into parallel flight and hotel cards (rendered before the model's response arrives), a human approval on a booking, and a typed handoff to a second agent that plans activities. The architecture behind that demo is built for the thought-signature constraint and around five problems most LLM-app talks gloss over:

• Streaming as a typed event log. One pass over the chunk stream emits a discriminated union of UI events; the UI pattern-matches on event types, not on raw provider chunks.

• Two parallel views of state, one writer. The same stream feeds an append-only reducer that preserves the provider's raw multi-turn format for the next API call, and a typed event log the UI reads from. Never drifts.

• Tools rendered as components, not just executed as functions. Each tool ships a UI component, code-split and lazy-loaded on first call. The same instance is the loading skeleton, running state, result, and error UI; a status prop flips, no remount.

• Human-in-the-loop as a typed graph edge. Interruptive tools pause the loop on a single Promise the UI resolves; the decision becomes the function-response payload the model sees next turn. No modals, no callback hell.

• Multi-agent handoff as a streamed tool call. A shared handoff tool transitions control between specialists; system prompt and tool surface swap mid-conversation. A reactive component visualises which agent is in control.

The talk closes with the operator-grade scaffolding that makes this production-credible: a cost-and-context meter, a waterfall observability view, a per-turn budget governor with token / round / dollar caps, a runtime tool builder (describe, save, next prompt uses it), and deterministic local replay as the stage fallback.

Honest tradeoff: a bigger client surface and a tighter HITL contract, traded for tool calls that are the UI rather than text rendered on top of it. Attendees leave with the patterns and an MIT-licensed runnable repo.

Live demo. Open-source SPA. No backend.


Target audience. Engineers who have shipped at least one LLM feature, are comfortable with TypeScript and Angular, and have hit the limits of chat-sidebar UX for agentic features. Familiarity with function calling and streaming APIs assumed; no deep Angular expertise required.

Format. Talk + live demo. Roughly half slides on Gemini capabilities and the architecture behind the demo; half live demo against a publicly deployed Atlas app.

Ankit Sharma

Staff Frontend Engineer | GDE for Angular | Microsoft MVP | Author | Speaker | Passionate Programmer

Bengaluru, India

Actions

Please note that Sessionize is not responsible for the accuracy or validity of the data provided by speakers. If you suspect this profile to be fake or spam, please let us know.

Jump to top