DevFest Karlsruhe wireframe illustration in blue, red, green and yellow
DevFest Karlsruhe7 November 2026

Agentic UI:

Wenn KI Teil des Frontends wird

Rainer Hahnekamp & Murat Sari
Soverius AI - Murat Sari and 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

Which Model Should I Use for AG-UI?

Standard API Pricing · EUR per 1 Million Tokens
Model Input Output
Gemma 4 26B A4B
€0.06
€0.20
GPT-6 Luna
€0.09
€0.45
Mistral Large 4
€0.63
€1.88
Qwen3.8-Max
€1.48
€4.43
Grok 4.7
€1.79
€5.37
Claude Sonnet 5.5
€1.79
€8.96
GPT-6.1 Sol
€1.79
€8.96
Kimi K3.1 Pro
€1.79
€8.96
Claude Opus 5.5
€3.58
€17.91
Claude Fable 5.1
€8.96
€44.78
GPT-6 Astra
€8.96
€44.78

USD rates converted at the 6 November 2026 ECB rate · Gemma and Kimi via OpenRouter

17
Soverius AI

A2UI

18
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

19
Soverius AI

A2UI Composer

A2UI Composer with the Gemini assistant, a rendered charging dashboard and the A2UI JSON editor. Open A2UI Composer ↗ 20
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,  },});
21
Soverius AI

Watch the Tutorials

A2UI: Generative UI in Angular
22

Presentation Controls

Next Step
Right arrow, Space, Page Down
Previous Step
Left arrow, Backspace, Page Up
Skip Slide
Shift + Right / Left arrow, or « / »
First / Last
Home / End
Overview
O
Toolbar
T - keep visible / auto-hide
Speaker Notes
N
Fullscreen
F
Close
Escape