Warum du OpenAI nie direkt vom Frontend aufrufen solltest

Der erste Fehler, den die meisten No-Code-Entwickler machen: OpenAI API direkt von WeWeb oder FlutterFlow aufrufen, mit dem API-Key im Client exponiert.

Tue das niemals. Der API-Key ist in den Browser-Dev-Tools sichtbar, und jeder, der ihn findet, kann tausende Euro an API-Aufrufen auf deine Kosten generieren. OpenAI API-Keys haben standardmäßig keine Ratenbegrenzung.

Richtiges Muster: alle OpenAI-Aufrufe gehen über dein Backend (Supabase Edge Function, Xano-Endpunkt oder beliebiger Server). Das Frontend ruft dein Backend auf, das OpenAI mit dem als serverseitige Umgebungsvariable gespeicherten Key aufruft. Das fügt eine Indirektionsschicht hinzu und schützt deinen Key vollständig. In Deutschland ist auch die DSGVO relevant — deine Edge Function kann in der EU gehostet werden, um sicherzustellen, dass keine Nutzerdaten Europa verlassen.

Supabase Edge Functions für OpenAI konfigurieren

Supabase Edge Functions sind Deno-basierte serverlose Funktionen, die im Edge-Netzwerk laufen. Sie sind der einfachste Weg, OpenAI-Aufrufe zu proxyen.

Die grundlegende Struktur: Nachrichten und System-Prompt vom WeWeb-Frontend empfangen, OpenAI Chat Completions API mit deinem in Deno.env gespeicherten Key aufrufen und die Antwort zurückgeben. Deploye mit `supabase functions deploy ai-chat` und setze den Key mit `supabase secrets set OPENAI_API_KEY=sk-...`.

Wähle bei der Projekterstellung die Supabase EU-West-Region. Das stellt sicher, dass alle Edge Function-Ausführungen und Datenspeicherungen innerhalb der EU stattfinden — eine DSGVO-Anforderung für die meisten deutschen B2B-Kunden und eine formale Anforderung, wenn deine Kundendaten unter DSGVO-Artikel 9 als besonders schützenswert eingestuft werden.

Edge Function von WeWeb aufrufen

In WeWeb erstelle eine REST-API-Datenquelle, die auf deine Edge Function-URL zeigt (zu finden im Supabase-Dashboard unter Edge Functions). Konfiguriere sie als POST-Anfrage mit einem JSON-Body.

Erstelle eine Variable `chatMessages` (Array) und `aiResponse` (String). Beim Klick auf einen Button: 1. Nutzernachricht zu `chatMessages` hinzufügen 2. `userInput` leeren 3. Edge Function-Aktion mit `messages: chatMessages` aufrufen 4. `aiResponse` an den Antworttext binden 5. `aiResponse` in einem Textelement anzeigen

Für gestreamte Antworten (Text, der Wort für Wort erscheint), verwende den `stream: true`-Parameter im OpenAI-Aufruf und verarbeite den SSE-Stream in der Edge Function. Das ist komplexer, schafft aber eine viel bessere Nutzererfahrung — wichtig für deutsche B2B-Apps, bei denen professionelle Nutzer schnelle Reaktionszeiten erwarten.

Prompt Engineering für Produktfeatures

Die Qualität deiner KI-Funktion hängt vollständig von deinem System-Prompt ab. Generische Prompts liefern generische Ergebnisse.

**Für einen Inhaltsgenerator**: "Du bist ein Texter für [Firmenname], ein [Beschreibung] SaaS. Generiere [Output-Typ], der dieser Markenstimme entspricht: [Beispiele]. Antworte immer in diesem Format: [Struktur]. Erwähne niemals [Ausschlüsse]."

**Für einen Datenanalysten**: "Du bist ein Experten-Datenanalyst. Analysiere die bereitgestellten Daten und gib Erkenntnisse zurück als: 1) Eine-Satz-Zusammenfassung, 2) Drei Kernbefunde als Aufzählungspunkte, 3) Eine empfohlene Aktion. Antworte immer in gültigem JSON."

**Praktische Regeln**: Sei spezifisch über das Ausgabeformat (JSON, wenn das Frontend parsen muss), füge negative Einschränkungen ein ("erwähne niemals Wettbewerber"), und teste mit 20+ Inputs vor dem Launch. Für deutsche Apps: spezifiziere, dass die KI auf Deutsch antworten soll, sofern nicht anders angegeben.

Kostenkontrolle und Ratenbegrenzung

OpenAI API-Kosten steigen in der Produktion schnell. Drei Kontrollen, die vor dem Launch implementiert werden sollten:

1. **Token-Limits**: Setze `max_tokens` für jede Anfrage. Für die meisten Funktionen reichen 500 Tokens. GPT-4o kostet 2,50 USD/M Input-Tokens + 10 USD/M Output-Tokens — ein 500-Token-Limit hält die Kosten unter 0,005 USD pro Anfrage.

2. **Benutzer-Ratenbegrenzung**: In deiner Edge Function prüfe, wie viele Aufrufe der Nutzer in der letzten Stunde gemacht hat (in Supabase gespeichert). Gib 429 zurück, wenn das Limit überschritten wird.

3. **Caching**: Für deterministische Outputs (gleicher Input → gleicher Output) cache die Antworten in Supabase. Eine `ai_cache`-Tabelle mit einem Hash des Prompts als Key eliminiert redundante API-Aufrufe.

Für eine SaaS-App mit 500 MAU, die jeweils 20 KI-Anfragen pro Tag stellen: budgetiere 150–300 € pro Monat für GPT-4o.

Häufige No-Code-KI-Funktionen, die wir bauen

**KI-Inhaltsgenerierung**: Blogartikel, Produktbeschreibungen, E-Mail-Betreffzeilen. WeWeb-Formular → Edge Function → GPT-4o → Output anzeigen. Für den deutschen Markt: automatisch Produktbeschreibungen auf Deutsch für Zalando-Händler generieren.

**Intelligente Suche**: Nutzerinhalte mit OpenAI text-embedding-3-small einbetten, Vektoren in pgvector (Supabase) speichern und Ähnlichkeitssuche ausführen. Gibt semantisch relevante Ergebnisse statt Keyword-Matches zurück.

**Dokumentenzusammenfassung**: PDF hochladen → Text via Edge Function extrahieren → mit GPT-4o zusammenfassen → Zusammenfassung in Supabase speichern.

**KI-gesteuertes Onboarding**: Beim Signup 5 Fragen stellen, mit GPT-4o eine personalisierte Setup-Checkliste generieren, im Benutzerprofil speichern.

All das läuft auf dem WeWeb + Supabase + OpenAI-Stack ohne benutzerdefinierten Frontend-Code.