KI-Anwendungen mit React und OpenAI: Schulung mit AI SDK

LLM-Anwendungen mit React einordnen

• Typische KI-Oberflächen: Chat, Textvervollständigung, Formularhilfe, generative UI
• Architektur: React-Client, Next.js-Server und OpenAI-API – wo Schlüssel und Prompts liegen
• OpenAI-Modelle auswählen: schnelle Modelle, Reasoning-Modelle, Preise je Million Tokens
• Das AI SDK von Vercel: Core-Funktionen, UI-Hooks und Provider wie @ai-sdk/openai
• Offizielles openai-Paket oder AI SDK: Funktionsumfang, Abhängigkeit, Anbieterwechsel

Projekt-Setup mit Next.js und OpenAI-Schlüssel

• Next.js-Projekt mit create-next-app, App Router, TypeScript und Tailwind anlegen
• Pakete ai, @ai-sdk/openai, @ai-sdk/react und zod installieren, Versionen festschreiben
• Umstieg auf AI SDK 7: ESM-only ab Node.js 22, system wird instructions, onFinish wird onEnd
• OpenAI-API-Schlüssel je Projekt anlegen, Ausgabenlimit und Rate Limits im Dashboard setzen
• Schlüssel in .env.local ohne NEXT_PUBLIC_, Modellzugriff mit server-only absichern
• Route Handler app/api/chat/route.ts mit streamText und Streaming-Antwort
• Systemprompt über instructions, Temperatur und maximale Ausgabelänge serverseitig festlegen

Textvervollständigung und Chat-Oberfläche

• useCompletion für Einzelaufgaben: zusammenfassen, umformulieren, Betreffzeilen vorschlagen
• useChat ab AI SDK 5: Nachrichten senden mit sendMessage, Transport zur eigenen Route
• Nachrichten über parts rendern: Text, Reasoning, Tool-Aufrufe und Quellen
• Ladezustände über status, Abbrechen mit stop, Wiederholen und Fehlermeldungen
• Eingabe, Verlauf und automatisches Scrollen mit React State und useRef bauen
• Markdown-Antworten sicher rendern, Codeblöcke hervorheben, kein ungeprüftes HTML
• Bilder und PDFs als Dateianhang an das Modell übergeben
• Chatverläufe speichern und wieder laden: Nachrichten-IDs, Datenbank, Löschfristen

Server Actions und Streaming in React

• Server Action mit 'use server' für einmalige Modellaufrufe, etwa Texte verbessern
• Server Actions als öffentliche Endpunkte: Anmeldung, Eingabelänge und Rate Limit prüfen
• Streams in React verarbeiten: Textdeltas, Suspense-Grenzen, schrittweise Anzeige
• Route Handler oder Server Action: welcher Weg für Streaming, Abbruch und Wiederaufnahme passt
• Zeitlimits beim Hosting: lange Streams auf Vercel-Funktionen und eigenem Node-Server

Strukturierte Daten generieren und streamen

• Objekte nach Zod-Schema erzeugen: generateObject bzw. generateText mit output
• Strukturierte Ausgaben der OpenAI-API (JSON Schema, Strict Mode) hinter dem SDK verstehen
• Erzeugte Objekte typisiert an den Client zurückgeben und darstellen
• Objekte mit streamObject streamen: Teilobjekte, fehlende Felder, Endvalidierung
• useObject aus @ai-sdk/react (ohne experimental_): Teilobjekte anzeigen, Formulare live befüllen
• Klassifikation mit enum-Schemas und Listen von Einträgen als Array-Ausgabe
• Fehlerfälle: Schema nicht erfüllt, Ablehnung durch das Modell, gezielte Wiederholung

Tool Calling und generative Oberflächen

• Werkzeuge mit tool() definieren: Beschreibung, Zod-Eingabeschema und execute
• Mehrstufige Abläufe mit stopWhen: isStepCount(n) begrenzen (bis AI SDK 6: stepCountIs)
• Tool-Ergebnisse im Client als eigene React-Komponenten rendern (Generative UI)
• Komponenten-Streaming mit streamUI aus ai/rsc: experimentell, im Bestandscode einordnen, neu mit AI SDK UI
• Schreibende Werkzeuge erst nach Bestätigung durch Nutzer:innen ausführen

Eigene Daten anbinden mit RAG

• Embeddings mit embed und embedMany über ein OpenAI-Embedding-Modell erzeugen
• Dokumente in Abschnitte teilen, in PostgreSQL mit pgvector speichern und durchsuchen
• Suche als Werkzeug für das Modell anbieten, Fundstellen als Quellen in der Antwort zeigen
• Zugriffsrechte bei der Suche beachten: nur Dokumente, die die Person sehen darf

Kosten, Sicherheit und Evaluierung

• Tokenverbrauch über usage (in AI SDK 7 über alle Schritte summiert) protokollieren, Budgets je Person und Funktion
• Prompt Injection über Eingaben, Dokumente und Tool-Ergebnisse; Werkzeuge mit minimalen Rechten
• Datenschutz: personenbezogene Daten im Prompt, Auftragsverarbeitung, Datenaufbewahrung
• Route Handler und Werkzeuge mit MockLanguageModelV4 aus ai/test ohne API-Kosten testen
• Evals: Testfragen mit erwarteten Ergebnissen, Vergleich vor jedem Modell- oder Promptwechsel
• Kennzeichnung KI-generierter Inhalte und Transparenzpflichten nach dem EU AI Act

Oberflächen entwerfen mit v0

• v0.app von Vercel: Oberflächen aus Textbeschreibung, Screenshot oder Mockup erzeugen
• Einzelne UI-Komponente mit v0 generieren und per GitHub-Sync ins eigene Repository übernehmen
• Vollständige Oberfläche mit v0 entwerfen, generierten Code lesen und aufräumen
• Neue Oberfläche iterativ erzeugen: Varianten vergleichen, Barrierefreiheit nachprüfen
• v0-Entwurf an Design-Tokens und Komponenten des eigenen Projekts anpassen

React-KI-Anwendungen mit Copilot als Agent bauen

• AI SDK 7 in .github/copilot-instructions.md festlegen, Altmuster wie handleSubmit oder stepCountIs verbieten
• Agent prüft Route Handler und tool()-Definitionen mit Mock-Modellen – ohne echten OPENAI_API_KEY
• Vom Agenten erzeugte Werkzeuge auf Berechtigungsprüfung und Zod-Validierung des Inputs reviewen
• Jede Prompt-Änderung des Agenten mit neuen Eval-Fällen und Vergleich mit dem bisherigen Prompt abnehmen
• stopWhen mit isStepCount, Ausgabelänge und Modellname im Agenten-Diff kontrollieren, bevor Kosten entstehen

Praxisprojekt: Assistent für Reisekostenbelege

• Quittungsfoto hochladen, Betrag, Datum und Kategorie als Zod-Objekt live in ein Formular streamen
• Fragen zur Reisekostenrichtlinie per RAG beantworten, jede Antwort mit Fundstelle
• Werkzeug prüft Pauschalen und legt den Abrechnungsentwurf erst nach Bestätigung an
• Oberfläche aus einem v0-Entwurf, Abnahme mit Mock-Tests, zehn Eval-Belegen und Kostenlimit

Lernziele

• Sie streamen Antworten von OpenAI-Modellen über Next.js-Route-Handler und Server Actions in eine React-Oberfläche
• Sie bauen Chat- und Vervollständigungsoberflächen mit useChat und useCompletion inklusive Lade-, Abbruch- und Fehlerzuständen
• Sie erzeugen und streamen strukturierte Daten nach Zod-Schemas und validieren sie im Client
• Sie definieren Werkzeuge für Tool Calling und rendern deren Ergebnisse als React-Komponenten
• Sie binden eigene Dokumente per Embeddings und Vektorsuche an und zeigen Quellen an
• Sie begrenzen Kosten, sichern gegen Prompt Injection ab und messen Antwortqualität mit Evals

Zielgruppe

• React-Entwickler:innen, die KI-Funktionen mit OpenAI-Modellen in Webanwendungen einbauen
• Fullstack-Teams mit Next.js, die eine bestehende OpenAI-Anbindung auf das AI SDK umstellen oder absichern wollen
• Technische Produktverantwortliche, die Aufwand, Kosten und Risiken von LLM-Funktionen einschätzen müssen