Wie lange dauert es, einen GPT-4-gesteuerten Chatbot in einer WeWeb-App zu bauen?

Ein einfacher Chatbot mit Konversationszustand und Supabase Edge Function Proxy dauert 2–3 Tage. Eine Produktionsversion mit persistentem Verlauf, RAG-Wissensbasis und Behandlung der EU KI-Verordnungsanforderungen (Transparenzkennzeichnung) dauert 1–2 Wochen.

Was kostet ein KI-Chatbot pro Monat für ein SaaS mit 500 aktiven Nutzern?

Mit 500 Nutzern, die täglich 10 Nachrichten senden, landen die GPT-4o-Kosten bei etwa 75 € pro Monat. Nutze GPT-4o mini für einfache Fragen und reserviere GPT-4o für komplexes Reasoning — eine übliche Optimierung, die die Kosten halbiert ohne merkliche Qualitätseinbuße.

Verlangt die EU KI-Verordnung, dass wir den Chatbot für deutsche Nutzer als KI kennzeichnen?

Ja. Die EU KI-Verordnung verlangt ab 2025, dass Chatbots sich gegenüber Nutzern klar als KI-Systeme identifizieren. Füge eine einleitende Begrüßung hinzu wie "Ich bin ein KI-Assistent" und füge in der Datenschutzrichtlinie einen Hinweis auf KI-gestützte Kommunikation ein — das ist eine Anforderung, keine Option.

Wie verhindert man, dass der Chatbot sensible Daten anderer Nutzer preisgibt?

Injiziere niemals Daten anderer Nutzer in den Kontext. Der System-Prompt soll den Bot anweisen, nur auf Daten des aktuellen Nutzers zu antworten. Implementiere Row-Level-Security in Supabase, damit die Edge Function nur Zeilen abrufen kann, die dem authentifizierten Nutzer gehören — die Datenbank garantiert die Isolation auf technischer Ebene.

KI-Chatbot ohne Code erstellen: OpenAI + Supabase + WeWeb

Die Architektur

Ein Produktions-KI-Chatbot hat vier Komponenten:

1. **Chat-UI**: Eingabefeld, Nachrichtenverlauf, Ladezustände, Fehlerbehandlung 2. **Konversationszustand**: Ein Array von Nachrichten (Rolle + Inhalt) im Frontend-Zustand gespeichert 3. **Backend-Proxy**: Eine Supabase Edge Function oder ein Xano-Endpunkt, der OpenAI aufruft 4. **System-Prompt**: Der Anweisungssatz, der die Persona, das Wissen und die Einschränkungen deines Chatbots definiert

Der Konversationszustand ist das wichtigste Konzept. OpenAIs API ist zustandslos — jede Anfrage muss die gesamte Konversationshistorie enthalten. Dein Frontend hält diese Geschichte aufrecht und sendet sie mit jeder Nachricht. Für deutsche B2B-Apps: speichere Konversationen in Supabase EU-Region für DSGVO-Konformität.

Chat-UI in WeWeb bauen

In WeWeb erstelle eine seitenstufige Variable `messages` (Array, Standard leer). Füge zwei Komponenten hinzu:

**Nachrichtenliste**: Eine Repeating Group, die an `messages` gebunden ist. Jedes Element hat ein bedingtes Erscheinungsbild — Nutzernachrichten rechtsbündig mit Primärfarb-Hintergrund, Assistentennachrichten linksbündig mit neutralem Hintergrund. Binde den Text an `item.content`.

**Eingabebereich**: Eine Texteingabe, die an eine `userInput`-Variable gebunden ist, plus einen "Senden"-Button. Beim Klick: (1) `{role: "user", content: userInput}` zu `messages` hinzufügen, (2) `userInput` leeren, (3) API-Aktion aufrufen, (4) Antwort als `{role: "assistant", content: response}` hinzufügen.

Füge einen Lade-Spinner hinzu, der während des API-Aufrufs angezeigt wird. Gutes UX-Detail, das von deutschen B2B-Nutzern erwartet wird.

Einen effektiven System-Prompt schreiben

Der System-Prompt bestimmt alles über das Verhalten deines Chatbots. Ein guter Produktions-System-Prompt enthält:

- **Rolle**: "Du bist ein Kundensupport-Agent für Acme SaaS, ein Projektmanagement-Tool." - **Wissen**: "Du hilfst Nutzern bei: Projekte erstellen, Teammitglieder einladen, Integrationen konfigurieren und Abrechnungsfragen." - **Einschränkungen**: "Beantworte nur Fragen zu Acme SaaS. Erwähne niemals Konkurrenzprodukte. Erfinde niemals Funktionen, die nicht existieren." - **Format**: "Halte Antworten unter 100 Wörtern. Verwende Aufzählungslisten für Schritte. Antworte auf Deutsch, sofern der Nutzer nicht in einer anderen Sprache schreibt." - **Eskalierung**: "Wenn der Nutzer Frustration ausdrückt oder einen Abrechnungsfehler erwähnt, sage: 'Ich verbinde dich mit unserem Team' und löse den Eskalierungs-Flow aus."

Für deutsche Apps: füge die Anweisung hinzu, standardmäßig auf Deutsch zu antworten, mit der Möglichkeit, die Sprache zu wechseln.

Persistenten Kontext hinzufügen

Der einfache Chatbot vergisst alles, wenn die Seite aktualisiert wird. Um ihn smarter zu machen:

**Nutzerkontextinjektion**: Wenn die Chatbot-Sitzung startet, hole die Kontodaten des Nutzers (Plan, Nutzung, letzte Aktivität) und füge sie dem System-Prompt hinzu: "Der aktuelle Plan des Nutzers ist Pro. Ihre letzte Aktivität war vor 3 Tagen. Sie haben 2 aktive Projekte."

**Konversationspersistenz**: Speichere Nachrichten in einer Supabase-Tabelle (chatbot_sessions) mit user_id und session_id. Beim Seitenladen hole die letzten N Nachrichten und fülle das messages-Array vorab.

**Wissensbasis**: Für Produktdokumentation speichere Artikel in Supabase mit Embeddings (mit pgvector). Bevor du GPT-4o aufrufst, führe eine Ähnlichkeitssuche durch und injiziere die relevantesten Artikel in den System-Prompt. Das nennt sich RAG (Retrieval Augmented Generation) und verbessert die Antwortgenauigkeit dramatisch.

Kosten und Performance in der Produktion

Für ein SaaS mit 500 aktiven Nutzern, die jeweils 10 Nachrichten pro Tag senden:

- Durchschnittliche Nachricht: 50 Tokens Input + 100 Tokens Output - GPT-4o-Preise: 2,50 USD/M Input + 10 USD/M Output - Tageskosten: 500 × 10 × 150 Tokens = 750.000 Tokens = ~2,50 USD/Tag = ~75 €/Monat

Zur Kostenkontrolle: implementiere ein Sitzungs-Token-Budget (höre auf, Verlaufsnachrichten hinzuzufügen, wenn das Gespräch 2.000 Tokens überschreitet, beginne mit der Zusammenfassung alter Nachrichten). Nutze GPT-4o mini für einfache Anfragen (0,15 USD/M Input) und reserviere GPT-4o für komplexe.

Antwortzeit: GPT-4o antwortet in 1–3 Sekunden. Füge einen Tippindikator hinzu, um Erwartungen zu setzen. Für Unter-Sekunden-Erlebnisse implementiere Streaming.

DSGVO und EU KI-Verordnung für KI-Chatbots

Für deutsche Apps gibt es zusätzliche Überlegungen für KI-Chatbots:

**Datensparsamkeit**: Speichere nicht mehr Konversationshistorie als notwendig. Implementiere automatische Löschung von Konversationen, die älter als dein Bedarf sind (z.B. 90 Tage).

**Transparenz**: Informiere Nutzer, dass sie mit einer KI sprechen. Die EU KI-Verordnung verlangt eine klare Kennzeichnung von KI-Interaktionen ab 2025.

**Keine sensiblen Daten**: Konfiguriere den System-Prompt, aktiv abzuweisen, wenn Nutzer sensible personenbezogene Daten, Steueridentifikationsnummern, Bankdaten oder Gesundheitsdaten im Chat teilen.

**EU-Datenzentralisierung**: Alle Konversationsprotokolle in Supabase EU-Region. Deine Edge Function in EU-Region. OpenAI verarbeitet Daten außerhalb der EU — dokumentiere dies in deiner Datenschutzrichtlinie und dem Auftragsverarbeitungsvertrag mit OpenAI.