Arkitekturen
En produktions-AI-chatbot har fyra komponenter:
1. **Chatt-UI**: Inmatningsfält, meddelandehistorik, laddningstillstånd, felhantering 2. **Konversationstillstånd**: En array av meddelanden (roll + innehåll) lagrad i frontend-tillståndet 3. **Backend-proxy**: En Supabase Edge Function eller Xano-endpoint som anropar OpenAI 4. **Systemprompt**: Instruktionsuppsättningen som definierar din chatbots persona, kunskap och begränsningar
Konversationstillståndet är det viktigaste konceptet. OpenAIs API är tillståndslöst — varje förfrågan måste inkludera hela konversationshistoriken. Din frontend underhåller denna historik och skickar den med varje meddelande. För svenska B2B-appar: lagra konversationer i Supabase EU-region för GDPR-efterlevnad.
Bygga chatt-UI i WeWeb
I WeWeb, skapa en sidnivåvariabel `messages` (array, standard tom). Lägg till två komponenter:
**Meddelandelista**: En Repeating Group bunden till `messages`. Varje element har ett villkorligt utseende — användarmeddelanden högerjusterade med primärfärg bakgrund, assistentmeddelanden vänjusterade med neutral bakgrund. Bind texten till `item.content`.
**Inmatningsarea**: En textinmatning bunden till en `userInput`-variabel, plus en "Skicka"-knapp. Vid knapptryck: (1) lägg till `{roll: "user", content: userInput}` i `messages`, (2) rensa `userInput`, (3) anropa API-åtgärden, (4) lägg till svaret som `{roll: "assistant", content: response}`.
Lägg till en laddningsspinner som visas medan API-anropet pågår. Bra UX-detalj som förväntas av svenska B2B-användare.
Skriva en effektiv systemprompt
Systemprompten bestämmer allt om din chatbots beteende. En bra produktionssystemprompt inkluderar:
- **Roll**: "Du är en kundsupportagent för Acme SaaS, ett projekthanteringsverktyg." - **Kunskap**: "Du hjälper användare med: skapa projekt, bjuda in teammedlemmar, konfigurera integrationer och faktureringsfrågor." - **Begränsningar**: "Svara bara på frågor om Acme SaaS. Nämn aldrig konkurrentprodukter. Hitta aldrig på funktioner som inte finns." - **Format**: "Håll svaren under 100 ord. Använd punktlistor för steg. Svara på svenska om inte användaren skriver på annat språk." - **Eskalering**: "Om användaren uttrycker frustration eller nämner ett faktureringsfel, säg: 'Jag kopplar dig till vårt team' och utlös eskaleringsflödet."
För svenska appar: inkludera instruktionen att svara på svenska som standard, med möjlighet att byta språk.
Lägga till persistent kontext
Den grundläggande chatboten glömmer allt när sidan uppdateras. För att göra den smartare:
**Användarkontext-injektion**: När chatbottssessionen startar, hämta användarens kontodata (plan, användning, senaste aktivitet) och lägg till den i systemprompten: "Användarens nuvarande plan är Pro. Deras senaste aktivitet var för 3 dagar sedan. De har 2 aktiva projekt."
**Konversationspersistens**: Spara meddelanden till en Supabase-tabell (chatbot_sessions) med user_id och session_id. Vid sidladdning, hämta de senaste N meddelandena och fyll i förväg messages-arrayen.
**Kunskapsbas**: För produktdokumentation, lagra artiklar i Supabase med inbäddningar (med pgvector). Innan du anropar GPT-4o, kör en likhetsökning och injicera de mest relevanta artiklarna i systemprompten. Detta kallas RAG (Retrieval Augmented Generation) och förbättrar dramatiskt svarsnoggrannheten.
Kostnader och prestanda i produktion
För ett SaaS med 500 aktiva användare som var och en skickar 10 meddelanden per dag:
- Genomsnittligt meddelande: 50 tokens input + 100 tokens output - GPT-4o-prissättning: 2,50 USD/M input + 10 USD/M output - Daglig kostnad: 500 × 10 × 150 tokens = 750 000 tokens = ~2,50 USD/dag = ~750 SEK/månad
För att hantera kostnader: implementera ett sessions-tokenbudget (sluta lägga till historikmeddelanden när konversationen överskrider 2 000 tokens, börja sammanfatta gamla meddelanden). Använd GPT-4o mini för enkla förfrågningar (0,15 USD/M input) och reservera GPT-4o för komplexa.
Svarstid: GPT-4o svarar på 1–3 sekunder. Lägg till en skrivindikator för att sätta förväntningar. För under-sekundsupplevelse, implementera strömning.
Reglering och GDPR för AI-chatbottar
För svenska appar finns det extra hänsyn för AI-chatbottar:
**Dataminimering**: Lagra inte mer konversationshistorik än nödvändigt. Implementera automatisk radering av konversationer äldre än ditt behov (t.ex. 90 dagar).
**Transparens**: Informera användare om att de pratar med en AI. EU:s AI-förordning kräver tydlig märkning av AI-interaktioner från och med 2026.
**Ingen känslig data**: Konfigurera systemprompten att aktivt avvisa om användare delar känsliga personuppgifter, personnummer (personnummer), bankuppgifter eller hälsodata i chattten.
**Datacentralisering i EU**: Alla konversationsloggar i Supabase EU-region. Din Edge Function i EU-region. OpenAI behandlar data utanför EU — dokumentera detta i din integritetspolicy och Data Processing Agreement med OpenAI.