Gå til indholdet

AI-assisteret udvikling i praksis

Agenda og noter benyttet i foredrag og demonstrationer om AI-værktøjer til softwareudvikling.

Se evt.

og kontakt Michell Cronberg for yderligere information.

Link til teams møde 4. december 2025 kl. 17:00-18:00

Agenda

Introduktion og kontekst

  • AI-grundlæggende: Hvad er det hele for noget?
    • Overordnet om AI
      • Mange af de artikeler der findes her på sitet går i dybden med forskellige aspekter af AI og LLM'er.
    • Store sprogmodeller (LLM'er): Trænet på millioner af linjer kode
      • Træning = at give modellen massive mængder spørgsmål med korrekte svar
        • Eksempel: "Hvad er hovedstaden i Frankrig?" → "Paris" (gentaget millioner af gange med variationer)
        • Modellen lærer mønstre og sammenhænge mellem spørgsmål og svar
        • Embeddings: Tekst konverteres til tal-vektorer så computeren kan forstå betydning
          • Tekst med lignende betydning får vektorer tæt på hinanden
          • For kode: "for-løkke" og "gennemløb af array" får vektorer tæt på hinanden (relaterede koncepter)
      • For kode: Trænet på GitHub repositories, dokumentation og Stack Overflow
      • Modellen lærer best practices og kodningsstandarder på tværs af sprog
    • AI forstår kontekst, ikke bare syntax
    • AIs abstraktionsevne: Kan generalisere fra træningsdata til nye situationer
      • Eksempel: Kan skrive en ny funktion baseret på beskrivelse, selvom den specifikke funktion ikke fandtes i træningsdata
    • Brugerens abstraktionevne: At kunne formulere præcise prompts og forstå AI's output er afgørende for succes, men man behøver ikke forstå særligt meget om AI. LLM's er et eksempel på en af de allerbedste brugerflader der nogensinde er skabt - super simpelt at bruge - super komplekst bagved.
  • Hvordan AI fundamentalt har ændret softwareudvikling
    • AI er ikke fremtiden - det er nutiden
    • Fra eksperiment til produktionsværktøj på under 3 år
  • Fra "vibe coding" til struktureret AI-assisteret udvikling
    • Vibe coding: Iterativ kodegenerering gennem samtale
    • Spec-driven development: Struktureret approach med planlægning
    • Agent-baseret udvikling: AI som selvstændig medudvikler
  • Overblik over begreber: no-code, low-code, agentic AI
    • No-code/low-code platforme (Lovable, Bolt, n8n)
    • Selvstændige AI-kodeassistenter (GitHub Copilot Coding Agent, OpenAI Codex)
    • Model Context Protocol (MCP) - den nye standard

AI-værktøjer i udviklingsmiljøet

Kort historisk rejse fra autocomplete til agenter

  • 2010: Autocomplete, intellisense og snippets
  • 2015: Intelligent refactoring og statisk analyse
  • 2018: Forbedret kontekstuel IntelliCode
  • 2021: Første bølge af AI-kodeassistenter
  • 2023-2025: Multi-modeller, agenter, CLI og integrerede miljøer

Værktøjer

No-code/Low-code platforme

Hurtig prototyping uden traditionel kode. Godt til hurtig idévalidering og prototyping, men begrænset skalerbarhed til enterprise-løsninger:

  • Lovable: AI-genererede webapps fra prompts
    • Bygger fulde webapplikationer fra naturlige beskrivelser
    • Version 2.0 med markant forbedret kodekvalitet
  • Bolt: StackBlitz's AI-drevne webapp-builder
    • Instant deployment og preview
    • Ideel til hurtige MVP'er
  • n8n: Open source workflow automation med AI-integration
    • Bygger AI-agenter og workflows uden kode
    • Kan integreres med LLM'er og eksterne tjenester
    • Godt til hurtig idévalidering og prototyping, men begrænset skalerbarhed til enterprise-løsninger

Brug af AI-værktøjer i praksis (Github Copilot som eksempel)

  • Brug af Copilot i VS Code

    • Ask-mode: Stil spørgsmål om kode og teknologi
    • Edit-mode: Rette og tilføje kode
    • Agent-mode: AI tager over og navigerer selv i kodebasen
    • Mest anvendte AI-værktøj blandt professionelle udviklere

  • Githib Copilot Workspace/Cloud agents: Automatiserede issue-til-kode workflows

    • Fra GitHub issue til færdig pull request
    • Struktureret approach: Spec → Plan → Implementering

  • GitHub Spec Kit: Spec-driven development

    • Fra vibe coding til struktureret approach
    • Fire faser: Specify → Plan → Tasks → Implement
    • Markdown-baseret og Git-integreret
    • Alternative til ustruktureret AI-kodegenerering

  • Tilpasning gennem prompts

    • Copilot Instructions (.github/copilot-instructions.md): Workspace-specifikke retningslinjer
    • Prompt files (.prompt.md): Genbrugelige prompts til specifikke opgaver
      • Workspace prompts (.github/prompts/) - delt i teamet
      • User prompts - personlige på tværs af projekter
    • Best practices for at styre AI's output og sikre konsistens
    • MCP (Model Context Protocol) - se senere
    • Oprettelse af issues med AI-genererede specifikationer og opgavelister
    • Implementering via AI-agent der arbejder igennem opgaverne "online"

Demonstrationer

I denne del af foredraget vil jeg demonstrere udvalgte AI-værktøjer og teknikker i praksis. Demonstrationerne kan omfatte:

  • Kodeskrivning og refactoring med AI-assistance
  • Automatiserede workflows fra GitHub issue til implementering
  • Dokumentation og kodeanalyse
  • Agent-mode, hvor AI arbejder selvstændigt
  • Tilpasning gennem Copilot Instructions og prompt files
  • Oprettelse af issues med AI-genererede specifikationer og opgavelister

Fokus er på at vise, hvordan værktøjerne fungerer i virkelige udviklingsscenarier, og hvordan de kan integreres i daglig praksis.

Model Context Protocol (MCP)

  • Hvad er MCP, og hvorfor er det vigtigt?
  • MCP-servere: Udvidelse af AI's capabilities
  • Eksempler: GitHub, Google, database-integration

Sikkerhed og etiske overvejelser

  • Datasikkerhed ved brug af AI-værktøjer

    • Hvor sendes din kode hen? (Cloud vs. lokal LLM - feks Ollama)
    • Forskellige privacy-niveauer hos forskellige værktøjer
      • GitHub Copilot: Enterprise-niveau med databeskyttelse
      • Gratis AI-værktøjer: Kan bruge data til træning
    • Telemetri og logging: Hvad gemmes og hvorfor?
    • Best practice: Brug aldrig reelle credentials eller API-nøgler i prompts

  • Håndtering af følsom information

    • GDPR og compliance-overvejelser
    • Undgå at paste kundedata, PII (Personally Identifiable Information) eller forretningshemmeligheder
    • Brug mock-data eller anonymiserede eksempler
    • Tjek virksomhedens politik for AI-værktøjer
    • Overvej on-premise eller private LLM'er til følsomme projekter
    • Filtrering og sanitering: Fjern følsom info før AI-konsultation

  • Etiske overvejelser ved AI-genereret kode

    • Licens-problematikker: AI trænet på open source-kode
      • Risiko for at AI genererer kode der ligner eksisterende copyrighted kode
      • GitHub Copilot tilbyder juridisk beskyttelse (ved enterprise-licens)
    • Bias i AI-genereret kode
      • Modeller kan reproducere dårlige patterns fra træningsdata
      • Gammel eller forældet praksis kan blive foreslået
    • Kvalitetssikring er stadig dit ansvar
      • AI kan producere kode med sikkerhedsproblemer
      • Altid code review og test AI-genereret kode

  • Ansvar og ejerskab af AI-genereret kode

    • Hvem ejer koden? Typisk den der "prompter"
    • Du er ansvarlig for koden du shipper, uanset hvem/hvad der skrev den
    • Dokumentation: Skal det fremgå at kode er AI-genereret?
    • Team-aftaler: Etablér fælles retningslinjer for AI-brug
    • Versionshistorik: Overvej at markere AI-assisterede commits

Demo setup

HTML app / Vibe coding (solsystemet)

Lav en HTML-side med alt i én fil (HTML, CSS og JavaScript):

En animeret visualisering af solsystemet med følgende funktioner:
- Solen i centrum med realistiske størrelser og afstande (skaleret passende)
- Alle 8 planeter der kredser om solen med forskellige hastigheder
- Hver planet skal have sin korrekte farve (Merkur: grå, Venus: gulbrun, Jorden: blå, Mars: rød, Jupiter: orange med striber, Saturn: gul med ringe, Uranus: lyseblå, Neptun: mørkeblå)
- Planeternes baner skal vises som svage streger
- Saturn skal have synlige ringe
- Brug CSS animationer eller JavaScript canvas for en smooth animation
- Mørk baggrund med stjerner
- Responsive design der fungerer på alle skærmstørrelser
- Titel "Solsystemet" øverst på siden

Gør det visuelt flot og astronomisk nogenlunde korrekt med hensyn til relative størrelser og omløbstider (dog skaleret for at være synligt).

Se evt et resultat her: Solsystemet Demo

Finjusterings-prompt (til forbedringer):

Tilføj følgende ekstra features til solsystem-visualiseringen:

1. Interaktive elementer:
   - Hover over en planet for at vise navn, diameter og afstand fra solen
   - Klik på en planet for at centrere viewet omkring den med zoom
   - Pause/play knap til at stoppe/starte animationen
   - Hastighedsjustering (slider fra 0.1x til 10x hastighed)

2. Visuelle forbedringer:
   - Tilføj Jordens måne der kredser om Jorden
   - Tilføj Asteroidebæltet mellem Mars og Jupiter (små prikker)
   - Giv planeterne subtile glow-effekter
   - Tilføj en skala-indikator (f.eks. "1 pixel = 1 million km")

3. Information panel:
   - Sidebar eller overlay med facts om den valgte planet
   - Vis nuværende "dag" eller omløbsposition
   - Toggle til at vise/skjule planetnavne permanent

4. Performance:
   - Optimer animationen med requestAnimationFrame
   - Smooth transitions når man zoomer/centrerer

Behold den eksisterende funktionalitet og sørg for, at alt stadig er i én HTML-fil.

Hukommelsestest app (Simon Says)

Lav en HTML-side med alt i én fil (HTML, CSS og JavaScript):

En sekvenshukommelses-test inspireret af Simon Says-spillet:

Design:
- 4 store farvede knapper i 2x2 grid (rød, grøn, blå, gul)
- Hver knap skal have en distinkt lyd når den aktiveres
- Moderne, rent design med afrundede hjørner og shadows
- Responsiv layout der fungerer på tablet og desktop
- Stor, tydelig overskrift "Hukommelsestest"

Funktionalitet:
- Start-knap der initierer spillet
- Computeren viser en tilfældig sekvens af farver (lysere farve + lyd)
- Spilleren skal gentage sekvensen ved at klikke på knapperne
- Hvis korrekt: tilføj én farve mere til sekvensen og fortsæt
- Hvis forkert: vis "Game Over" med score og "Prøv igen" knap
- Score-tæller der viser nuværende niveau/sekvens-længde
- Best score der gemmes i localStorage

Visuelle effekter:
- Smooth fade-in/fade-out når knapper lyser op
- Kort pause mellem hver farve i sekvensen
- Grøn feedback ved korrekt svar
- Rød feedback ved forkert svar
- Animations når spillet starter/slutter

Tilgængelighed:
- Store, nemme at ramme knapper (mindst 150x150px)
- Tydelig kontrast
- Klare instruktioner på skærmen
- "Hvordan spiller man" sektion med kort forklaring

Gør det professionelt, intuitivt og nemt at bruge for ældre brugere.

Se evt et resultat her: Hukommelsestest Demo

Kategori-sortering app (Drag-and-drop)

Lav en HTML-side med alt i én fil (HTML, CSS og JavaScript):

En kognitiv træningsapp hvor brugeren skal sortere ikoner i de rigtige kategorier ved hjælp af drag-and-drop.

Layout (se eksempel i tegning):
- Øverst: 4 store kategori-bokse ved siden af hinanden (Dyr, Mad, Tøj, Natur)
- Hver kategori-boks skal være mindst 200x150px med ramme og kategori-navn centreret
- Nedenunder: 20 ikoner arrangeret i rækker (4-5 ikoner per række)
- Ikoner skal være store (80x80px) og nemme at se og gribe fat i

Kategorier og ikoner:
- **Dyr** (5 stk): hund, kat, fugl, fisk, sommerfugl
- **Mad** (5 stk): æble, brød, ost, tomat, kage
- **Tøj** (5 stk): t-shirt, bukser, sko, hat, jakke
- **Natur** (5 stk): træ, blomst, sol, sky, bjerg

VIGTIGT om ikoner:
Find et passende ikon i dit valgte bibliotek for hver af de 20 ting.
Hvis der ikke findes et ikon for en specifik ting (fx "sommerfugl" eller "kage"), 
så vælg en anden lignende ting fra samme kategori som HAR et ikon 
(fx "bi" i stedet for "sommerfugl" eller "pizza" i stedet for "kage").
Det vigtigste er at have 5 genkendelige ikoner i hver kategori.

Vælg selv det bedste ikon-bibliotek til formålet. Overvej:
- Font Awesome (populært, mange ikoner) - det er klart et godt valg
- Material Icons (Google, clean design)
- Lucide Icons (moderne, konsistent)
- Eller et andet du finder passende

Funktionalitet:
- Ikonerne startes tilfældigt placeret i bunden
- Bruger kan trække et ikon og slippe det i en kategori-boks
- Når ikonet slippes i KORREKT kategori:
  * Ikonet forbliver i boksen og kan ikke flyttes igen
  * Grøn feedback (fade/glow)
  * Lille lyd-pip (valgfrit)
- Hvis ikonet slippes i FORKERT kategori:
  * Ikonet hopper tilbage til sin oprindelige position
  * Rød feedback
  * Kan prøves igen
- Når alle 20 ikoner er sorteret korrekt:
  * Vis "Tillykke!" besked
  * Vis score: antal korrekte første gang vs. antal forsøg i alt
  * Vis tidsforbruget
  * "Prøv igen" knap der resetter spillet

Visuel feedback:
- Hover-effekt på ikoner (let forstørrelse eller shadow)
- Drag-effekt (ikonet følger musen, måske lidt transparent)
- Drop-zones lyser op når ikon trækkes over dem
- Smooth animationer ved korrekt/forkert placering

Design:
- Moderne, rent interface med god spacing
- Stor, læsbar tekst (minimum 18px)
- Høj kontrast for bedre læsbarhed
- Pastel-farver til kategori-bokse (lyse, ikke stærke)
- Responsivt design (fungerer på tablet og desktop)
- Ingen distrahererende elementer

Tilgængelighed for ældre brugere:
- Store click/touch targets
- Tydelige visuelle hint om hvad der kan trækkes
- Ikke for hurtige animationer
- Klare instruktioner: "Træk hvert ikon til den rigtige kategori"
- Mulighed for at se hvilke ikoner der mangler (vis count: "15/20 sorteret")

Gør det professionelt, intuitivt og velegnet til kognitiv træning for personer med milde hukommelsesproblemer.

Tilføj evt. billeder for bedre illustration af layoutet.

Layout eksempel

Se evt et resultat her: Kategori-sortering Demo

MCP Demo

Hent https://github.com/mcronberg/serialdate og brug Chrome DevTools MCP (søg i VSC extension efter '@mcp devtools' eller se https://github.com/ChromeDevTools/chrome-devtools-mcp) til eksempelvis:

  • Få et overblik over brugerfladen
  • Test at konvtering fungerer korrekt
  • Lighthouse rapportering

Mere avanceret projekter

  • Se evt. MyCalc Demo for et mere avanceret eksempel på et projekt og mulige integrationer med AI-værktøjer.
  • Se evt. MiniCrm - demo REST API for et andet eksempel på et komplet projekt som kan bruges som demo - både for AI-assisteret tilretninger af selve koden, men også for vibe coding af klienter.