Frontend & Angular

Angular für KI-Anwendungen: ein reaktives, beobachtbares und sicheres Frontend bauen

Streaming, Zwischenzustände, menschliche Freigabe, Fehler und Beobachtbarkeit: Frontends von KI-Anwendungen brauchen eine eigene Architektur.

2 Min. Lesezeit

  • Angular
  • RxJS
  • Signals
  • SSE
  • WebSocket
  • AI UX
Angular-Frontend einer KI-Anwendung

Eine KI-Oberfläche ist kein klassisches CRUD

Eine KI-Antwort kann mehrere Sekunden dauern, schrittweise eintreffen, teilweise scheitern oder eine menschliche Freigabe erfordern. Die Oberfläche sollte diese Zustände ausdrücklich darstellen.

Nur einen Spinner bis zur endgültigen Antwort anzuzeigen, sorgt für eine schlechte Erfahrung und erschwert die Fehlersuche.

Das Frontend sollte Vorbereitung, Modellaufruf, Generierung, Freigabe, Fehler und Abbruch unterscheiden.

Signals und RxJS ergänzen sich

Signals eignen sich sehr gut für lokalen UI-Zustand: aktuelles Ergebnis, Status, Filter, Auswahl oder Sichtbarkeit.

RxJS bleibt besonders geeignet für asynchrone Datenströme, fortlaufende Ereignisse, verzögerte Suchen und das Zusammenführen von Quellen.

In einer KI-Anwendung können beide nebeneinander bestehen: RxJS für die Orchestrierung der Datenströme und Signals, um den Templates einfachen Zustand bereitzustellen.

Streaming über SSE oder WebSocket

Für schrittweise Antworten genügt oft SSE, wenn der Server einen einseitigen Datenstrom an den Browser sendet. WebSocket ist sinnvoll, wenn die Kommunikation bidirektional und dauerhaft sein muss.

Angular-Komponenten sollten sich nicht direkt um Transportdetails kümmern. Ein eigener Service sollte technische Ereignisse in fachliche Ereignisse übersetzen.

Diese Abstraktion ermöglicht Protokollwechsel und Wiederverbindungslogik, ohne Transportfragen über die ganze Oberfläche zu verteilen.

Quellen und Konfidenz immer anzeigen

Stammt eine Antwort aus einem RAG oder einem Agenten, sollten Nutzer nachvollziehen können, woher wichtige Informationen kommen.

Das Frontend kann zitierte Dokumente, die Konfidenz, die vom Agenten ausgeführten Aktionen und zu prüfende Punkte anzeigen.

Diese Transparenz stärkt das Vertrauen und verringert das Risiko, generierte Inhalte als absolute Wahrheit zu betrachten.

Sicherheit nie dem Frontend überlassen

Einen Button oder ein Feld in Angular auszublenden ist keine Sicherheitsmaßnahme. Berechtigungen müssen immer im Backend durchgesetzt werden.

Das Frontend kann Rollen nutzen, um die Benutzererfahrung zu verbessern, aber jede API, die Daten liefert oder Aktionen auslöst, muss die Autorisierung erneut prüfen.

Diese Regel ist umso wichtiger, wenn die Oberfläche Aktionen von KI-Agenten auslösen kann.

Das Frontend nach Fachdomänen strukturieren

Eine nachhaltige Angular-Architektur vermeidet einen einzigen globalen Komponentenordner für die gesamte Anwendung. Funktionen sollten nach Fachdomäne gruppiert werden.

Jede Domäne kann Seiten, Komponenten, Services, Modelle und API-Adapter bereitstellen, während gemeinsame UI-Elemente in einer übergreifenden Schicht bleiben.

Diese Struktur verbessert Lazy Loading, Tests, Wartung und die spätere Weiterentwicklung zu Modulen oder Micro-Frontends, wenn das Produkt wächst.