DevFest Venice
24 October 2026
Agentic UI:
AI Running in the Frontend
Rainer Hahnekamp
Google Developer Expert
Co-Maintainer CopilotKit Angular Integration
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,});A2UI
A2UI Showcase
Angular Catalogue Registration
import { basicCatalog } from '@copilotkit/angular/a2ui';provideCopilotKit({ runtimeUrl: 'http://localhost:3210/api/copilotkit', a2ui: { catalog: basicCatalog, includeSchema: true, },});Q&A
Your applications and use cases
Slides and GitHub Repo
Available in the feedback form.