Angular Academy
Agentic UI with Angular: Architecture & Patterns

World-class instructor-led live Angular course!

Classes and Registration


Contact us for your private Corporate Training.

Our prices are in Canadian dollars (CAD)

USA In the USA? Attend our virtual classes and take advantage of the 40% exchange rate! (and no tax)

Professional Angular Training!

Build agentic UI solutions with Angular in this awesome instructor-led training!


What's in it?

Build dynamic, agent-driven Angular UIs with an industry expert in an immersive hands-on workshop.

Workshop

It's hands-on! An important part of the training is dedicated to building apps together and testing things in real time (interactive learning class).

Prerequisites

You should have significant experience with the core concepts of Angular and TypeScript.

Agentic UI with Angular


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.
By the end of the workshop, you will have a working example and a clear understanding of how to apply agentic systems in production environments.

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

  • 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

Other Angular training courses!

The Angular Academy

Difference!


Our courses are different from anything you've seen before.... rather than just teaching you something, and giving you a bunch of exercises along the way, in our hands-on courses we focus on BUILDING a real data-centric business application, together! (Also integrating AI assistants along the way)

So this isn’t just another one of those “watch me build something and try not to fall asleep” courses... our motto is Everyone Live Coding All Day Long!© Building a complete application together with the instructor. This way, by the end of the training we'll have built an entire app, and the instructor makes sure that nobody get stuck. You’ll also get lot's of advice and best practices on building and optimizing Angular applications with TypeScript and RxJS!

We think this is by far the most efficient way of learning a programming technology, and our attendees LOVE IT!

Read our customers testimonials

Contact Us


For more information or organizing your Corporate Training.


Alumni


Be part of our next workshop and learn Angular in a fun and engaging way!