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.
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.
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.