Hands-On Agentic Frontends with AG-UI and CopilotKit
Overview
Modern AI applications need to go beyond a chat window. They must stream progress, synchronize state with the frontend, delegate work to specialist agents, and pause for Build a production-ready agent interface that streams work, coordinates specialist agents, renders trusted UI, and keeps humans incontrol.
Event description
The next generation of AI applications will not be built around a chat box alone.
Production agent interfaces need to show work as it happens, keep frontend and agent state synchronized, delegate tasks to specialist agents, surface interactive tools, and stop for human approval before taking consequential action.
In this three-hour, hands-on workshop, you will learn how to build that experience using AG-UI and CopilotKit, with Mastra as the TypeScript agent runtime.
Led by Rainer Hahnekamp and Murat Sari, co-maintainers of CopilotKit’s Angular integration, the session turns a complex protocol landscape into one practical, production-oriented architecture. You will see where AG-UI, A2A, MCP, MCP Apps, and A2UI belong, what boundary each one crosses, and how they work together without becoming one tangled system.
What you will build
The workshop follows one incident-response application from its first frontend–agent connection to a guarded remediation workflow.
Step by step, you will:
Connect an Angular or React frontend to a TypeScript agent with CopilotKit and AG-UI
Stream progress and synchronize shared state between the interface and agent
Delegate typed tasks to independently deployed specialist agents using A2A
Retrieve read-only observability data through MCP
Embed a portable, interactive tool through an MCP App
Render a constrained decision surface safely with A2UI
Add cancellation, validation, timeouts, partial-failure handling, and an explicit human-approval boundary before remediation
By the end, you will understand not only how the application works, but why each protocol is used at that specific point in the architecture.
Meet Your Instructors
Murat Sari
Murat Sari is a serial entrepreneur, software architect, experienced Angular trainer, and co-maintainer of CopilotKit's Angular integration. His years as a core Ogre3D contributor gave him a deep, practical command of the mathematical foundations behind models and AI. He brings a pragmatic, production-first approach to AI engineering.
Rainer Hahnekamp
Rainer Hahnekamp is co-founder and AI Engineer at Soverius AI, a Google Developer Expert, and co-maintainer of CopilotKit's Angular integration. He brings fifteen years of enterprise experience to AI engineering with local LLMs, AG-UI, RAG, agents, and production deployments.
How the stack fits together
AG-UI carries events, state, tools, and human-in-the-loop interactions between the frontend and the agent.
A2A allows independently deployed specialist agents to discover one another and delegate typed work.
MCP gives agents a standard way to discover and access tools, resources, and prompts.
MCP Apps bring portable, interactive experiences from an MCP server into the frontend.
A2UI describes constrained interfaces that the frontend maps to an allowlisted catalog of trusted components without executing model-generated application code.
CopilotKit connects the Angular or React frontend to the agent through AG-UI.
Mastra provides the TypeScript agent runtime and orchestration layer used in the reference architecture.
These technologies are presented as distinct contracts at different system boundaries not as competing frameworks or a collection of disconnected demos.
What you will be able to do
By the end of the workshop, you will be able to:
Design a production-oriented architecture for an agentic frontend
Implement streaming, shared state, frontend tools, cancellation, and human-in-the-loop controls with CopilotKit and AG-UI
Delegate typed work to specialist agents over A2A
Discover and call MCP tools, resources, and prompts
Host an interactive MCP App securely inside the frontend
Render agent-generated interfaces safely with A2UI and trusted components
Apply guardrails including schema validation, allowlists, sandboxing, timeouts, failure handling, and explicit approval
Adapt the architecture across models, frontend frameworks, runtimes, and deployment environments
What you will receive
The complete reference application for Angular and React
Source code for the TypeScript coordinator, A2A worker agents, and MCP server
Every configuration snippet demonstrated during the workshop
Step-by-step architecture diagrams and implementation guidance
A production-readiness and security checklist
Protocol-selection guidance for future projects
Full workshop slide deck in PDF format
Full workshop recording
Certificate of completion
Live Q&A with the instructors
Who this workshop is for
This workshop is designed for:
Angular and React developers building AI-assisted products
Full-stack developers working with CopilotKit, Mastra, MCP, or agent runtimes
Software architects evaluating agentic UI patterns and open protocols
Platform and security engineers responsible for agent guardrails
Product and engineering teams ready to move beyond basic chatbot experiences
Prerequisites
Basic TypeScript and web-development knowledge
Angular or React experience is helpful, but not required
No prior experience with AG-UI, A2A, MCP, MCP Apps, or A2UI is expected