Varför förstå hur det fungerar?

• 🎯Du skriver bättre instruktioner när du vet vad AI:n ser
• 🔍Du förstår varför den ibland gör fel, och vad du kan göra åt det
• 🛡️Du vet vad den kan komma åt på din dator

Du behöver inte kunna bygga en motor för att köra bil. Men det hjälper att veta var bensinen ska.

Tre lager

En väldigt bra gissare

En språkmodell gör en enda sak: den gissar nästa bit text. Om och om igen.

Text blir tokens

Modellen läser inte bokstäver eller hela ord, utan tokens: små bitar text.

• Ungefär ¾ ord per token på engelska, lite färre på svenska
• Allt mäts i tokens: hur mycket modellen kan läsa och vad det kostar

Hur blir den så smart?

Resultatet: en modell som har sett så mycket kod att den kan skriva ny kod som ofta fungerar på första försöket.

Kontextfönstret: modellens arbetsminne

Vad en LLM inte kan på egen hand

Den sista punkten är där agenten kommer in. 👇

Chatt eller agent?

Agent = LLM + verktyg + loop

Verktyg ger modellen händer

# Modellen skriver inte "jag läser filen", den skriver en begäran:
{ "verktyg": "läs_fil", "sökväg": "index.html" }
# Programmet runt omkring utför det och skickar tillbaka resultatet.

Agentloopen

Hästen och selen

Claude Code och Codex är harness. Samma modell kan bli bättre eller sämre beroende på harnesset runt den.

Vad gör harnesset?

Från din idé till fungerande kod

”Lägg till en mörkt läge-knapp”

> Lägg till en knapp som växlar till mörkt läge
🧠 Jag behöver se hur sidan är uppbyggd.
● Read(index.html)  ● Read(style.css)
🧠 Jag lägger till en knapp och mörka färger.
● Edit(index.html)  ● Edit(style.css)  ● Write(theme.js)
🧠 Jag testar att sidan fortfarande fungerar.
● Bash(npx playwright test)  ✗ 1 fel: knappen saknar etikett
🧠 Jag rättar felet.
● Edit(index.html)  ● Bash(npx playwright test)  ✓
✓ Klart! Knappen finns uppe till höger.

Fem tumregler

• 🎯Var tydlig med målet. Beskriv vad du vill uppnå, inte bara vad den ska göra.
• 📋Ge bra kontext. Den vet bara det som står i kontexten.
• 🪜Ta små steg. Hellre fem små uppgifter än en jättestor.
• 👀Granska alltid. Läs vad den vill göra innan du godkänner.
• 💾Commit ofta. Git är ditt skyddsnät.

Agenten jobbar på din dator

Det här tar vi med oss

Välj ett projekt

• En mapp, ingen server, ingen inloggning. Allt sparas i webbläsaren.
• Färdiga startprompter för alla fyra finns på kurssidan under Övning 1.

Startprompten: mål, funktioner och krav

Bygg en inköpslista som en webbapp i den här mappen.

Funktioner:
- Jag kan lägga till varor, bocka av dem och ta bort dem.
- Avbockade varor hamnar längst ner i listan.
- En knapp rensar alla avbockade varor.
- Allt sparas i webbläsaren (localStorage) så att det finns kvar när jag laddar om sidan.

Krav:
- Använd bara HTML, CSS och JavaScript. Ingen server, inget byggsteg och inga paket som behöver installeras.
- Startsidan ska heta index.html och ligga direkt i mappen. Använd bara relativa sökvägar så att sidan fungerar på GitHub Pages.
- Sidan ska fungera lika bra på mobil som på dator: responsiv layout som anpassar sig efter skärmbredden, rätt viewport-inställning, knappar och fält som är lätta att träffa med fingret och ingen sidledsscroll.
- Använd svenska i hela gränssnittet och sätt lang="sv" på sidan.
- Ge appen en tydlig titel, en favicon och en glad design med varma färger.
- Skapa en kort README.md som beskriver vad appen gör.

Börja med att visa mig en kort plan. Vänta på mitt okej innan du skriver några filer.

Små steg, sedan publicera

Hemuppgift

• ✅Se till att allt på checklistan fungerar
• 🛠️Gör klart övning 1 och publicera din app på GitHub Pages
• 🎨Bygg vidare: be agenten om en ny funktion du själv saknar
• 💡Fundera på vad du vill bygga under kursen

Allt material och alla guider finns på kurssidan.