Agentic UI with Angular: Architecture & Patterns
Manfred Steyer, GDE
is Google Development Expert (GDE), and has published books at O'Reilly, Microsoft Press, and Hanser and writes for Heise Online, windows.developer and the Java magazine. He also regularly shares his knowledge at conferences
You will learn how to:
✅ Integrate agents into Angular frontends
✅ Apply AG-UI, A2UI, and MCP Apps in practice
✅ Build dynamic, agent-driven UIs
✅ Combine client- and server-side tools
✅ Use architectural patterns for scalable and maintainable systems
By the end, you will have a working example and a clear understanding of how to apply agentic systems in production environments.
Agenda
Module 1: Architecture of Agentic Systems from a Server and UI Perspective
- From user intent to outcome
- The agentic loop
- Tools and tool calling
- Memory and context management
- Streaming
- Structured output
- Interaction between client and server
Hands-on:
- An initial agentic solution
Module 2: Connecting Agents with AG-UI
- Message types in AG-UI
- Combining client-side and server-side tools
- Integrating stores and services
- Dynamic components
- Using the AG-UI SDK
- Integrating AG-UI through CopilotKit
Hands-on:
- Integrate an agent via AG-UI
- Connect client-side and server-side tools
- Use dynamic components for answers
Module 3: Generative and Adaptive UI with A2UI
- Dynamic dashboards and natural-language queries
- A2UI-based component trees
- A2UI messages
- Data binding and event handling
- Custom catalogs: integrating your own components
- Combining A2UI with AG-UI
- A2UI renderer for Angular
Hands-on:
- Build a dynamic dashboard with A2UI
- Integrate a custom catalog with Angular components
Module 4: Visualizing Tools with MCP Apps
- Connecting third-party tools through MCP
- Integrating MCP Apps
- Key characteristics of the MCP Apps protocol
- Using the MCP Apps SDK
- Combining MCP Apps with AG-UI
Hands-on:
- Integrate a tool from a third-party system through MCP
- Visualize tool results with MCP Apps
Module 5: Human-in-the-Loop Patterns
- Options for creating transparency
- Approvals and clarification requests through AG-UI interrupts
- Action cards with recovery patterns
- Co-planning and planning agents
- Co-creation and state management
Hands-on:
- Implement the discussed human-in-the-loop patterns
Module 6: Guardrails
Module 6: Guardrails
- Types of guardrails
- Security and safety
- Input processors and output processors
- Preventing prompt injection
- Scorers and judges
- Securing tools
- Sandboxes
Hands-on:
- Implement input processors
- Isolate dynamic logic in a sandbox
Module 7: Agent Patterns from the Client Perspective
- Routing agents
- Planning agents
- Sub-agents
- Workflows: deliberately combining deterministic and agentic processes
- Multi-agent systems
Hands-on:
- Integrate sub-agents and visualize tool calls
- Integrate workflows and visualize their states
Module 8: Multimodal Interaction
- Voice interfaces
- Browser APIs
- Images and documents
- Multimodal content in AG-UI
- Combining multiple modalities
Hands-on:
- Enable voice control
- Extract information from documents
Upcoming events
Reviews
I also appreciated the concrete examples of how to implement DDD in folder and files structures.
Individual In-House Company Workshops
All of our workshops are also available remotely or in-house at any time.
Contact us for an appointment
FAQs on our workshops
How do your workshops and courses work?
Our seminars around Angular are a mixture of lecture, live coding and actual exercises. Together we implement what we have learned during the workshop directly on a example project. This mixture guarantees that the course never gets boring and “hands-on” is required instead of gray theory.
Who is the Angular hands-on training designed for?
Our Angular hands-on workshop is aimed at anyone who wants to develop applications with Angular in the future or is already doing so and now wants to better understand the background, context and building blocks of the framework.
Participants should have basic knowledge of web development (basic knowledge of HTML and JavaScript).
For advanced Angular developers we offer advanced seminars and intensive trainings on specific use cases.
Where do the Angular workshops take place?
Our trainings take place as public workshops in seminar rooms at central hotels in Germany, Austria and Switzerland. In-House company workshops take place at your office or conference room.
All courses are also available as remote workshops, where we meet online in a virtual classroom and do the training via video calls, screen sharing and live coding.
Who are the trainers?
Our workshops are held by experienced trainers and software architects. In recent years, we have provided Angular training to well-known companies – including well-known banks, insurance companies, industrial groups. Trainers include well-known conference speakers, authors of books and professional articles, bloggers, Google Developer Experts and university lecturers.
At what times are the training sessions held?
Especially for dedicated company trainings, we are happy to accommodate you. Typical times are 9:00AM to 4:30PM / 5:00PM. Some of our English-language workshops are timed so that you can also attend at US friendly times.
Can we also book online training courses?
Absolutely. In fact, since the pandemic, this has been our main business model and we have had very good experience with it. We use a combination of screen sharing, interactive online whiteboards, and are happy to connect to your computer for support during the exercises if you wish. As with our on-site training, we use a combination of short presentations, discussions, live coding and hands-on labs.
Since there is no travel involved, you also save time and money. We can also respond more flexibly to your scheduling needs.
Can we adapt the training for our purposes?
Yes, very much so. In fact, that’s one of the benefits of dedicated corporate training. You are welcome to weight, shorten or add to our agenda proposals. As a rule, we also coordinate with your trainer about 2 weeks before the training. If you wish, we can also arrange it earlier.
Why Angular?
Among other things, Angular’s wide distribution speaks for itself, but also the fact that Google, an Internet giant that also uses the framework very intensively, is behind it. Google alone has over 2600 solutions based on it. Due to the wide distribution, there is a large community and thus a lot of know-how on the market as well as (free and commercial) products that are adapted to Angular. In addition, Angular provides much of what you need for large applications out of the box: test automation, form management, routing, etc. In this respect, you get a stack whose components are coordinated and work together in the long term.
How do you compensate for different prior knowledge?
The good news up front is that participants with different levels of prior knowledge are the rule, not the exception, in adult education. That’s why you’ll find optional fade-in hints and bonus exercises on our exercise sheets, for those who are a little faster. Of course, we also provide personal support for the exercises.
How many participants are recommended?
If you book a company training with us, we leave this decision to you in principle. However, experience shows that there should not be more than 15 participants, especially since a seminar lives very much from questions, discussions and practical exercises.
What software do we need?
Please install the following software packages on your computer:
– NodeJS in current version (we test with current LTS version).
– Angular CLI (npm i -g @angular/cli)
– Git
– Visual Studio (free) or WebStorm/IntelliJ (commercial)
Selected happy customers
