Waarom je nooit direct vanuit de frontend OpenAI aanroept
De eerste fout die de meeste no-code-bouwers maken: OpenAI API direct aanroepen vanuit WeWeb of FlutterFlow, met de API-sleutel blootgesteld in de client.
Doe dit nooit. De API-sleutel is zichtbaar in de browser dev tools, en iedereen die hem vindt kan duizenden euro's aan API-aanroepen op jouw kosten genereren. OpenAI API-sleutels hebben standaard geen snelheidslimiet.
Het correcte patroon: alle OpenAI-aanroepen gaan via je backend (Supabase Edge Function, Xano-endpoint of een willekeurige server). De frontend roept je backend aan, die OpenAI aanroept met de sleutel opgeslagen als een server-side omgevingsvariabele. Dit voegt een indirectielaag toe en beschermt je sleutel volledig. In Nederland is de AVG ook relevant, je Edge Function kan in de EU worden gehost om te zorgen dat geen gebruikersdata Europa verlaat.
Supabase Edge Functions instellen voor OpenAI
Supabase Edge Functions zijn Deno-gebaseerde serverloze functies die op het edge-netwerk draaien. Ze zijn de eenvoudigste manier om OpenAI-aanroepen te proxyen.
De basisstructuur: ontvang berichten en systeemprompt van de WeWeb-frontend, roep de OpenAI Chat Completions API aan met je sleutel opgeslagen in Deno.env, en retourneer het antwoord. Deploy met `supabase functions deploy ai-chat` en stel de sleutel in met `supabase secrets set OPENAI_API_KEY=sk-...`.
Kies de Supabase EU-west-regio bij het aanmaken van het project. Dit zorgt ervoor dat alle Edge Function-uitvoeringen en dataopslag binnen de EU plaatsvinden, een AVG-vereiste voor de meeste Nederlandse B2B-klanten.
Edge Function aanroepen vanuit WeWeb
In WeWeb gebruik je een REST API-actie om je Edge Function aan te roepen. Voeg je Supabase project-URL toe als een variabele, stel de Authorization-header in met de Bearer-token van de ingelogde gebruiker, en stuur de berichten-array als JSON body.
Voor streaming responses (waarbij tekst woord voor woord verschijnt) heb je een iets andere aanpak nodig: gebruik een fetch met ReadableStream in een WeWeb custom JavaScript-actie, en werk de UI-state bij terwijl chunks binnenkomen. Dit geeft de ChatGPT-achtige typewriter-ervaring die gebruikers verwachten.
Promptbeheer en kostenbeheersing
De twee grootste problemen die teams tegenkomen na lancering: prompts die niet consistent presteren en rekeningen die hoger uitvallen dan verwacht.
**Promptbeheer**: Sla system prompts op in je Supabase-database, niet hardgecodeerd in je Edge Function. Dit laat je prompts bijwerken zonder te herdeployen, en je kunt meerdere promptversies A/B-testen.
**Kostenbeheersing**: Stel token-limieten in via de `max_tokens`-parameter. Gebruik `gpt-4o-mini` voor eenvoudige taken en reserveer `gpt-4o` voor complexe redenering. Implementeer gebruikersquota in Supabase: sla het aantal API-aanroepen per gebruiker per dag op en retourneer een 429-fout wanneer het quotum is bereikt.
Log elke API-aanroep in een `ai_usage`-tabel met user_id, tokens_used, model en kosten. Dit geeft je zichtbaarheid in je kostenstructuur en helpt bij het budgetteren voor schaal.
Vectorzoekopdrachten toevoegen met pgvector
Voor documentchats, semantisch zoeken of retrieval-augmented generation (RAG) heb je vectoropslag nodig. Supabase ondersteunt pgvector natively, je hoeft geen aparte vectordatabaseservice te betalen.
De flow: converteer documenten naar chunks van ~500 tokens, genereer embeddings via OpenAI's `text-embedding-3-small`-model (goedkoop: $0,02 per miljoen tokens), sla embeddings op in een Supabase-kolom van het type `vector(1536)`, en query met cosinus-gelijkenis voor relevante passages.
Vanuit WeWeb stuur je de gebruikersvraag naar een Edge Function die de vraag embedt, de top-5 relevante passages ophaalt en deze doorgeeft aan GPT-4o als context. Dit patroon werkt uitstekend voor kennisbase-assistenten, productdocumentatie-bots en interne FAQ-tools.
Productie-overwegingen voor Nederlandse SaaS
Voordat je een AI-functie lanceert voor Nederlandse gebruikers zijn er twee AVG-overwegingen:
**Verwerkersovereenkomst**: Je hebt een verwerkersovereenkomst (DPA) nodig met OpenAI als je persoonlijke data verwerkt. OpenAI biedt dit aan als onderdeel van hun enterprise-voorwaarden. Controleer of je gebruikers weten dat hun invoer naar OpenAI wordt gestuurd en leg dit vast in je privacybeleid.
**Dataresidentie**: Als je klanten EU-dataresidentie vereisen (steeds vaker het geval bij Nederlandse enterprise-klanten), gebruik dan Azure OpenAI Service gehost in West-Europa in plaats van openai.com direct. De API is nagenoeg identiek maar data blijft binnen de EU, een cruciaal onderscheid voor sectoren zoals zorg, overheid en financiën.