Schulung – RAG & LLM-Apps – React & Frontend

RAG & LLM-Apps für React- und Frontend-Entwickler:innen

RAG und LLM-Anwendungen entwickeln: Embeddings, Vektordatenbanken, Chunking, Retrieval, Evaluierung, Kosten und Datenschutz.

Dauer
6 Stunden, ein Termin
Format
Online oder vor Ort
Sprache
Deutsch oder Englisch
Teilnehmende
offene Termine oder exklusiv für Ihr Team
Abschluss
Teilnahmebescheinigung

Überblick

Das Training „RAG & LLM-Apps für React- und Frontend-Entwickler:innen“ richtet sich an Rollen wie React-Entwickler:innen in Produkt- und Agenturteams, Frontend-Engineers mit Next.js, Vite oder vergleichbaren Frameworks und Maintainer von Design-Systemen und Komponentenbibliotheken und zeigt Schritt für Schritt, wie RAG & LLM-Apps im Bereich React & Frontend produktiv, sicher und nachvollziehbar eingesetzt wird – von den Grundlagen bis zu fortgeschrittenen Workflows.

Retrieval-Augmented Generation verbindet Sprachmodelle mit Ihrem eigenen Wissen: Handbücher, Verträge, Tickets, Wikis oder Produktdaten werden durchsuchbar gemacht und dem Modell zur Laufzeit als Kontext übergeben. So entstehen Assistenten, die fundiert mit Quellenangaben antworten, statt zu halluzinieren. In dieser kompakten Schulung bauen Sie eine vollständige RAG-Pipeline von der Dokumentaufbereitung über Embeddings und Vektordatenbank bis zur Antwortgenerierung und lernen anhand eigener Testdokumente, an welchen Stellschrauben die Qualität der Antworten tatsächlich entschieden wird.

Der zweite Tag führt vom Prototyp zur belastbaren Anwendung. Sie vergleichen Chunking-Strategien, kombinieren semantische und lexikalische Suche, setzen Reranking, Metadatenfilter und Query-Umformulierung ein und messen die Wirkung mit systematischen Evaluierungen. Hinzu kommen Prompt-Caching, Kostensteuerung, Latenzoptimierung, Berechtigungskonzepte auf Dokumentebene und datenschutzkonformer Betrieb mit Blick auf DSGVO und EU AI Act. Am Ende wissen Sie, wann klassisches RAG genügt, wann ein großes Kontextfenster oder ein agentisches Retrieval besser passt und wie Sie Ihre Architektur begründet auswählen.

Frontend-Entwicklung bedeutet heute komponentenbasierte Architekturen, State Management, Server Components, Design-Systeme, Barrierefreiheit und Performance-Budgets – oft gleichzeitig. KI-Coding-Assistenten und Agenten beschleunigen genau die Arbeit, die viel Zeit frisst: Komponenten aus Designvorgaben ableiten, Class Components auf Hooks umstellen, Storybook-Stories und Tests mit der Testing Library schreiben, ARIA-Fehler beheben oder unnötige Re-Renderings aufspüren. Weil Frontend-Code stark von Konventionen lebt, kommt es auf guten Kontext an: Design Tokens, Ordnerstruktur, Styling-Ansatz und bevorzugte Bibliotheken müssen dem Assistenten bekannt sein. Im Kurs lernen Sie, diese Leitplanken zu setzen und Ergebnisse visuell wie technisch zuverlässig zu prüfen.

Das Training findet live statt – wahlweise online im virtuellen Klassenraum oder vor Ort in unseren Trainingsräumen in München, Salzburg, Berlin, Augsburg, Hannover, Bremen, Stuttgart und Kaiserslautern. Auf Wunsch kommen wir auch exklusiv für Ihr Team zusammen.

Für wen ist das Training?

  • React-Entwickler:innen in Produkt- und Agenturteams
  • Frontend-Engineers mit Next.js, Vite oder vergleichbaren Frameworks
  • Maintainer von Design-Systemen und Komponentenbibliotheken
  • Fullstack-Entwickler:innen mit Frontend-Schwerpunkt
  • UI-Engineers mit Verantwortung für Barrierefreiheit und Performance

Typische Herausforderungen, die wir adressieren

  • Inkonsistente Komponenten und Styles trotz vorhandenem Design-System
  • Schwer nachvollziehbare Re-Renderings, aufgeblähte Bundles und schwache Core Web Vitals
  • Lückenhafte Barrierefreiheit und wachsender Druck durch gesetzliche Anforderungen
  • Legacy-Code mit Class Components, veralteten Patterns und fehlenden Tests

Das können Sie nach dem Training

  • Sie bauen eine vollständige RAG-Pipeline von der Dokumentaufbereitung bis zur Antwort mit Quellenangaben.
  • Sie wählen Embedding-Modell, Chunking-Strategie und Vektordatenbank begründet aus.
  • Sie verbessern die Trefferqualität mit hybrider Suche, Reranking und Metadatenfiltern.
  • Sie messen die Qualität Ihrer Anwendung mit systematischen Evaluierungen und erkennen Regressionen.
  • Sie lassen KI-Agenten Komponenten, Stories und Tests passend zu Ihrem Design-System erzeugen.
  • Sie nutzen KI gezielt, um Barrierefreiheit, Performance und Legacy-Code systematisch zu verbessern.
  • Sie prüfen generierten Frontend-Code visuell, funktional und hinsichtlich Wartbarkeit, bevor er ausgeliefert wird.

Inhalte & Ablauf

Modul 1 Grundlagen von RAG und LLM-Anwendungen
  • Architektur einer RAG-Pipeline: Ingestion, Indexierung, Retrieval, Generierung
  • Embeddings verstehen: semantische Ähnlichkeit, Dimensionen, Modellauswahl
  • RAG, Fine-Tuning und lange Kontextfenster sinnvoll gegeneinander abwägen
  • Strukturierte Ausgaben, Quellenangaben und Umgang mit Halluzinationen
Modul 2 Dokumentaufbereitung und Chunking
  • PDF, Office-Dokumente, HTML und Tabellen zuverlässig extrahieren
  • Chunking-Strategien: feste Größe, strukturbasiert, semantisch, mit Überlappung
  • Metadaten anreichern und kontextuelle Zusammenfassungen pro Chunk erzeugen
  • Inkrementelle Aktualisierung und Löschung von Dokumenten im Index
Modul 3 Vektordatenbanken und Retrieval-Strategien
  • Vektordatenbanken und -erweiterungen im Vergleich, etwa pgvector, Qdrant, Weaviate oder OpenSearch
  • Hybride Suche aus Vektor- und Volltextsuche mit BM25
  • Reranking, Metadatenfilter und Query-Umformulierung
  • Agentisches Retrieval: das Modell entscheidet selbst über Suchschritte und Werkzeuge
Modul 4 Evaluierung und Qualitätssicherung
  • Testdatensätze aus echten Fragen aufbauen und pflegen
  • Retrieval-Metriken wie Recall und Precision sowie Antwortmetriken wie Faithfulness
  • LLM-as-a-Judge sinnvoll einsetzen und kalibrieren
  • Regressionstests bei Änderungen an Chunking, Modell oder Prompt
Modul 5 Betrieb, Kosten und Datenschutz
  • Prompt-Caching, Batch-Verarbeitung und Modellwahl zur Kostensenkung
  • Latenz optimieren und Antworten streamen
  • Berechtigungen auf Dokumentebene, Mandantentrennung und Schutz vor Prompt Injection
  • Datenschutz: Datenresidenz, Auftragsverarbeitung, Löschkonzepte, DSGVO und EU AI Act
Modul 6 Praxislabor: React & Frontend
  • Komponenten aus Designvorgaben bauen
  • Tests mit der Testing Library
  • Barrierefreiheit prüfen und verbessern
  • Legacy-Code modernisieren
  • Performance optimieren
  • Formulare und Datenabruf
Modul 7 Datenschutz, Qualität & Transfer in den Alltag
  • Seit Geltung des Barrierefreiheitsstärkungsgesetzes müssen viele digitale Angebote barrierefrei sein – generierter UI-Code muss entsprechend geprüft werden. Achten Sie zudem auf Lizenzen übernommener Komponenten und Icons, auf keine Secrets im Client-Bundle und darauf, dass Tracking- oder Consent-Logik den Vorgaben von DSGVO und TTDSG entspricht.
  • Spielregeln für den sicheren KI-Einsatz im Team
  • Ergebnisse prüfen: Fakten, Quellen, Tests und Vier-Augen-Prinzip
  • Persönlicher Umsetzungsplan für die nächsten 30 Tage
  • Offene Fragen, Ausblick und Ressourcen zum Weiterlernen

Praxisszenarien aus Ihrem Bereich

Komponenten aus Designvorgaben bauen

Aus Screenshots, Design-Spezifikationen oder Figma-Exporten erzeugt der Assistent typisierte React-Komponenten, die vorhandene Design Tokens und Bibliotheken nutzen, und ergänzt passende Storybook-Stories für alle Zustände. Abweichungen vom Design werden iterativ korrigiert.

Tests mit der Testing Library

Die KI schreibt nutzerzentrierte Komponententests mit React Testing Library und Vitest oder Jest, simuliert Interaktionen, mockt API-Aufrufe und deckt Lade-, Fehler- und Leerzustände ab. Implementierungsdetails bleiben dabei bewusst außen vor.

Barrierefreiheit prüfen und verbessern

Der Agent analysiert Komponenten auf semantisches HTML, ARIA-Attribute, Fokusführung und Kontraste, wertet axe-Ergebnisse aus und behebt Befunde nachvollziehbar entlang der WCAG-Kriterien. Dazu gehören auch Tastaturbedienung und Screenreader-Ausgaben.

Legacy-Code modernisieren

Class Components werden auf Funktionskomponenten mit Hooks umgestellt, Prop-Drilling durch Context oder ein State-Management-Konzept ersetzt und PropTypes durch TypeScript-Typen abgelöst – mit Tests als Sicherheitsnetz.

Performance optimieren

Die KI identifiziert unnötige Re-Renderings, schlägt Memoization, Code Splitting und Lazy Loading vor, analysiert Bundle-Reports und erklärt, wie sich Maßnahmen auf Kennzahlen wie LCP und INP auswirken.

Formulare und Datenabruf

Komplexe Formulare mit Validierungsschemas, Fehlermeldungen und optimistischen Updates entstehen ebenso wie Datenabruf-Logik mit Caching, Retry und sauberem Umgang mit Lade- und Fehlerzuständen. Bestehende Bibliotheken für Formulare und Datenabruf werden konsequent genutzt.

Mögliche Praxisprojekte im Kurs

Interaktives KPI-Dashboard

Ein React-Dashboard mit Diagrammen, Filtern und responsivem Layout, das Daten aus einer REST-API lädt und vollständig per KI-Agent aus einer kurzen Spezifikation entsteht.

Komponentenbibliothek mit Storybook

Eine kleine, barrierefreie Komponentenbibliothek mit Buttons, Dialogen und Formularfeldern, inklusive Design Tokens, Storybook-Dokumentation und automatisierten Tests. Sie dient als Grundlage für einheitliche Oberflächen in mehreren Projekten.

Accessibility-Checker für Pull Requests

Ein Skript, das Storybook-Stories automatisiert mit axe prüft und die Befunde als übersichtlichen Bericht für Pull Requests aufbereitet. Neue Barrierefreiheitsprobleme fallen so schon vor dem Merge auf.

Voraussetzungen

Solide Programmierkenntnisse in Python (oder alternativ TypeScript), Grundkenntnisse in Datenbanken und REST-APIs sowie erste Erfahrungen mit LLM-APIs. Praktische Erfahrung mit React und modernem JavaScript oder TypeScript sowie Grundkenntnisse in CSS, npm und Git.

Technische Voraussetzungen

Laptop mit Python, Git, Docker und Code-Editor sowie API-Zugang zu mindestens einem LLM- und Embedding-Anbieter. Zugangsdaten für die Übungen können bei Bedarf gestellt werden.

Datenschutz & Compliance

Seit Geltung des Barrierefreiheitsstärkungsgesetzes müssen viele digitale Angebote barrierefrei sein – generierter UI-Code muss entsprechend geprüft werden. Achten Sie zudem auf Lizenzen übernommener Komponenten und Icons, auf keine Secrets im Client-Bundle und darauf, dass Tracking- oder Consent-Logik den Vorgaben von DSGVO und TTDSG entspricht.

Termine & Standorte

Pro Standort schlagen wir Ihnen einen Termin in rund vier Wochen vor. Ihr Wunschtermin ist jederzeit möglich.

  • München Di, 15. Dezember 2026 6 Std. Anfragen
  • Salzburg Fr, 11. Dezember 2026 6 Std. Anfragen
  • Berlin Do, 10. Dezember 2026 6 Std. Anfragen
  • Augsburg Mi, 16. Dezember 2026 6 Std. Anfragen
  • Hannover Fr, 11. Dezember 2026 6 Std. Anfragen
  • Bremen Fr, 11. Dezember 2026 6 Std. Anfragen
  • Stuttgart Di, 15. Dezember 2026 6 Std. Anfragen
  • Kaiserslautern Do, 10. Dezember 2026 6 Std. Anfragen
  • Online Mi, 16. Dezember 2026 6 Std. Anfragen

Häufige Fragen

Wann ist RAG besser als Fine-Tuning?

RAG eignet sich, wenn ein Modell auf aktuelles, umfangreiches oder häufig wechselndes Wissen zugreifen und Quellen angeben soll. Fine-Tuning verändert eher Stil, Format oder spezialisiertes Verhalten. In vielen Projekten ist RAG der schnellere, günstigere und besser kontrollierbare Weg, gelegentlich ergänzt durch Fine-Tuning für Spezialaufgaben.

Welche Vektordatenbank sollten wir verwenden?

Das hängt von Datenmenge, bestehender Infrastruktur, Filteranforderungen und Betriebsmodell ab. Wer bereits PostgreSQL nutzt, kommt mit pgvector oft weit, spezialisierte Systeme punkten bei großen Datenmengen und hybrider Suche. Im Kurs vergleichen Sie mehrere Optionen praktisch und leiten Kriterien für Ihre Entscheidung ab.

Wie lässt sich RAG datenschutzkonform betreiben?

Wichtig sind die Wahl von Anbietern mit passender Datenresidenz und Auftragsverarbeitungsvertrag, Berechtigungsprüfungen auf Dokumentebene, ein Löschkonzept für Index und Logs sowie Datenminimierung bei personenbezogenen Inhalten. Für sensible Daten kommen auch selbst betriebene Modelle infrage. Wir behandeln diese Optionen anhand realistischer Architekturen.

Kann die KI Designs pixelgenau umsetzen?

KI-Assistenten setzen Layouts aus Screenshots oder Spezifikationen inzwischen erstaunlich gut um, besonders wenn sie Ihre Design Tokens und Komponenten kennen. Pixelgenauigkeit entsteht aber erst durch Iteration: Im Kurs lernen Sie, visuelle Abweichungen gezielt zurückzumelden und Storybook sowie visuelle Tests als Kontrollinstanz einzusetzen.

Spielt das verwendete Framework eine Rolle?

Der Kurs ist auf React ausgerichtet, die Arbeitsweisen lassen sich aber auf Next.js, Remix oder Vite-basierte Setups übertragen. Wir zeigen, wie Sie Framework-spezifische Regeln wie Server- und Client-Komponenten oder Routing-Konventionen in Anweisungsdateien festhalten, damit der Assistent passenden Code erzeugt. Die Grundprinzipien bleiben dabei gleich.

Was kostet die Schulung „RAG & LLM-Apps für React- und Frontend-Entwickler:innen“?

Die Schulung kostet pauschal 949 € zzgl. gesetzl. MwSt. pro Teilnehmer:in – unabhängig davon, ob sie online oder vor Ort stattfindet. Enthalten sind 6 Stunden Live-Training mit Trainer:in, Kursunterlagen, Übungsumgebung und Teilnahmebescheinigung.

Kann ich einen eigenen Wunschtermin angeben?

Ja. Für jeden Standort schlagen wir Ihnen einen Termin in rund vier Wochen vor. Im Anfrageformular können Sie aber jederzeit einen Wunschtermin oder Zeitraum im Freitext angeben – wir prüfen die Verfügbarkeit und melden uns innerhalb eines Werktags.

Findet der Kurs online oder vor Ort statt?

Beides ist möglich: live online im virtuellen Klassenraum oder vor Ort in München, Salzburg, Berlin, Augsburg, Hannover, Bremen, Stuttgart und Kaiserslautern. Auf Wunsch führen wir das Training auch exklusiv für Ihr Team durch.

Kann der Kurs auf unser Team zugeschnitten werden?

Ja. Maßgeschneiderte Kurse kosten ca. 4.500 € mehr, je nach Thema und nach Absprache. Wir stimmen Inhalte, Beispiele und Übungen vorab mit Ihnen ab.

Weitere Kurse für React- und Frontend-Entwickler:innen

Weitere Kurse zu RAG & LLM-Apps

Alle 29 Kurse zu RAG & LLM-Apps

RAG & LLM-Apps – MünchenRAG & LLM-Apps – SalzburgRAG & LLM-Apps – BerlinRAG & LLM-Apps – AugsburgRAG & LLM-Apps – HannoverRAG & LLM-Apps – BremenRAG & LLM-Apps – StuttgartRAG & LLM-Apps – KaiserslauternRAG & LLM-Apps – Online