Scaffolding voor een AI-project: een fundament dat je begrijpt
Je vraagt een AI-agent om een app te bouwen en krijgt meteen een scherm. Maar waar start je het project, hoe test je het en wat gebeurt er met de ingevoerde gegevens? Scaffolding gaat over die eerste samenhangende projectopzet: bestanden, afhankelijkheden, configuratie en commando's waarmee je verder kunt werken.
Ik gebruik een zelfbedacht uitleenbord voor een buurtschuur. Het toont drie fictieve gereedschappen en of ze beschikbaar zijn. Eerst zonder accounts of opslag. Zo kun je het fundament begrijpen voordat een simpele knop ineens een gebruikersdatabase en een beheerpaneel meebrengt.
Het scaffold en de agentomgeving zijn verschillende lagen
Het scaffold is de beginstructuur van jouw app. Denk aan een startbestand, bronmap en dependencylijst. Een agent harness is de omgeving waarin een AI-agent werkt: met toegang tot bestanden, gereedschap, instructies en controles. Het ene helpt de app draaien; het andere bepaalt hoe de agent eraan werkt.
Voor het uitleenbord wil je een project dat ook zonder doorlopend AI-gesprek te starten is. Een collega moet de instructie kunnen volgen en dezelfde oefenpagina zien. Daarom hoort een kort README met installatie, start, test en beperkingen bij de oplevering. De agent mag dat schrijven, maar jij controleert of de genoemde commando's bestaan.
Kies de kleinste eerste versie die je kunt beoordelen
Onze eerste versie heeft één lijst met hamer, zaag en schroevendraaier. Er staat bij of elk gereedschap beschikbaar is. Een knop verandert de status in het geheugen van de pagina. Na verversen begint de oefening opnieuw. Dat is een afgesproken beperking, geen verborgen dataverlies dat pas tijdens gebruik ontdekt mag worden.
Voor zo'n lokale browserproef past bijvoorbeeld het vanilla-template van Vite. Dat is hier een concrete keuze voor dit kleine scherm, geen algemene winnaar onder frameworks. Bij serverrendering, teamstandaarden of een bestaande codebase kan de juiste keuze anders uitvallen. Laat de agent eerst die omstandigheden benoemen voordat hij een nieuw framework neerzet.
Van lege map naar een herkenbare start
Onderstaande commando's beschrijven een nieuwe, aparte oefenmap. Ze zijn voor dit artikel niet uitgevoerd. Gebruik een Node-versie die aan de actuele Vite-eisen voldoet; de officiële guide noemt de ondersteunde minimumversies. Met npm ziet de opzet er zo uit:
npm create vite@latest uitleenbord -- --template vanilla
npm --prefix uitleenbord install
npm --prefix uitleenbord run devOpen daarna zelf het lokale adres dat de ontwikkelserver toont. Een adres uit een tutorial is geen bewijs dat jouw server daarop draait. Stop de server als de oefening voorbij is. Gebruik je in een bestaand project een andere package manager, volg dan het bestaande lockfile in plaats van er een tweede aan toe te voegen.
Laat de agent de gegenereerde voorbeeldpagina vervangen door de afgesproken lijst. Behoud de bestaande opstartstructuur en bekijk welke dependencies erbij kwamen. Voor drie tekstregels hoort geen onverklaarde stapel nieuwe pakketten nodig te zijn.
Geef gedrag een eigen plek in de structuur
Een bruikbare indeling voor deze oefening is src/main.js voor het scherm, src/beschikbaarheid.js voor de beslisregel en tests/beschikbaarheid.test.js voor de controle. Het scaffold levert niet automatisch al deze bestanden; dit is onze bewuste uitbreiding.
Neem als regel dat een beschadigd gereedschap niet uitgeleend mag worden, ook als niemand het gereserveerd heeft. In src/beschikbaarheid.js staat dan bijvoorbeeld:
export function magUitlenen(gereedschap) {
return !gereedschap.beschadigd && !gereedschap.uitgeleend;
}Het scherm importeert die functie om de beschikbare handeling te bepalen. Daarmee staat dezelfde regel niet op drie plekken. Het voorbeeld veronderstelt twee echte booleans in onze eigen fictieve lijst; invoer van gebruikers of een API zou aparte validatie nodig hebben.
Maak één betekenisvolle test onderdeel van de opzet
De ingebouwde Node-test runner kan deze kleine JavaScript-regel controleren. Maak in de genoemde testmap een test die de lastige combinatie afdekt:
import test from "node:test";
import assert from "node:assert/strict";
import { magUitlenen } from "../src/beschikbaarheid.js";
test("beschadigd gereedschap blijft geblokkeerd", () => {
assert.equal(magUitlenen({
beschadigd: true,
uitgeleend: false,
}), false);
});Voeg in de bestaande scripts van package.json een test-script toe met node --test, zonder de andere scripts weg te halen. Daarna gebruik je npm --prefix uitleenbord test. Dit is voorbeeldcode, hier niet uitgevoerd. De test controleert de regel; of de knop die regel werkelijk gebruikt, controleer je ook op het scherm.
Bepaal wanneer auth, data en logging nodig worden
Wil de buurtschuur echte uitleningen vastleggen, dan verandert de opdracht. Wie mag uitlenen? Wie mag een schadeblokkade opheffen? Waar blijft de status na verversen? Twee mensen kunnen hetzelfde gereedschap tegelijk proberen te reserveren. Die vragen vragen om serverregels en een passende gegevensopslag, niet alleen extra knoppen.
Laat die keuzes vóór echt gebruik uitwerken. Een wachtwoordveld in het scaffold is nog geen betrouwbare authenticatie. Houd geheimen buiten browsercode. Spreek voor logging af welke technische fout je wilt terugvinden en welke persoonsgegevens daar niet in horen. Voor onze eerste lokale proef volstaan zichtbare foutmeldingen en fictieve data; dat is geen productieontwerp.
Controleer de oplevering vanaf een frisse start
Bekijk bij versiebeheer eerst git status --short. Lees daarna git diff voor niet-gestagede wijzigingen en git diff --cached voor gestagede wijzigingen. Open nieuwe, nog niet door Git gevolgde bestanden apart; die staan niet vanzelf in deze diffs. Kloppen de bestanden met het afgesproken scherm en de test? Controleer ook de lockfile en het README. Een tweede start mag niet afhankelijk zijn van een stap die alleen in de chat staat.
Loop vervolgens de gewone, uitgeleende en beschadigde toestand langs en draai het buildscript dat Vite levert. Noteer wat je echt hebt gecontroleerd. De korte uitleg over scaffolding geeft de begrippen; de AI-codinggids helpt bij vervolgstappen. In de Vibe Coding Training kun je zo'n eigen appvraag verder uitwerken, met het fundament zichtbaar op tafel.
Zelf aan de slag met Vibe Coding?
Leer hoe je met AI-tools werkende apps bouwt. Onze praktische cursussen nemen je stap voor stap mee.
Blijf op de hoogte
Ontvang maandelijks de nieuwste tips over vibe coding, AI tools en exclusieve content.
Meer artikelen
Een MCP-server bouwen met één eenvoudige voorraadtool
Bouw een kleine MCP-server die fictieve voorraad uitleest. Je ziet het entrypoint, invoerschema, resultaat en foutgedrag zonder een bedrijfssysteem aan te sluiten.
Codex op Windows: kies bewust tussen native en WSL2
Je kunt Codex native op Windows gebruiken of binnen WSL2. Kies op basis van je project, en controleer apart waar de terminal en de agent draaien.
Claude Code hooks: start een vaste controle na een bewerking
Gebruik Claude Code hooks voor een kleine, vaste kwaliteitscontrole. Met een oefenvoorbeeld voor ontbrekende vertalingen en uitleg over wat de uitslag bewijst.