Kursbeschreibung
Dieses Advanced-Seminar zeigt Dir, wie Du KI-Funktionen als verlässliche Produktoberfläche baust, statt als experimentellen Chat. Du entwickelst ein Design- und Technikgerüst, das typische KI-Risiken im Frontend abfedert: unklare Verantwortlichkeit, fehlende Nachweise, unvorhersehbare Latenz und schwierige Fehlerbilder. Du startest mit konkreten UI-Patterns für LLM-Anwendungen, darunter Prompt-Formulare, Chat- und Canvas-Ansichten sowie Agenten-UI mit klaren Zuständen und Handlungsoptionen. Du integrierst Guardrails, sichere Defaults und Human-in-the-Loop, damit Nutzer Ergebnisse prüfen, korrigieren und freigeben können. Im technischen Teil setzt Du Streaming sauber um: Token-Streaming, Abbruch, Retry, Backpressure und Degradation bei Rate Limits. Du lernst, wie Du Caching und Datenabfragen so strukturierst, dass die Oberfläche schnell bleibt und trotzdem konsistent ist, inklusive Prefetch und Invalidation. RAG-Frontends werden praxisnah behandelt: Suche mit Facetten, Snippets und Highlighting, Quellenansicht mit Zitierstellen und Vorschau sowie ein Kontext-Composer, der Auswahl und Token-Budget sichtbar macht. Security und Privacy-by-Design sind durchgängig: keine Secrets im Client, Proxy-Patterns, Content-Security-Policy, Sanitizing und sichere Markdown-Renderer. Zum Abschluss baust Du eine Referenzanwendung mit Feedback-Telemetrie, Tracing und A/B-Tests und nimmst eine Abnahmecheckliste mit, die UX, Security, Metrics und Kosten abdeckt.
Die wichtigsten Themen im Überblick
- KI-UX mit Guardrails und sicherem Undo gestalten
- Streaming-UIs mit SSE, Retry und Backpressure bauen
- RAG-Frontends mit Suche, Quellen und Kontext umsetzen
- Zitate, Confidence und Grenzen im UI sichtbar machen
- Nutzerdaten mit Consent und PII-Redaction schützen
- Prompt-Injection-Folgen durch sichere UI-Patterns vermeiden
- KI-Features mit Web Vitals, Tracing und Feedback messen
- Chat-UI mit Quellen, Telemetrie und Kostenkontrolle implementieren
Zielgruppe
- Frontend-Entwicklerinnen und Frontend-Entwickler mit Berufserfahrung
- Tech Leads und Softwarearchitektinnen und Softwarearchitekten mit UI-Verantwortung
- Product Engineers in Teams mit LLM- oder RAG-Features
- UX Engineers, die KI-Interaktionen umsetzen und messen
- Für alle, die KI-Oberflächen bauen wollen, die nachvollziehbar, sicher und performant sind
Voraussetzung für die Schulung
- Sehr gute Kenntnisse in Frontend-Entwicklung (Komponenten, State, API-Integration).
- Grundverständnis von HTTP und Authentifizierung ist hilfreich.
Kursinhalte
- KI-UX, die Nutzerverhalten wirklich lenkt
- LLM-Interaktionen: Prompt-Formulare, Chat, Canvas, Agenten-UI
- Progressive Disclosure, Guardrails, Undo/Redo, sichere Defaults
- Erklärbarkeit im UI: Quellen, Zitate, Confidence, Grenzen
- Human-in-the-Loop: Review, Freigabe, Feedback-Loops
- Streaming, Latenz und gefühlte Performance
- Token-Streaming (SSE/WebSocket) und Abbruch, Retry, Backpressure
- Optimistic UI, Skeletons, Staged Rendering, Virtualisierung
- Caching-Strategien: SWR, Query Keys, Invalidation, Prefetch
- Messung: Web Vitals, Interaction to Next Paint, Tracing
- RAG-Frontends: Suche, Quellen, Kontext
- Such- und Retrieval-UI: Facetten, Snippets, Highlighting
- Quellenansicht: Zitierstellen, Dokumentvorschau, Diff
- Kontext-Composer: Auswahl, Gewichtung, Token-Budget sichtbar machen
- Evaluation im UI: Side-by-Side, Regression Checks
- Sicherheit, Privacy und Policy-by-Design
- PII-Redaction, Consent, Datenminimierung im Frontend
- Prompt-Injection Awareness: UI-Hinweise, sichere Render-Pipelines
- Secrets & Keys: niemals im Client, sichere Proxy-Patterns
- Content-Security-Policy, Sanitizing, sichere Markdown-Renderer
- Architektur und Delivery für KI-Features
- Feature Flags, Experimente, A/B-Tests für KI-UX
- Observability: Logs, Metrics, User Feedback, Cost-Tracking
- Design Systems für KI-Komponenten: Chat, Citation, Feedback
- Release-Strategien: Canary, Rollback, Prompt/Model Versioning
- Praxis: End-to-End KI-Frontend als Referenz
- Implementierung einer Streaming-Chat-UI mit Quellen
- Feedback-Mechanik: Daumen, Labels, Freitext, Telemetrie
- Fehlerbilder: Halluzination, Timeout, Rate Limit, Degradation
- Abnahmecheckliste: UX, Security, Metrics, Kosten
