De architectuur van een productionele AI-chatbot

Een productionele chatbot heeft meer nodig dan "stuur bericht naar OpenAI, toon antwoord". Je hebt nodig:

1. **Gebruikersauthenticatie** — zodat berichten aan de juiste gebruiker worden gekoppeld 2. **Conversatiegeheugen** — zodat de AI zich de context herinnert binnen een gesprek 3. **Berichtenopslag** — zodat gebruikers oude gesprekken kunnen raadplegen 4. **Backend-proxy** — zodat je API-sleutel nooit zichtbaar is voor de client 5. **Kostenbeheer** — zodat je niet verrast wordt door een rekening van duizenden euro's

De stack: **Supabase** (auth + database), **Supabase Edge Functions** (OpenAI-proxy), **WeWeb** (chatinterface).

Stap 1: Datamodel voor chatgeschiedenis

Maak twee tabellen in Supabase:

`conversations` tabel: id, user_id, title, created_at, updated_at `messages` tabel: id, conversation_id, role ('user' of 'assistant'), content, tokens_used, created_at

Activeer Row-Level Security op beide tabellen. De policy: gebruikers kunnen alleen hun eigen gesprekken en berichten lezen en schrijven.

De `tokens_used`-kolom in messages is cruciaal voor kostenbeheer — je kunt dan dagelijks en maandelijks token-gebruik per gebruiker aggregeren en limieten afdwingen.

Stap 2: Supabase Edge Function als OpenAI-proxy

De Edge Function doet drie dingen: authenticeer de aanroepende gebruiker, bouw de berichtenhistorie op uit Supabase, en stuur het naar OpenAI.

De logica: ontvang de conversation_id en de nieuw ingevoerde gebruikersboodschap, haal de laatste N berichten op uit de `messages`-tabel voor die conversation_id (dit is het "geheugen"), bouw de messages-array op met systeemprompt + geschiedenis + nieuw bericht, roep de OpenAI API aan, sla zowel het gebruikersbericht als het assistent-antwoord op in de `messages`-tabel, en retourneer het antwoord.

Deploy de functie en stel OPENAI_API_KEY in als een geheim. Voeg ook een check toe: als de gebruiker zijn dagelijkse tokenlimiet heeft bereikt, retourneer een 429 in plaats van OpenAI aan te roepen.

Stap 3: De chatinterface in WeWeb

Bouw de chatinterface in WeWeb met de volgende componenten:

**Gesprekslijst (links)**: Een ListView gebonden aan de `conversations`-tabel gefilterd op de huidige gebruiker. Klikken op een gesprek stelt de actieve conversation_id in als paginastatus.

**Berichtenweergave (rechts)**: Een ListView gebonden aan `messages` gefilterd op de actieve conversation_id. Nieuwe berichten verschijnen automatisch onderaan via een realtime Supabase-subscription.

**Invoer (onderaan)**: Een tekstinvoerveld met een verzendknop. Bij verzending: roep de Edge Function aan met de conversation_id en de berichttekst, wis de invoer, wacht op het antwoord.

Voor de typewriter-effect animatie (tekst verschijnt woord voor woord): voeg een WeWeb custom JavaScript-actie toe die de streaming-response verwerkt.

Aangepaste systeemprompts per use case

De kracht van je chatbot zit in de systeemprompt. In plaats van een generieke "je bent een behulpzame assistent"-prompt, definieer je nauwkeurig de rol, beperkingen en gedrag.

Voor een klantenservicebot: geef de bot toegang tot je productdocumentatie via RAG (zie ons artikel over pgvector), instrueer hem om alleen te antwoorden over jouw producten, en stuur door naar een menselijke agent wanneer de bot niet weet wat hij moet zeggen.

Sla systeemprompts op in Supabase zodat je ze kunt bijwerken zonder te herdeployen. Je kunt ook verschillende prompts per gebruikersrol of abonnementsniveau hebben — premium gebruikers kunnen toegang krijgen tot een meer geavanceerde assistent.

Kostenbeheersing en monitoring

Zonder kostenbeheersing kan een AI-chatbot met 100 actieve gebruikers snel €500–€2.000/maand aan OpenAI-kosten oplopen.

Drie lagen van bescherming:

**Gebruikersquota**: Sla dagelijkse/maandelijkse token-limieten op in Supabase. Controleer het quotum in de Edge Function voordat je OpenAI aanroept.

**Gespreksvenster**: Stuur niet de volledige gespreksgeschiedenis naar OpenAI — dat wordt snel duur bij lange gesprekken. Stuur de laatste 10–20 berichten plus een samenvatting van eerdere context.

**Model selectie**: Gebruik gpt-4o-mini voor eenvoudige vragen en stuur alleen complexe, meertraps redeneerverzoeken door naar gpt-4o. Dit kan de kosten met 80% verlagen bij vergelijkbare kwaliteit voor de meeste vragen.