Gå til indholdet

Kom i gang med "Vibe" coding

Michell Cronberg

I de forrige artikler har vi set på en del teoretiske aspekter af AI, og dækket begreber som LLM'er, prompt engineering, RAG, MCP, kontekst og meget mere. Jeg tænkte, at det nu var tid til at se på, hvordan man kan bruge AI i praksis og afprøve "Vide" coding.

Warning

Bemærk venligst hvornår denne artikel er skrevet. AI-teknologi udvikler sig hurtigt, og det, der er sandt i dag, kan være forældet i morgen.

Du kan både læse artiklen uden at have den store erfaring med udvikling bare for at få en forståelse af emnet, eller du kan læse den som en udvikler, der gerne vil have nogle konkrete eksempler på, hvordan AI kan bruges i hverdagen.

Bemærk, artiklen er skrevet i juni 2025, og der kan være sket ændringer i de værktøjer, der nævnes.

Valg af værktøjer

Der findes mange forskellige udviklingsmiljøer, og det er nærmest en religion, hvilket der er bedst -- men vi er nødt til at begrænse os til en enkelt platform for at kunne vise nogle konkrete eksempler. Nogle nyere værktøjer er designet til at integrere AI direkte i udviklingsprocessen, herunder Windsurf (for nylig købt af OpenAI), Cursor, Void (open source-alternativ), mens andre kan udvides med plugins eller extensions.

Visual Studio Code

De fleste er dog bygget på Visual Studio Code (VSC), som er et open source-udviklingsmiljø fra Microsoft. VSC har et væld af udvidelser, der gør det muligt at integrere AI i din udviklingsproces. Så det er her, vi vil fokusere i denne artikel. Det er gratis at bruge og tilgængeligt på alle platforme (Windows, Mac og Linux).

Github Copilot

Efter installation af CSV er næste skridt er at integrere AI i udviklingsmiljøet -- og her er flere muligheder. Det nemmeste er at oprette en gratis konto hos Github, som tilbyder en AI-funktion kaldet Copilot, der kan hjælpe med at skrive kode. Copilot har en gratis version, som inkluderer en del forespørgsler pr. måned til modeller fra OpenAI, Anthropic, OpenRouter (en "model portal" med mange modeller -- herunder DeepSeek) og lokale modeller (via Llama), og det er en god måde at komme i gang på.

Hvis du skal bruge Copilot i et professionelt miljø, kan du opgradere til en betalt version, der giver dig flere forespørgsler og adgang til flere modeller. I skrivende stund koster det $10 pr. måned, og det er en god investering, hvis du arbejder med kode. Med en konto på Github og Copilot installeret i VSC mangler du blot at installere en extension i VSC, der hedder "GitHub Copilot".

Mere skal der ikke til for at prøve det af, og det er gratis og nemt at installere. Når du bliver lidt mere erfaren, kan du også overveje at installere andre extensions, der kan hjælpe dig med at skrive bedre kode -- herunder den superpopulære "Cline", der kan hjælpe dig med at skrive kode hurtigere og mere effektivt.

Brug af Github Copilot

I VSC er der i skrivende stund flere måder at bruge Copilot på:

  • Automatisk: Når du skriver kode, kan Copilot foreslå linjer eller blokke af kode, der passer til det, du skriver.
  • Kommentar: Skriv en kommentar som fx // Skriv en funktion, der beregner summen af to tal, og Copilot genererer koden.
  • Inline: Højreklik og brug Copilot til at generere kode via en prompt.
  • Ask/Edit/Agent: Et separat vindue, hvor du kan stille spørgsmål, rette kode og få AI'en til at oprette eller ændre filer.

Det er især den sidste funktion, der er mest brugt, fordi den for nylig har integreret en Agent-mode.

Eksempel "app"

For at illustrere, hvordan du kan bruge Copilot i praksis, kan du lave et eksempel på en simpel web app, der kan hente og vise data fra en API -- her alle kommuner i Danmark.

  • Opret en ny mappe til dit projekt, og åbn den i VSC.
  • Åbn Copilot Chat-funktionen og vælg Agent-mode og skriv:
Opret en simpel HTML-applikation med følgende krav:
- Brug en separat CSS-fil (style.css) til styling
- Brug en separat JavaScript-fil (app.js) til funktionalitet
- Siden skal indeholde en knap med teksten "Hent data"
- Når man klikker på knappen, skal der hentes data fra https://api.dataforsyningen.dk/kommuner
- Data skal vises i en tabel med to kolonner: "Kode" og "Navn"
- Kommunerne skal være sorteret alfabetisk efter navn
- Brug professionel styling med CSS
  • Copilot vil nu generere en HTML-fil, en CSS-fil og en JavaScript-fil, der opfylder kravene. Når den er færdig, kan du trykke på "keep" for at beholde og gemme dem. Herefter kan du åbne HTML-filen i din browser for at se resultatet.

Min første version af app'en ser således ud:

Artikelindhold

En simple "vibe" code applikation

Hvis du vil se koden kan du finde den her

https://github.com/devcronberg/vsc-copilot-test/

og hvis du vil prøve applikationen kan du finde den her

https://devcronberg.github.io/vsc-copilot-test/

Jeg har ikke ændret noget i den kode, Copilot genererede, og hvis du prøver får du helt sikkert ikke det samme resultat som mig. Men hvis du opretter din egen applikation kan du kan fx prøve at tilrette den med:

  • Medtag regionskode i tabellen (det vil både tilrette html og js)
  • Ret farveskemaet til en moderne farvepalet baseret på Material Design (det vil tilrette css og html)
  • Gør det muligt at søge i tabellen (html og js)
  • Hvis du er udvikler, kan du bede Copilot om at optimere koden eller tilføje ny avanceret funktionalitet (måske skabe en web component af tabellen).

Det er et meget godt eksempel på "vibe coding" -- men spørgsmålet er, om en ikke-udvikler selv ville kunne skrive den oprindelige prompt (Hvad er HTML, CSS, JS, API, struktur mv.)? Jo mindre information prompten indeholder, jo mere skal Copilot gætte -- og jo mere skal du selv rette bagefter.

Jeg skrev min prompt med henblik på at få koden så tæt på det ønskede resultat som muligt. Havde den været mere uklar, kunne Copilot have genereret en Python-, React- eller C#-applikation i stedet for en simpel HTML-app.

Tricket -- især for en ikke-udvikler -- er at få hjælp til at finde ud af, hvad der egentlig skal laves, og derefter formulere en præcis prompt. Brug 10 minutter i Chat-mode med Copilot (eller Claude, ChatGPT eller en anden AI) for at finde frem til en god prompt. Det er blandt andet derfor, Cline-extensionen er så populær -- den hjælper dig med at skrive bedre prompts i Plan-mode, så du og AI'en er enige om, hvad der skal laves, inden der kodes.

MCP

Vi har før dækket begrebet MCP (Multi Context Protocol), som fx GitHub Copilot kan bruge til at integrere eksterne tjenester i sine svar. Der findes fx:

  • en GitHub MCP-server til versionsstyring
  • en Puppeteer MCP-server til web-sider og screenshots
  • en Cloudflare MCP-server til DNS og IP-adresser
  • en MCP-server til databaser
  • en MCP-server til Docker-containere
  • en MCP-server til det lokale filsystem

Hvis du vil prøve det, så start med Python MCP-serveren "mcp-server-time". Den returnerer aktuel tid (og kan konvertere mellem tidszoner). Prøv fx at spørge "Hvad er klokken i New York?".

Den er nem at installere og en god måde at komme i gang med MCP på. Herefter kan du installere andre MCP-servere, der passer til dine projekter.

James Montemagno har lavet en god introduktion:

Det er i øvrigt ret nemt at kode sine egne MCP-servere. Jeg er selv i gang med at lægge sidste hånd på en MCP-server, der kan hente data fra E-Conomics API -- så oplysninger om regnskaber, debitorer og kreditorer bliver tilgængelige direkte i en chat. MCP er en åben (og endnu ikke låst) standard, som kan integreres i mange forskellige klienter -- ikke kun GitHub Copilot.