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.