Agentic AI with Angular: Architecture & Patterns

Architecture, Integration, and Patterns for Agentic Applications in Angular
Build agentic solutions with Angular and integrate agents seamlessly into the frontend
Duration
2 days (or 3 longer half-days)
Next event
07/13/2026
Level
Advanced
Location
Remote & In-house
Language
English / German
Price from
€690
https://www.angulararchitects.io/en/trainer/manfred-steyer-gde/

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

Solutions based on Large Language Models are rapidly evolving—from chat interfaces to agentic systems that plan tasks, invoke tools, and orchestrate workflows. The development of such systems introduces new requirements for architecture and UI integration.

In this hands-on workshop, you will learn how to build agentic applications with Angular, with a clear focus on frontend integration. Through standards such as AG-UI, A2UI, and MCP Apps, frontend and backend remain cleanly decoupled—independent of specific backend technologies and without vendor lock-in.

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: From Chatbots to Agentic Applications
  • What makes a system “agentic”?
  • The agent loop
  • Tools and tool calling
  • Prompt design for agents
  • Architecture overview

Hands-on:
Developing prompts for agentic systems and tool calling

  • Client-side tool calling
  • Structured outputs
  • Streaming responses
  • Dynamic UI

Hands-on:
Integrating an agent into an Angular application
Adding client-side tools and dynamic components

  • Using agents via AG-UI
  • Combining client- and server-side tools
  • Integrating APIs and services
  • Memory and context management
  • Model Context Protocol (MCP)

Hands-on:
Extending the application with AG-UI and MCP
Connecting the state of client- and server-side tools

  • Interrupt patterns
  • Approval workflows
  • Co-planning with users
  • Action cards
  • Undo and recovery patterns

Hands-on:
Implementing safe user interaction with the agent

  • Dynamische Komponenten
  • Natural-Language Queries
  • Code-Generierung und Sandboxing
  • Event-driven UI Updates
  • Integration von A2UI
  • Integration von MCP Apps

Hands-on:
Erstellung dynamischer, agentengesteuerter UI-Komponenten
A2UI und MCP Apps für dynamische Antworten nutzen

  • Voice interfaces
  • Images and documents
  • Combining multiple modalities
  • Designing multimodal workflows

Hands-on:
Enabling voice control
Extracting information from documents

 

  • Prompt injection risks
  • Guardrails
  • Evaluating responses
  • Securing tool execution
  • Authentication and authorization

Hands-on:
Securing agents with guardrails
Evaluating responses (scorers, judges)
OAuth 2 and OpenID Connect

 

 

  • Planning Agents
  • Sub Agents
  • Router Agents
  • Workflows
  • Multi Agent Systems

Hands-on:
Integrating advanced agents into Angular applications

Upcoming events

All of our seminars are always available remotely or in-house. Contact us to make an appointment
Jul 13 2026 - Jul 15 2026 | 2:00 PM - 6:30 PM (CET)
Very Early Bird Ticket until 04/19/2026
Group Discount (3+ People)
US Friendly Time Model:
8 AM to 12:30 PM ET
Remote |
  English
 |  Manfred Steyer, GDE
from €690

Individual In-House Company Workshops

All of our workshops are also available remotely or in-house at any time.
Contact us for an appointment

Inquire now

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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)

Newsletter

Never miss anything - subscribe to our newsletter now!

Selected happy customers

Show more