Venice Grand Canal
DevFest Venice
24 October 2026

Agentic UI:

AI Running in the Frontend

Rainer Hahnekamp

Google Developer Expert
Co-Maintainer CopilotKit Angular Integration

Soverius AI - Rainer Hahnekamp
Soverius AI

Agenda

01

Practical Walkthrough

02

AG-UI: The Protocol Explained

03

Brief Showcase: A2UI and Generative UI

04

Q&A

3
Soverius AI

Agentic UI: Autonomy and Guardrails

From classic frontend to full-fledged agentic UI Five capability phases show increasing agent capability and UI freedom together with the guardrail introduced at each step. A2UI mark from the official A2UI project repository: https://github.com/a2ui-project/a2ui 1 Classic Frontend Deterministic UI NO AI 2 Chat Responses only · no tools NO AUTONOMY 3 Controlled Agentic UI AG-UI Streaming · tools · state · HITL Actions stay behind explicit APIs 4 A2UI Declarative Dynamic UI Agent composes approved components from a catalogue 5 Open-Ended UI MCP Apps · Open Generative UI Portable apps or generated HTML contained in an iframe sandbox AGENT AUTONOMY + GUARDRAILS NONE APP + UI CONTROL CONTROLLED PROTOCOL + TOOL BOUNDARIES DECLARATIVE COMPONENT CATALOGUE OPEN-ENDED IFRAME SANDBOX

4
CopilotKit implements AG-UI, connecting example backends LangGraph, Google ADK and Mastra with Angular, React and Vue frontends. More backends and frontends are available. 5
Soverius AI

AG-UI

6
Gemma 4 exchanges messages with the CopilotKit agent. The application UI is visible but disconnected. 7
Soverius AI

01 · Chat and a System Prompt

System Prompt
new BuiltInAgent({  prompt: `Your are a food logger, called MacroQuest.You only answer questions related to food,nutrition and similar things.`,});
8
MacroQuestStore supplies a read-only state snapshot to the agent. 9
Soverius AI

02 · The State Snapshot

Application State
connectAgentContext(() => ({  description: 'MacroQuest meal log',  value: JSON.stringify(this.state()),}));
10
The agent calls previous-day and next-day tools, which update MacroQuestStore and the application UI. 11
Soverius AI

03 · A Frontend Tool

Frontend Action
registerFrontendTool({  name: 'show_previous_day',  description: 'Switch to the previous day',  parameters: z.object({}),  handler: () => this.showPreviousDay(),});
12
Backend meal analysis runs while an AG-UI activity message shows progress in the frontend chat. 13
Soverius AI

04 · An Activity Message

Progress in the Chat
registerRenderActivityMessage({  activityType: 'meal-analysis',  content: mealAnalysisActivityContent,  component: MealAnalysisActivity,});
14
The Add meal tool asks the user to confirm before updating MacroQuestStore. 15
Soverius AI

05 · Human in the Loop

Approval Before a Write
registerHumanInTheLoop({  name: 'add meal to meal log',  description: 'Adds a meal after confirmation',  parameters: mealDraftSchema,  component: MealDraftConfirmation,});
16
Soverius AI

A2UI

17
A2UI · From Catalogue to SurfaceMODELBACKENDFRONTENDGemma 4CopilotKitImplements AG-UIAgentAngular IntegrationBasic CatalogImage componentButton componentCheckbox componentToolrender_a2uiJSONAngular FrontendA2UI RendererUses components fromthe Basic Catalog.Surface · DOMmeal-planMeal PlanText2,200 kcal · workout dayLunch650 kcalCardRice, vegetables and chickenCatalogue MetadataImageButtonCheckbox

18
Soverius AI

A2UI Showcase

Angular Catalogue Registration
import { basicCatalog } from '@copilotkit/angular/a2ui';provideCopilotKit({  runtimeUrl: 'http://localhost:3210/api/copilotkit',  a2ui: {    catalog: basicCatalog,    includeSchema: true,  },});
19