Hur du bygger en AI-agent som körs direkt i din webbläsare

En AI-agent som tar egna beslut, körs lokalt i Chrome eller Firefox och slipper helt en backend-server. Det låter som science fiction, men kombinationen WebAssembly, WebGPU och moderna JavaScript-API:er har gjort det möjligt. På utvecklarkonferensen enterJS visades nyligen hur en autonom agent, inspirerad av den pratande bilen K.I.T.T. från Knight Rider, kan byggas helt i webbläsaren med JavaScript.

Och det är inte bara en nostalgitripp. Tekniken bakom säger något viktigt om vart webbutveckling är på väg.

Vad en AI-agent faktiskt gör

En AI-agent skiljer sig från en vanlig chatbot. Chatbotten svarar på frågor. Agenten fattar beslut, väljer verktyg och kör flera steg i följd, utan att fråga om lov mellan varje.

Tänk dig att du säger: ”Hitta billigaste tågbiljetten till Göteborg imorgon och boka den.” En chatbot svarar med länkar. En agent öppnar SJ:s sajt, jämför avgångar, klickar igenom bokningen och rapporterar tillbaka.

Det kräver tre saker: en språkmodell som tänker, en uppsättning verktyg att använda, och en loop som kör tills uppgiften är klar.

Varför webbläsaren plötsligt klarar det här

Det stora i enterJS-demonstrationen var inte själva agenten. Det var att den körde utan server. Hela modellen, all logik, alla beslut, i webbläsaren.

Tre teknologier gör det möjligt:

• WebAssembly (Wasm) kör kompilerad kod nästan lika snabbt som native. Det betyder att språkmodeller skrivna i C++ eller Rust kan exekveras direkt i fliken.
• WebGPU ger JavaScript åtkomst till grafikkortet. Matrisberäkningar som tidigare krävde Python och CUDA fungerar nu i Chrome.
• Web Workers och Streams låter agenten arbeta parallellt utan att frysa gränssnittet.

För några år sedan var det här otänkbart. Att köra en modell med flera miljarder parametrar i en webbläsare? Du skulle ha skrattat. Nu fungerar det.

Så är en webbläsar-agent uppbyggd

Grundskelettet består av fyra delar som pratar med varandra i en loop:

”`javascript

async function runAgent(uppgift) {

let kontext = [uppgift];

while (!klar(kontext)) {

const beslut = await modell.tänk(kontext);

const resultat = await verktyg.kör(beslut);

kontext.push(beslut, resultat);

}

return kontext;

}

”`

Modellen är språkmodellen som tänker. Med bibliotek som Transformers.js eller WebLLM kan du ladda in mindre modeller direkt i klienten. Llama 3.2 på 1 miljard parametrar fungerar smidigt på en modern laptop.

Verktygen är funktioner agenten kan anropa. En fetch-funktion för att hämta data, en DOM-manipulator för att klicka på knappar, en kalkylator för matte. Du definierar dem som vanliga JavaScript-funktioner.

Kontexten är minnet. Varje steg läggs till en växande lista som modellen läser igenom innan nästa beslut.

Loopen kör tills uppgiften är löst eller maxgränsen nås. Att glömma maxgränsen är ett klassiskt misstag. Utan den kan agenten fastna i evig rundgång.

Det K.I.T.T.-inspirerade upplägget

Demon på enterJS gav agenten en personlighet, en pratande bilkompis som svarar med röst via Web Speech API. Mikrofonen lyssnar, modellen tolkar, verktygen agerar, och högtalaren svarar.

Hela kedjan från ljud in till ljud ut körs lokalt. Inget skickas till OpenAI eller Google. Det är inte bara coolt, det är en integritetsförbättring.

Och tekniskt är det inte raketforskning. Web Speech API har funnits sedan Chrome 25. Det nya är att modellen mellan örat och munnen nu också får plats i webbläsaren.

Vad det betyder för dig som utvecklare

Du behöver inte bygga K.I.T.T. för att tjäna på det här. Principen, att köra AI-logik lokalt i klienten, öppnar konkreta möjligheter:

• Offline-funktionalitet. En agent som hjälper användaren utan internetuppkoppling.
• Sänkta kostnader. Inga API-anrop till OpenAI per användare. Modellen körs på besökarens hårdvara.
• GDPR-vänlig design. Användardata lämnar aldrig enheten. För svenska företag som hanterar känsliga uppgifter är det stort.
• Snabbare svar. Ingen latens från en server i Frankfurt.

Den största nackdelen? Modellstorleken. En 1 GB-modell tar tid att ladda första gången. Cachning via Service Workers löser delar av problemet, men det är fortfarande en barriär.

Var du börjar om du vill testa

Du behöver inte vänta. Verktygskedjan finns redan, och mycket är gratis.

Bibliotek	Vad det gör	Bra för
Transformers.js	Kör Hugging Face-modeller i webbläsaren	Textgenerering, klassificering
WebLLM	Kör större LLM:er via WebGPU	Chattbaserade agenter
LangChain.js	Strukturerar agent-loopar och verktyg	Komplexa flöden
Ollama (lokalt)	Kör modeller via lokal server	Utveckling och prototyper

Börja med en enkel uppgift. Be agenten räkna ut något, hämta data från ett öppet API, eller fylla i ett formulär. Förstå loopen innan du bygger något ambitiöst.

Är du ny på hur webbläsare fungerar under huven? Läs gärna hur en webbläsare bygger upp en sida från URL till färdig vy, det ger kontext till varför teknologier som WebGPU spelar roll. Och om du vill förstå hur agenter pratar med omvärlden generellt är vår genomgång av API:er en bra startpunkt.

Begränsningarna ingen pratar om

Hypen är stark, men låt oss vara nyktra. En lokal modell på 1-3 miljarder parametrar är inte GPT-4. Den hallucinerar oftare, missar nyanser och fastnar i komplexa resonemang.

För enklare agentuppgifter, boka, sammanfatta, klassificera, räcker det. För kvalificerad analys eller kodgenerering är du fortfarande bättre tjänt med en stor molnmodell.

Det andra problemet är hårdvara. WebGPU stöds av moderna versioner av Chrome, Edge och Firefox, men prestandan varierar enormt mellan en Macbook Pro och en fem år gammal Chromebook. Bygger du för bred publik måste du planera för fallback.

Vart det här tar oss

Webbläsaren har gått från att visa dokument, till att köra applikationer, till att vara en AI-plattform. Det är ett tyst skifte men ett stort sådant. Mycket som idag kräver dyra molntjänster kommer att flytta ut till klienten under de närmaste åren.

För svenska utvecklare betyder det en chans att bygga AI-drivna produkter utan att vara beroende av amerikanska API-leverantörer. Det är ett argument både för integritet och för ekonomi.

K.I.T.T. var fiktion 1982. Den körs i Chrome 2026. Vad du gör med det, det är upp till dig.

FAQ

Behöver man en kraftfull dator för att köra en AI-agent i webbläsaren?

Det beror på modellstorleken. Mindre modeller (under 2 miljarder parametrar) fungerar på de flesta moderna laptops från de senaste tre åren. Större modeller kräver WebGPU och minst 8 GB RAM för att gå smidigt.

Är WebGPU säkert att använda i produktion?

WebGPU stöds stabilt i Chrome, Edge och Opera sedan 2023, och i Firefox sedan 2024. För publika sajter rekommenderas en fallback till WebGL eller server-baserad inference för användare med äldre webbläsare.

Kan jag köra GPT-4 eller Claude lokalt i webbläsaren?

Nej. De modellerna är proprietära och körs bara via API hos respektive företag. Du kan däremot köra öppna modeller som Llama, Mistral och Phi lokalt, de är ofta tillräckligt bra för agentuppgifter.

Hur skiljer sig en agent från GitHub Copilot?

Copilot är en assistent som föreslår kod medan du skriver. En agent agerar mer självständigt, den kan exempelvis köra kod, läsa resultat och fatta nästa beslut utan att du klickar. Skillnaden ligger i graden av autonomi. Vill du läsa mer finns vår guide om hur GitHub Copilot fungerar.

Måste man vara bra på AI för att bygga en agent i JavaScript?

Nej. Du behöver förstå loopar, async/await och fetch, sånt som varje JavaScript-utvecklare redan kan. Bibliotek som LangChain.js och Transformers.js abstraherar bort det matematiska bakom modellerna.

Kan agenten klicka på knappar och fylla i formulär på andra sajter?

Endast på din egen sajt eller via godkända browser extensions. Av säkerhetsskäl tillåter webbläsare inte godtycklig manipulation av andra domäner. Vill du automatisera över flera sajter behövs verktyg som Playwright på serversidan.