Bygga med AI

Vad ni får ut av det här

Ni har en idé till en webbapplikation men ingen utvecklare på lönelistan. Med AI som hjälp går det att komma betydligt längre på egen hand än för bara ett par år sedan, och det går lika bra att köra fast rejält om ni börjar i fel ände.

Guiden går igenom verktygen, var ni hittar modeller som kostar lite eller ingenting, vilken teknisk grund (stack) som bär en liten applikation och ett arbetssätt som håller. Längst ner finns tre promptmallar att kopiera.

Ingen programmeringsvana krävs. Tålamod gör det.

Två sätt att jobba: IDE eller TUI

När man bygger med AI, ibland kallat vibe coding, finns i princip två arbetsmiljöer att välja mellan.

IDE, ett program som samlar allt

IDE står för Integrated Development Environment. Det är ett enda program där ni ser era filer, skriver kod, kör kommandon och pratar med AI:n. VS Code är ett av de vanligaste. Det är gratis, inte bundet till något programmeringsspråk och finns för Windows, Mac och Linux.

I VS Code kan ni koppla in AI som både hjälper till med själva programmeringen och fungerar som chatt. Ni beskriver funktionen ni vill ha byggd direkt i programmet, utan att klippa och klistra promptar. Det går också att klistra in en skärmbild och fråga varför knappen hamnade snett.

TUI, allt i terminalen

TUI står för Terminal User Interface. Här sker allt i ett textfönster.

Det är rått och grovhugget. Muspekaren gör ingenting, ni kan inte klistra in bilder, och det tar längre tid att lära sig. OpenCode är ett exempel på ett kostnadsfritt TUI, och köper ni ett abonnemang för Claude eller Kimi följer det ofta med ett eget TUI på köpet.

Vårt råd

Börja i en IDE. Installera VS Code och lägg till ett agent-tillägg, till exempel Cline eller Roo Code. Då har ni en miljö med mus, fönster och bilder, och en AI som kan ta sig an riktiga uppgifter.

AI eller AI-agent?

En AI svarar på en direkt fråga eller utför en direkt uppgift. Ni frågar, den svarar, sedan står den still.

Agenten jobbar mer självständigt. Den kan ta en större uppgift, bryta ner den i delmål, beta av dem ett i taget (läsa filer, skriva kod, köra tester) och lämna tillbaka helheten. Cline och Roo Code gör VS Code till en sådan agentmiljö.

Låter det som att agenten kan göra jobbet åt er? Det kan den inte. Mer om det längre ner.

Modeller som kostar lite eller ingenting

Tillägget i VS Code är bara ett skal; tänkandet görs av en språkmodell som ni kopplar in. Den enkla vägen är att köpa ett abonnemang. Vill ni hålla nere kostnaderna finns flera alternativ i molnet, och en modell på er egen dator längre ner. De kräver mer handpåläggning.

• Nvidia Build låter er köra en rad olika modeller utan kostnad. Vid registrering får ni mellan 1 000 och 5 000 krediter per modell, och det finns ett tak för anrop per minut. Modellerna slutar fungera vid olika tidpunkter, så räkna med att byta modell då och då.
• Qwen, Alibabas modeller, anropar ni via Alibaba Cloud Model Studio. Där finns kodmodellerna i Qwen3 Coder-serien, byggda för att samarbeta med kodagenter. Nya användare får 1 miljon token per modell, giltiga i 90 dagar, men bara i Singapore-regionen.
• OpenRouter samlar hundratals modeller bakom ett och samma konto. Alla modeller vars namn slutar på :free är kostnadsfria, med ett tak på 50 anrop per dag. Utbudet byts ofta. I slutet av september 2026 fanns bland annat Qwen3.8 27B, Googles Gemma 4 och Nvidias Nemotron 3 bland gratismodellerna, så filtrera listan på gratis och välj bland det som finns just då.
• Hugging Face har en kostnadsfri kvot som fylls på varje månad. Den är liten, och när den är slut får ni vänta eller köpa krediter.

Köra en modell lokalt

Qwen3 går att ladda ner och köra på den egna datorn; guider finns i mängd på nätet. Men räkna med att modellen äter all prestanda den kommer åt medan den körs: processor, grafikkort och minne. Ett knep är att låta den jobba nattetid, med tydliga uppgifter som står i kö när ni går och lägger er.

Håll också förväntningarna nere: en vanlig bärbar dator klarar bara de mindre varianterna, och de är svagare än de stora modellerna i molnet. Med 16 GB minne går Qwen3 8B bra och 14B i bästa fall; de större får inte plats.

Den viktigaste regeln: inga personuppgifter till en AI

AI-tjänsten är någon annans dator. Bokstavligen. Samma sak gäller molnlagring.

Kod går bra att skicka dit och lagra där. Personuppgifter gör det inte: namn, e-postadresser, telefonnummer, fysiska adresser, personnummer. Aldrig till en AI, och i synnerhet inte till en gratis-AI.

Varför är gratis värst? För att gratistjänster ofta betalas med det ni skickar in. Räkna med att texten kan användas för att träna nästa generation modeller, och att ni inte styr vem som ser den på vägen.

Dessutom är det ni som bär ansvaret enligt dataskyddsförordningen (GDPR) när ni hanterar era kunders uppgifter. Behöver AI:n se hur datan ser ut, så hitta på testdata: ”Anna Andersson, anna@exempel.se, 070-000 00 00”. Det fungerar precis lika bra.

Stacken: det som bär applikationen

Varje webbapplikation består av flera lager. Det användaren ser (frontend), logiken bakom (backend), en databas, inloggning och en plats där allt körs. Uppsättningen nedan passar en liten applikation, och AI-modellerna kan den utan och innan.

Supabase för data och inloggning

Supabase löser databas, inloggning, fillagring och en del av säkerheten i ett och samma paket. Under huven finns databasen PostgreSQL med radnivåsäkerhet (Row Level Security), som styr exakt vem som får läsa och skriva vilka rader. Det är den som ser till att en kund aldrig ser en annan kunds data. Supabase finns som molntjänst med en gratisnivå och går också att köra på en egen server. Då behöver servern minst 4 GB minne och två processorkärnor.

Next.js för resten

Next.js är i dag förstahandsvalet för själva webbapplikationen, både frontend och backend.

Tips: bygg in PWA, Progressive Web App, medan ni ändå bygger sidan. Har ni gått in på en webbsida i mobilen och fått frågan om ni vill installera appen? Det är en PWA. Ni behöver inte bygga separata appar för Android och iOS; en PWA fungerar på båda och är egentligen webbsidan förklädd till app. Be agenten lägga till den i ett tidigt skede, det är mindre jobb än att bygga in den i efterhand.

GitHub från dag ett

Lägg koden på GitHub från första dagen. Alla som jobbar med kod använder det, alla AI-modeller känner till det, och varje version av koden ligger sparad. Ställer agenten till det kan ni backa till en version som fungerade.

Glöm inte att filen .env, där lösenord och API-nycklar bor, aldrig ska upp på GitHub. Lägg in den i .gitignore innan ni gör er första incheckning (commit).

Var applikationen ska köras

Ett vanligt webbhotell skulle i teorin kunna fungera. I praktiken sätter det krokben för stora delar av det ni bygger, eftersom de flesta webbhotell är gjorda för enklare sidor och inte låter er köra en egen server dygnet runt. Kvar blir en egen maskin, på ett eller annat sätt:

• En virtuell privat server (VPS), till exempel hos DigitalOcean. Ni hyr en liten server i molnet. Bara för Next.js räcker ett av de minsta alternativen, 6 till 12 dollar i månaden. Ska Supabase ligga på samma maskin behövs minst 4 GB minne, vilket hos DigitalOcean kostar 24 dollar i månaden; annars kan Supabase ligga kvar som molntjänst på gratisnivån. Nya konton hos DigitalOcean får en startkredit på 5 dollar som gäller i 90 dagar.
• Cloudflare Workers, som har en kostnadsfri nivå. För Next.js med serverfunktioner är det Workers Cloudflare rekommenderar, med adaptern vinext; systertjänsten Cloudflare Pages är till för statiska sidor. Vi har inte provat det själva med just den här stacken.

Cloudflare framför, oavsett

Var ni än lägger applikationen är det värt att låta domänen gå via Cloudflare. Skyddet mot spam och attacker är mycket bra, och gratisplanen räcker gott för en liten verksamhet.

Arbetssättet: små uppgifter, en i taget

Här avgörs det mesta.

Ge aldrig en AI hela projektet i ett svep. Bryt ner jobbet i små uppgifter och bygg en bit i taget; AI:n kan hjälpa er med själva nedbrytningen också. Tre prompter räcker för att komma igång. Byt ut allt inom hakparentes mot det som gäller för er.

Prompt 1: brainstorming

Använd en vanlig chatt-AI, till exempel ChatGPT, Gemini eller Claude. Målet är en systembeskrivning och en uppgiftslista, inte kod.

Vi är ett [typ av företag] med en idé som vi kallar [projektnamn].
Konceptet: [vad tjänsten gör, i två eller tre meningar].

Flödet vi tänker oss: [hur en kund registreras och vad kunden köper].
Kunden får en administratör som i sin tur lägger till egna användare.
Användarna har olika behörigheter, till exempel: [roll] får [göra detta]
men inte [göra detta].

Stacken vi tänker oss är Next.js och Supabase på [en VPS / Cloudflare Workers].

I den här sessionen ska vi brainstorma kring funktionerna och de
ingående delarna. Vi ska landa i en systembeskrivning med en minsta
fungerande version (MVP) och en uppgiftslista för att bygga på
funktioner steg för steg. Generera systembeskrivningen bara när jag
ber om det, efter att vi har bestämt funktionerna.

Sista meningen är viktig. Utan den skriver AI:n en systembeskrivning på direkten, innan ni pratat klart.

Prompt 2: AGENTS.md

Bifoga systembeskrivningen från prompt 1 som fil till en modell som är starkare på kod, till exempel Claude, Kimi eller Qwen.

Utifrån den bifogade systembeskrivningen vill jag att du skapar en
AGENTS.md som en kodagent ska läsa inför varje arbetspass. Den ska
innehålla stack, mappstruktur, kodregler och säkerhetsregler.

Den ska slå fast att hemligheter under inga omständigheter får finnas
i frontend, och att .env aldrig får checkas in på GitHub.

Filen ska också innehålla en uttrycklig instruktion: innan agenten
ändrar något ska den förklara vad ändringen innebär och få mitt
godkännande, eller ta emot mitt förslag på en annan lösning.

AGENTS.md blir projektets regelbok. Lägg den i projektets rotmapp. Läser agenten den inte av sig själv räcker det att be den göra det, som i prompt 3.

Prompt 3: grunden

Kör den i VS Code, med agenten, när AGENTS.md ligger på plats.

Läs AGENTS.md för projektet. Börja med att designa databasschemat i
Supabase som ett system med flera kunder (multi-tenant):
organisationer, användare med roller, [era huvudobjekt, till exempel
platser, produkter eller bokningar] och [det besökare skickar in, till
exempel anmälningar eller beställningar] med status.

Säkerställ att en organisation aldrig kan se en annan organisations
data, och att anonyma besökare bara kan SKAPA [det de skickar in],
aldrig läsa det. Förklara varje policy i klartext.

Därefter fortsätter ni likadant, uppgift för uppgift från listan i prompt 1. Läs vad agenten har gjort innan nästa uppgift tar vid.

Ta aldrig AI:ns svar för givet

Se AI som den smartaste av dumma personer, eller den dummaste av smarta. Den gör exakt det ni ber om: aldrig mer, oftast mindre. AI tar genvägar och gör jobbet så enkelt som möjligt för sig själv, lite av en latmask helt enkelt.

Ber ni om en inloggningssida får ni en inloggningssida. Men den har kanske ingenting att logga in mot, och den bryr sig inte ett dugg om att någon försöker logga in 2 000 gånger i minuten.

Så fråga, ifrågasätt och få det bekräftat:

• ”Har du lagt in skydd mot upprepade inloggningsförsök?”
• ”Jag vill att varje formulär kontrolleras både i webbläsaren och på servern.”
• ”Ett krav för inloggningen är att lösenord aldrig hamnar i loggarna.”
• ”Vad händer om två användare ändrar samma sak samtidigt?”

Låt modellerna granska varandra

Blanda gärna modeller. Ta något ChatGPT har skrivit, klistra in det i Gemini och skriv ”Det här är förslaget från ChatGPT”, med filen bifogad. Modellerna verkar nästan tävla i att hitta varandras fel. Svaret börjar ofta artigt med beröm, och sedan följer en ordentlig sågning av det som saknas. Precis vad ni vill ha.

Fler kockar gör här soppan bättre, och flera av tjänsterna har gratisnivåer som räcker för det. Be Lovable skissa utseendet, prata systembeskrivning med Qwen och låt Kimi granska resultatet.

Abonnemang eller lågbudget

Den lätta vägen är att köpa ett abonnemang och köra. Lågbudgetvägen fungerar också, men ni får hålla tungan rätt i mun: flera konton, kvoter som tar slut mitt i ett arbetspass och modeller som byts ut med kort varsel. Båda vägarna leder fram, så länge ni bygger i små steg och granskar allt AI:n lämnar ifrån sig.

Behöver ni hjälp att komma igång? Hör av er.