OpenAI API integreren zonder code: Xano + WeWeb

Waarom je nooit direct vanuit de frontend OpenAI aanroept

De eerste fout die de meeste no-code-bouwers maken: de 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 dollars 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 één indirectielaag toe en beschermt je sleutel volledig.

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.

```
// supabase/functions/ai-chat/index.ts
import { serve } from "https://deno.land/std@0.168.0/http/server.ts"

serve(async (req) => {
  const { messages, systemPrompt } = await req.json()

  const response = await fetch("https://api.openai.com/v1/chat/completions", {
    method: "POST",
    headers: {
      "Authorization": `Bearer ${Deno.env.get("OPENAI_API_KEY")}`,
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      model: "gpt-4o",
      messages: [{ role: "system", content: systemPrompt }, ...messages],
      max_tokens: 1000
    })
  })

  return new Response(response.body, { headers: { "Content-Type": "application/json" } })
})
```

Deploy met supabase functions deploy ai-chat. Stel de sleutel in met supabase secrets set OPENAI_API_KEY=sk-....

OpenAI-kostenoptimalisatie: caching en batching

In productie kunnen OpenAI API-kosten snel oplopen als ze niet worden beheerd. De twee meest effectieve kostenbesparende strategieën, nog vóórdat je aan modelkeuze denkt, zijn caching en batching. Caching betekent dat je de output van een API-aanroep opslaat en het gecachte resultaat teruggeeft wanneer dezelfde input opnieuw wordt aangevraagd. Maak een tabel ai_response_cache aan in Supabase met kolommen voor een hash van de volledige prompt, de responstekst, het gebruikte model en een created_at-tijdstempel. Controleer vóór elke API-aanroep of er al een gecachte response bestaat voor die hash. Cache-hitpercentages van 20-40% komen vaak voor bij contentgeneratiefuncties waarbij gebruikers vaak vergelijkbare output genereren.

Batching is van toepassing wanneer je veel AI-bewerkingen moet uitvoeren die niet in real time aan gebruikers worden getoond, bijvoorbeeld het genereren van samenvattingen voor 500 documenten die 's nachts zijn geüpload, of het uitvoeren van sentimentanalyse op de supporttickets van gisteren. De Batch API van OpenAI verwerkt asynchroon tegen 50% van de standaardprijs. Dien je aanvragen in als een JSONL-bestand, poll voor voltooiing, en haal de resultaten op. Voor achtergrondtaken zou batching altijd je standaardkeuze moeten zijn.

Een derde techniek: stel agressieve max_tokens-limieten in. Als een functie slechts 150 woorden output nodig heeft, zorgt max_tokens: 200 ervoor dat je nooit betaalt voor responses van 2.000 tokens veroorzaakt door prompt drift. Monitor het gemiddelde tokengebruik per endpoint gedurende twee weken na lancering en stel de limieten bij naar het 95e percentiel van wat je daadwerkelijk waarneemt.

GPT-4o vs GPT-4 Turbo: het juiste model kiezen

Niet elke functie heeft het meest capabele model nodig. De juiste modelkeuze per use case kan je API-rekening met 60-80% verlagen zonder dat gebruikers een kwaliteitsverschil merken. GPT-4o is het huidige vlaggenschip, multimodaal (afbeeldingen, audio, tekst), snel en kostenefficiënt tegen $2,50/M inputtokens. Het is de juiste keuze voor gebruikersgerichte chat, complexe redenering, en taken waarbij de outputkwaliteit direct zichtbaar is voor de gebruiker.

GPT-4o mini draait tegen $0,15/M inputtokens, ruwweg 17× goedkoper. Het verwerkt eenvoudige classificatie, korte contentgeneratie, FAQ-beantwoording en formulier-vooraf-invullen met een kwaliteit die de meeste gebruikers niet zullen onderscheiden van GPT-4o. Start voor elke functie waarbij de taak goed gedefinieerd en eenvoudig is met GPT-4o mini, en upgrade alleen naar GPT-4o als kwaliteitstests een betekenisvol verschil laten zien.

Gebruik voor embeddings en semantisch zoeken text-embedding-3-small ($0,02/M tokens). Het is snel, goedkoop en presteert vergelijkbaar met grotere embeddingmodellen voor de meeste document-retrievaltaken. Reserveer text-embedding-3-large voor zoekfuncties waarbij precisie cruciaal is en het zoekvolume laag is. De vuistregel: begin goedkoop, benchmark de kwaliteit, en upgrade het model alleen wanneer je de verbetering in gebruikersresultaten kunt meten.

Edge Function aanroepen vanuit WeWeb

Maak in WeWeb een REST API-databron aan die verwijst naar je Edge Function-URL (te vinden in het Supabase-dashboard → Edge Functions). Configureer deze als een POST-request met een JSON-body.

Maak een variabele chatMessages (array) en aiResponse (string) aan. Bij klikken op de knop:
1. Voeg het bericht van de gebruiker toe aan chatMessages
2. Roep de Edge Function-actie aan met messages: chatMessages
3. Bind aiResponse aan de responsbody
4. Toon aiResponse in een tekstelement

Gebruik voor streaming responses (tekst die woord voor woord verschijnt) de parameter stream: true in de OpenAI-aanroep en verwerk de SSE-stream in de Edge Function, complexer, maar dit levert een veel betere UX op.

Streaming responses in no-code-apps

Streaming is de techniek waarmee ChatGPT tekst woord voor woord weergeeft terwijl deze wordt gegenereerd, in plaats van te wachten op de volledige response. Het verbetert de ervaren snelheid dramatisch, gebruikers zien output binnen één seconde in plaats van 3-8 seconden te wachten op de volledige response. Streaming implementeren in een no-code-stack vereist een kleine hoeveelheid custom code, maar is haalbaar met Supabase Edge Functions en WeWeb's custom JavaScript-acties.

Voeg in de Edge Function stream: true toe aan het OpenAI-verzoek en geef de responsbody terug door aan de client. De Edge Function retourneert een Server-Sent Events (SSE)-stream, een reeks tekstfragmenten, elk voorafgegaan door data:. Verwerk dit in WeWeb met een custom JavaScript-actie die een EventSource-verbinding opent, luistert naar data-events, en elk fragment toevoegt aan een reactieve variabele die gebonden is aan je output-tekstelement.

In FlutterFlow wordt streaming afgehandeld via een Custom Action geschreven in Dart die het http-package gebruikt om de response als stream te lezen en de app-state incrementeel bij te werken. De implementatie kost 2-4 uur, maar is de investering waard voor elke chatbot- of contentgeneratiefunctie, de UX-verbetering is aanzienlijk en gebruikers geven er consistent de voorkeur aan.

Rate limiting en retrylogica

De API van OpenAI retourneert HTTP 429-fouten (Too Many Requests) wanneer je je rate limits overschrijdt. Zonder retrylogica komen deze als fouten bij je gebruikers terecht. Correcte afhandeling van rate limits is niet-onderhandelbaar voor productie-AI-functies.

Implementeer in je Supabase Edge Function exponential backoff: wacht bij een 429-response 1 seconde en probeer opnieuw; mislukt het weer, wacht dan 2 seconden; dan 4 seconden; en geef daarna een gebruiksvriendelijke foutmelding. De meeste 429-fouten zijn tijdelijk en lossen zich op binnen de eerste of tweede retry.

Implementeer voor rate limiting op gebruikersniveau, om te voorkomen dat één gebruiker onevenredig veel van je API-budget verbruikt, een per-gebruiker requestteller in Supabase. Elke API-aanroep verhoogt een teller in een usage_tracking-tabel. Controleer de teller bij het begin van elk verzoek en retourneer een 429 met een duidelijke melding als de gebruiker zijn dagelijkse of maandelijkse limiet heeft overschreden. Dit beschermt je API-budget en levert de data die je nodig hebt voor usage-based billing. Log model, gebruikte tokens, latency en succes/falen voor elk verzoek, deze data wordt essentieel bij het debuggen van kostenpieken en het optimaliseren van prompts.

Prompt engineering voor productfuncties

De kwaliteit van je AI-functie hangt volledig af van je system prompt. Generieke prompts leveren generieke output op.

Voor een contentgenerator: "Je bent copywriter voor [Bedrijfsnaam], een [beschrijving] SaaS. Genereer [outputtype] dat overeenkomt met deze merkstem: [voorbeelden]. Geef altijd output in dit formaat: [structuur]. Neem nooit [uitsluitingen] op."

Voor een data-analist: "Je bent een expert data-analist. De gebruiker geeft je gestructureerde data. Analyseer deze en geef inzichten terug als: 1) Een samenvatting van één zin, 2) Drie belangrijkste bevindingen als bullet points, 3) Eén aanbevolen actie. Antwoord altijd in geldige JSON."

Praktische regels: wees specifiek over het outputformaat (JSON wanneer de frontend het moet parsen), neem negatieve constraints op ("noem nooit concurrenten"), en test met 20+ inputs voordat je live gaat.

Kostenbeheersing en rate limiting

OpenAI API-kosten lopen snel op in productie. Drie controles om vóór lancering te implementeren:

1. Tokenlimieten: stel max_tokens in op elk verzoek. Voor de meeste functies is 500 tokens genoeg. GPT-4o rekent $2,50/M inputtokens + $10/M outputtokens, een limiet van 500 tokens houdt de kosten onder $0,005 per verzoek.

2. Rate limiting per gebruiker: controleer in je Edge Function hoeveel aanroepen de gebruiker in het afgelopen uur heeft gedaan (opgeslagen in Supabase). Retourneer 429 als de limiet is overschreden.

3. Caching: cache voor deterministische outputs (dezelfde input → dezelfde output) responses in Supabase. Een ai_cache-tabel met een hash van de prompt als sleutel elimineert overbodige API-aanroepen.

Voor een SaaS-app met 500 MAU die elk 20 AI-verzoeken per dag doen: budgetteer €150-300/maand voor GPT-4o.

Veelvoorkomende no-code AI-functies die wij bouwen

AI-contentgeneratie: blogposts, productbeschrijvingen, e-mailonderwerpregels. WeWeb-formulier → Edge Function → GPT-4o → output weergeven.

Intelligent zoeken: embed gebruikerscontent met OpenAI's text-embedding-3-small, sla vectoren op in pgvector (Supabase), en voer similarity search uit. Geeft semantisch relevante resultaten in plaats van keyword-matches.

Documentsamenvatting: PDF uploaden → tekst extraheren via Edge Function → samenvatten met GPT-4o → samenvatting opslaan in Supabase.

AI-gedreven onboarding: stel 5 vragen tijdens de aanmelding, genereer een gepersonaliseerde setup-checklist met GPT-4o, en sla deze op in het gebruikersprofiel.

Dit alles draait op de WeWeb + Supabase + OpenAI-stack met nul custom code in de frontend.