Agentic UI mit Angular: Architektur & Patterns
Manfred Steyer, GDE
Manfred ist Google Developer Expert, hat Bücher bei O'Reilly, Microsoft Press und Hanser veröffentlicht und schreibt für Heise Online, windows.developer und das Java Magazin. Außerdem gibt er sein Wissen regelmäßig auf Konferenzen weiter
Auf Large Language Models basierende Lösungen entwickeln sich rasant – von Chat-Interfaces hin zu agentischen Systemen, die Aufgaben planen, Tools aufrufen und Workflows orchestrieren. Die Entwicklung solcher Systeme stellt neue Anforderungen an Architektur und UI-Integration.
In diesem Hands-on-Workshop lernen Sie, wie sich agentische Anwendungen mit Angular umsetzen lassen – mit klarem Fokus auf die Integration im Frontend. Durch Standards wie AG-UI, A2UI und MCP-Apps bleiben Frontend und Backend sauber entkoppelt – ohne Vendor-Lock-in und unabhängig von Backend-Technologien.
Sie lernen unter anderem:
✅ Integration von Agents im Angular-Frontend
✅ Einsatz von AG-UI, A2UI und MCP Apps in der Praxis
✅ Aufbau dynamischer, agentengesteuerter UIs
✅ Zusammenspiel von Client- und Server-Tools
✅ Architektur-Patterns für wartbare und skalierbare Systeme
Am Ende haben Sie ein funktionierendes Beispiel und ein klares Verständnis für den produktiven Einsatz agentischer Anwendungen.
Agenda
Modul 1: Architektur agentischer Systeme aus Backend- und Frontend-Sicht
- Vom Intent zum Ziel
- Die Agentic Loop
- Tools und Tool Calling
- Speicher- und Kontextmanagement
- Nachrichten und Streaming
- Structured Output
- Client und Server im Zusammenspiel
Hands-on:
- Eine erste agentische Lösung
Modul 2: Agenten mit AG-UI anbinden
- Nachrichtentypen in AG-UI
- Kombination von client- und serverseitigen Tools
- Integration von Stores und Services
- Dynamische Komponenten
- Das AG-UI SDK nutzen
- AG-UI über CopilotKit einbinden
Hands-on:
- Einen Agent mit AG-UI anbinden
- Client- und serverseitige Tools nutzen
- Dynamische Komponenten als Antwort vorsehen
Modul 3: Generative und Adaptive UI mit A2UI
- Dynamische Dashboards und Natural Language Queries
- A2UI-basierte Komponentenbäume
- A2UI-Nachrichten
- Datenbindung und Event Handling
- Custom Catalogs: eigene Komponenten einbinden
- Zusammenspiel mit AG-UI
- A2UI-Renderer für Angular
Hands-on:
- Ein dynamisches Dashboard auf Basis von A2UI entwickeln
- Einen Custom Catalog mit Angular-Komponenten einbinden
Modul 4: Tools mit MCP Apps visualisieren
- Tools von Drittanbietern über MCP anbinden
- MCP Apps einbinden
- Eigenschaften des MCP-Apps-Protokolls
- Das MCP-Apps-SDK nutzen
- MCP Apps gemeinsam mit AG-UI einsetzen
Hands-on:
- Ein Tool aus einem Drittsystem über MCP integrieren
- Tool-Ergebnisse mit MCP Apps visualisieren
Modul 5: Human-in-the-Loop Patterns
- Möglichkeiten, Transparenz zu schaffen
- Approvals und Rückfragen mit Interrupts in AG-UI
- Action Cards mit Recovery Patterns
- Co-Planning und Planning Agents
- Co-Creation und State Management
Hands-on:
- Die besprochenen Human-in-the-Loop Patterns implementieren
Modul 6: Guardrails
- Arten von Guardrails
- Security und Safety
- Input Processors und Output Processors
- Prompt Injection verhindern
- Scorers und Judges
- Tools absichern
- Sandboxes
Hands-on:
- Input Processors implementieren
- Dynamische Logik in einer Sandbox isolieren
Modul 7: Agent Patterns aus Client-Sicht
- Routing Agents
- Planning Agents
- Sub-Agents
- Workflows: deterministische und agentische Abläufe gezielt kombinieren
- Multi-Agent-Systeme
Hands-on:
- Sub-Agents einbinden und Tool Calls visualisieren
- Workflows einbinden und Zustände visualisieren
Modul 8: Multimodale Interaktion
- Voice Interfaces
- Browser APIs
- Bilder und Dokumente
- Multimodale Inhalte in AG-UI
- Kombination mehrerer Modalitäten
Hands-on:
- Sprachsteuerung ermöglichen
- Informationen aus Dokumenten extrahieren
Aktuelle Termine
Rezensionen
Individuelle Firmenworkshops
Alle unsere Workshops & Seminare sind jederzeit auch Remote oder In-House verfügbar.
Kontaktieren Sie uns für eine Terminvereinbarung
FAQs zu unseren Workshops
Wie läuft eine Angular-Schulung bei euch ab?
Unsere Seminare sind eine Mischung aus Vortrag, Live-Coding und konkreten Übungen. Gemeinsam setzen wir das Erlernte während des Workshops direkt an einem Beispielprojekt um. Diese Mischung garantiert, dass der Kurs nie langweilig wird und statt grauer Theorie „Hands-On“ gefragt ist.
Für wen sind die Praxis Angular-Schulungen konzipiert?
Unsere Angular-Schulung Struktuiere Einführung richtet sich alle, die künftig Anwendungen mit Angular entwickeln wollen oder dies schon machen und nun die Hintergründe, Zusammenhänge und Building-Blocks des Frameworks besser verstehen wollen.
Die Teilnehmer sollten grundlegende Kenntnisse in der Web-Entwicklung haben (grundlegende Kenntnisse von HTML und JavaScript).
Für fortgeschrittene Angular-Entwickler*innen bieten wir Advanced Angular Seminare und Intensivkurse zu spezifischen Anwendungsfällen.
Wo finden die Praxis Angular-Schulungen statt?
Unsere Angular-Schulungen finden als öffentliche Workshops in Seminarräumen zentraler Hotels in Deutschland, Österreich und der Schweiz statt. In-House Schulungen finden bei euch im Büro oder Seminarraum statt.
Alle Kurse sind auch als Remote-Workshops möglich, wo wir uns online im Virtual Classroom treffen, und die Schulung via Videocalls, Screensharing und gemeinsamen Live-Coding abhalten.
Wer sind die Trainer?
Unsere Schulungen werden von erfahrenen Trainern und Software-Architekten durchgeführt. Wir haben in den letzten Jahren namhafte Firmen – u. a. bekannte Banken, Versicherungen, Industriekonzerne – in Sachen Angular betreut. Zu den Trainern gehören bekannte Konferenzsprecher, Autoren von Büchern und Fachartikeln, Blogger, Google Developer Experts und Hochschuldozenten.
Zu welchen Zeiten finden die Schulungen statt?
Gerade bei dezitierten Firmenschulungen richten wir uns gerne nach euch. Typische Zeiten sind 9:00Uhr bis 16:30/17:00Uhr.
Können wir auch Online-Schulungen buchen?
Auf jeden Fall. Seit der Pandemie ist das sogar unser Hauptgeschäftsmodell und wir haben sehr gute Erfahrungen damit gemacht. Wir nutzen eine Kombination aus Screen-Sharing, interaktiven Online-Whiteboards und verbinden uns auf Wunsch während der Übungen zur Unterstützung auch gerne auf Ihrem Rechner. Wie bei unseren On-Site-Schulungen setzen wir auch hier auf eine Kombination aus kurzen Präsentationen, Diskussionen, Live-Coding und Hands-On-Labs.
Da die Anreise wegfällt, sparen Sie auch Zeit und Geld. Außerdem können wir flexibler auf Ihre Terminwünsche reagieren.
Können wir die Schulung für unsere Zwecke anpassen?
Ja, sehr gerne. Genaugenommen ist das einer der Vorteile von dedizierten Unternehmensschulungen. Sie können gerne unsere Agada-Vorschläge gewichten, kürzen oder ergänzen. In der Regel findet auch ca. 2 Wochen vor der Schulung eine Abstimmung mit Ihrem Trainer durch. Auf Wunsch auch schon gerne früher.
Warum Angular?
Für Angular spricht unter anderem seine weite Verbreitung, aber auch die Tatsache, dass mit Google ein Internet-Gigant, der das Framework auch sehr intensiv nutzt, steht. Bei Google alleine existieren über 2600 darauf basierende Lösungen. Durch die weite Verbreitung existiert eine große Community und somit viel Know-How am Markt sowie (freie und kommerzielle) Produkte, die auf Angular abgestimmt sind. Außerdem bietet Angular vieles von dem, was Sie für große Anwendungen benötigen, ab Werk: Testautomatisierung, Formularverwaltung, Routing etc. Insofern erhalten Sie einen Stack, dessen Bestandteile aufeinander abgestimmt sind und langfristig zusammenspielen.
Wie kompensiert ihr unterschiedliches Vorwissen?
Die gute Nachricht vorweg: Teilnehmer mit unterschiedlichem Vorwissen sind in der Erwachenenbildung die Regel und nicht die Ausnahme. Deswegen finden Sie auf unseren Übungblättern optionale Hinweise zum Einblenden und Bonus-Übungen, für die, die etwas schneller sind. Natürlich unterstützen wir auch persönlich bei den Übungen.
Wie viele Teilnehmer sind empfehlenswert?
Falls Sie bei uns eine Firmenschulung buchen, überlassen wir diese Entscheidung prinzipiell Ihnen. Allerdings zeigt die Erfahrung, dass es nicht mehr als 15 Teilnehmer sein sollten, zumal ein Seminar sehr stark von Fragen, Diskussionen und praktischen Übungen lebt.
Welche Software benötigen wir?
Bitte installieren Sie die folgenden Software-Pakete auf Ihrem Rechner:
– NodeJS in aktueller Version (wir testen mit aktueller LTS-Version)
– Angular CLI (npm i -g @angular/cli)
– Git
– Visual Studio (frei) oder WebStorm/IntelliJ (kommerziell)
Ausgewählte zufriedene Kunden
