DevFest Karlsruhe7 November 2026
Agentic UI:
Wenn KI Teil des Frontends wird
Rainer Hahnekamp & Murat Sari
Agenda
01
Practical Walkthrough
02
AG-UI: The Protocol Explained
03
Brief Showcase: A2UI and Generative UI
04
Q&A
Agentic UI: Autonomy and Guardrails
AG-UI
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.`,});02 · The State Snapshot
Application State
connectAgentContext(() => ({ description: 'MacroQuest meal log', value: JSON.stringify(this.state()),}));03 · A Frontend Tool
Frontend Action
registerFrontendTool({ name: 'show_previous_day', description: 'Switch to the previous day', parameters: z.object({}), handler: () => this.showPreviousDay(),});04 · An Activity Message
Progress in the Chat
registerRenderActivityMessage({ activityType: 'meal-analysis', content: mealAnalysisActivityContent, component: MealAnalysisActivity,});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,});Which Model Should I Use for AG-UI?
| Model | Input€0€8.96 | Output€0€44.78 |
|---|---|---|
| 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
A2UI
A2UI Composer
A2UI Showcase
Angular Catalogue Registration
import { basicCatalog } from '@copilotkit/angular/a2ui';provideCopilotKit({ runtimeUrl: 'http://localhost:3210/api/copilotkit', a2ui: { catalog: basicCatalog, includeSchema: true, },});Watch the Tutorials
Q&A
Your applications and use cases
Feedback
Workshops for Your Team
Agentic Applications
Software Development with AI
AI Engineering
Angular & AI