Hur du integrerar OpenAI API i din no-code-app (WeWeb + Supabase-guide)

Varför du aldrig ska anropa OpenAI direkt från frontend

Det första misstaget de flesta no-code-byggare gör: anropa OpenAI API direkt från WeWeb eller FlutterFlow, med API-nyckeln exponerad i klienten.

Gör aldrig det. API-nyckeln syns i webbläsarens dev tools, och vem som helst som hittar den kan generera tusentals dollar i API-anrop på din bekostnad. OpenAI API-nycklar har ingen hastighetsbegränsning som standard.

Korrekt mönster: alla OpenAI-anrop går via din backend (Supabase Edge Function, Xano-endpoint eller valfri server). Frontend anropar din backend, som anropar OpenAI med nyckeln lagrad som en serversidig miljövariabel. Detta lägger till ett lager av indirektion och skyddar din nyckel helt. I Sverige är GDPR också relevant, din Edge Function kan vara värd i EU och säkerställa att inga användardata lämnar Europa.

Konfigurera Supabase Edge Functions för OpenAI

Supabase Edge Functions är Deno-baserade serverlösa funktioner som körs på edge-nätverket. De är det enklaste sättet att proxya OpenAI-anrop.

Den grundläggande strukturen: ta emot meddelanden och systemprompt från WeWeb-frontend, anropa OpenAI Chat Completions API med din nyckel lagrad i Deno.env, och returnera svaret. Distribuera med supabase functions deploy ai-chat och ange nyckeln med supabase secrets set OPENAI_API_KEY=sk-....

Välj Supabase EU-väst-region vid projektskapande. Det säkerställer att alla Edge Function-exekveringar och datalagring sker inom EU, ett GDPR-krav för de flesta svenska B2B-kunder och ett formellt krav om din kunddata klassas som känslig enligt GDPR artikel 9.

OpenAI-kostnadsoptimering: cachning och batching

I produktion kan OpenAI API-kostnader växa snabbt om de inte hanteras. De två mest effektiva kostnadsreducerande strategierna innan du ens rör modellvalet är cachning och batching. Cachning innebär att lagra resultatet av ett API-anrop och returnera det cachade resultatet när samma input efterfrågas igen. Skapa en tabell ai_response_cache i Supabase med kolumner för en hash av hela prompten, svarstexten, modellen som användes och en created_at-tidsstämpel. Kontrollera före varje API-anrop om ett cachat svar finns för den hashen. Cache-träfffrekvenser på 20-40 % är vanliga för innehållsgenereringsfunktioner där användare ofta genererar liknande output.

Batching är relevant när du behöver köra många AI-operationer som inte är användarvända i realtid, till exempel att generera sammanfattningar för 500 dokument som laddats upp under natten eller köra sentimentanalys på gårdagens supportärenden. OpenAIs Batch API bearbetar asynkront till 50 % av standardpriset. Skicka dina förfrågningar som en JSONL-fil, polla för slutförande och hämta resultaten. För bakgrundsjobb bör batching alltid vara ditt standardval.

En tredje teknik: sätt aggressiva max_tokens-gränser. Om en funktion bara behöver en output på 150 ord säkerställer max_tokens: 200 att du aldrig betalar för 2 000-tokens-svar orsakade av promptdrift. Övervaka genomsnittlig tokenanvändning per endpoint under två veckor efter lansering och sänk gränserna till den 95:e percentilen av vad du faktiskt observerar.

GPT-4o vs GPT-4 Turbo: att välja rätt modell

Inte varje funktion behöver den mest kapabla modellen. Att välja rätt modell för varje användningsfall kan sänka din API-räkning med 60-80 % utan att användarna märker någon kvalitetsskillnad. GPT-4o är den nuvarande flaggskeppsmodellen, multimodal (bilder, ljud, text), snabb och kostnadseffektiv till 2,50 USD/M inputtokens. Det är rätt val för användarvänd chatt, komplext resonemang och uppgifter där outputkvaliteten är direkt synlig för användaren.

GPT-4o mini kostar 0,15 USD/M inputtokens, ungefär 17 gånger billigare. Den hanterar enkel klassificering, kortformat innehållsgenerering, FAQ-besvarande och förifyllning av formulär med en kvalitet som de flesta användare inte kan skilja från GPT-4o. För varje funktion där uppgiften är väldefinierad och enkel, börja med GPT-4o mini och uppgradera bara till GPT-4o om kvalitetstestning visar en meningsfull skillnad.

För embeddings och semantisk sökning, använd text-embedding-3-small (0,02 USD/M tokens). Den är snabb, billig och presterar jämförbart med större embedding-modeller för de flesta dokumenthämtningsuppgifter. Reservera text-embedding-3-large för sökfunktioner där precision är kritisk och frågevolymen är låg. Tumregeln: börja billigt, mät kvalitet och uppgradera modellen bara när du kan mäta förbättringen i användarresultat.

Anropa Edge Function från WeWeb

I WeWeb, skapa en REST API-datakälla som pekar på din Edge Function-URL (finns i Supabase-dashboardens Edge Functions-sektion). Konfigurera det som en POST-förfrågan med en JSON-kropp.

Skapa en variabel chatMessages (array) och aiResponse (sträng). Vid knapptryck: 1. Lägg till användarens meddelande i chatMessages 2. Rensa userInput 3. Anropa Edge Function-åtgärden med messages: chatMessages 4. Bind aiResponse till svarstexten 5. Visa aiResponse i ett textelement

För strömning av svar (text som visas ord för ord), använd parametern stream: true i OpenAI-anropet och hantera SSE-strömmen i Edge Function. Det är mer komplext men skapar en mycket bättre användarupplevelse, viktig för svenska B2B-appar där professionella användare förväntar sig snabb respons.

Strömning av svar i no-code-appar

Streaming är tekniken som gör att ChatGPT visar text ord för ord medan den genereras istället för att vänta på hela svaret. Det förbättrar den upplevda prestandan dramatiskt, användare ser output på under en sekund istället för att vänta 3-8 sekunder på att hela svaret ska komma. Att implementera streaming i ett no-code-stack kräver lite anpassad kod men är genomförbart med Supabase Edge Functions och WeWebs anpassade JavaScript-åtgärder.

I Edge Function, lägg till stream: true i OpenAI-förfrågan och skicka svarskroppen vidare till klienten. Edge Function returnerar en Server-Sent Events (SSE)-ström, en serie textbitar, var och en prefixad med data:. I WeWeb hanterar du detta med en anpassad JavaScript-åtgärd som öppnar en EventSource-anslutning, lyssnar på data-händelser och lägger till varje bit till en reaktiv variabel bunden till ditt output-textelement.

I FlutterFlow hanteras streaming via en Custom Action skriven i Dart som använder http-paketet för att läsa svaret som en ström och uppdatera apptillståndet stegvis. Implementationen tar 2-4 timmar men är värd investeringen för alla chatbot- eller innehållsgenereringsfunktioner, UX-förbättringen är betydande och användare föredrar den konsekvent.

Hastighetsbegränsning och återförsökslogik

OpenAIs API returnerar HTTP 429-fel (för många förfrågningar) när du överskrider dina hastighetsgränser. Utan återförsökslogik dyker dessa upp som fel för dina användare. Korrekt hantering av hastighetsgränser är inte förhandlingsbart för AI-funktioner i produktion.

I din Supabase Edge Function, implementera exponentiell backoff: vid ett 429-svar, vänta 1 sekund och försök igen; om det misslyckas igen, vänta 2 sekunder; sedan 4 sekunder; misslyckas sedan med ett användarvänligt felmeddelande. De flesta 429-fel är övergående och löser sig inom det första eller andra återförsöket.

För hastighetsbegränsning på användarnivå, som förhindrar att en enskild användare förbrukar en oproportionerlig del av API-budgeten, implementera en räknare per användare i Supabase. Varje API-anrop ökar en räknare i en usage_tracking-tabell. Kontrollera räknaren i början av varje förfrågan och returnera ett 429-fel med ett tydligt meddelande om användaren har överskridit sin dagliga eller månatliga gräns. Detta skyddar din API-budget och ger dig den data du behöver för användningsbaserad fakturering. Logga modell, antal använda tokens, latens och lyckad/misslyckad status för varje förfrågan, denna data blir avgörande när du felsöker kostnadsspikar och optimerar prompts.

Prompt engineering för produktfunktioner

Kvaliteten på din AI-funktion beror helt på din systemprompt. Generiska prompts ger generiska resultat.

För en innehållsgenerator: "Du är en copywriter för [Företagsnamn], ett [beskrivning] SaaS. Generera [outputtyp] som matchar denna varumärkesröst: [exempel]. Svara alltid i detta format: [struktur]. Ta aldrig med [uteslutningar]."

För en dataanalytiker: "Du är en expert dataanalytiker. Analysera den tillhandahållna datan och returnera insikter som: 1) En menings sammanfattning, 2) Tre nyckelfynd som punktpunkter, 3) En rekommenderad åtgärd. Svara alltid i giltig JSON."

Praktiska regler: Var specifik om outputformat (JSON när frontend behöver parsa det), inkludera negativa begränsningar ("nämn aldrig konkurrenter"), och testa med 20+ inputs innan lansering. För svenska appar: specificera att AI ska svara på svenska om inte annat anges.

Kostnadskontroll och hastighetsbegränsning

OpenAI API-kostnader ökar snabbt i produktion. Tre kontroller att implementera innan lansering:

1. Tokenbegränsningar: Ange max_tokens för varje förfrågan. För de flesta funktioner räcker 500 tokens. GPT-4o kostar 2,50 USD/M inputtokens + 10 USD/M outputtokens, en 500-tokens-begränsning håller kostnaden under 0,005 USD per förfrågan.

2. Användarhastighetsbegränsning: I din Edge Function, kontrollera hur många anrop användaren gjort den senaste timmen (lagrat i Supabase). Returnera 429 om den är över gränsen.

3. Cachning: För deterministiska outputs (samma input → samma output), cachelagra svar i Supabase. En ai_cache-tabell med en hash av prompten som nyckel eliminerar redundanta API-anrop.

För en SaaS-app med 500 MAU som var och en gör 20 AI-förfrågningar per dag: budgetera 1 500-3 000 SEK per månad för GPT-4o.

Vanliga no-code AI-funktioner vi bygger

AI-innehållsgenerering: Blogginlägg, produktbeskrivningar, e-postämnesrader. WeWeb-formulär → Edge Function → GPT-4o → visa output. Kunder som använder Klarna Checkout kan generera produktbeskrivningar på svenska automatiskt.

Intelligent sökning: Bädda in användarinnehåll med OpenAI text-embedding-3-small, lagra vektorer i pgvector (Supabase), och kör likhetssökning. Returnerar semantiskt relevanta resultat istället för nyckelordsmatchningar.

Dokumentsammanfattning: Ladda upp PDF → extrahera text via Edge Function → sammanfatta med GPT-4o → lagra sammanfattning i Supabase.

AI-driven onboarding: Ställ 5 frågor vid registrering, generera en personaliserad installationschecklista med GPT-4o, lagra i användarprofil.

Allt detta körs på WeWeb + Supabase + OpenAI-stacken utan anpassad kod i frontend.