# AI in de praktijk Eén feature van plan tot review, met Claude Code, Codex, Copilot of Cursor. Multimedia & Creatieve Technologie · 3.1 The Agency · versie 0.2.0 · 2026-10-15 Tags: ai, git, productivity Slides: Speaker notes: ## Agenda 1. Klaarzetten 2. Plannen 3. Stap voor stap 4. Reviewen 5. Met git ## Wat een agent doet Een taalmodel in een lus. Het kiest telkens een tool, kijkt naar het resultaat en kiest de volgende, tot de taak af is of het jou iets moet vragen. - **Lezen**: Bestanden openen en zoeken in je project. - **Bewerken**: Code schrijven en aanpassen, rechtstreeks in je bestanden. - **Uitvoeren**: Commando's draaien in je terminal, met jouw rechten. - **Checken**: De output lezen en beslissen of het opnieuw moet. **[Werken met AI](https://slides.mctantwerp.be/nl/the-agency/23-werken-met-ai)**: Hoofdstuk 1: de lus, de tools en het contextvenster. ## De workflow 1. **Plannen**: De agent leest je code, stelt je vragen en schrijft een plan. Jij stuurt bij tot het klopt. Nog geen regel code. 2. **Stap voor stap**: Eén stap uit het plan, dan jouw check in de browser. Pas daarna de volgende. 3. **Reviewen**: Elke wijziging gelezen in de diff, en een tweede paar ogen op het geheel. **[Werken met AI](https://slides.mctantwerp.be/nl/the-agency/23-werken-met-ai)**: De uitgebreide zelfstudie: permissions, modellen, MCP, skills en een review-oefening. **De agent typt, jij beslist.** Twee momenten zijn van jou: het plan goedkeuren en de wijzigingen lezen. Wat ertussen zit, mag de agent typen. ## Dezelfde stappen in elke tool | | Claude Code | Codex | Copilot in VS Code | Cursor | | --- | --- | --- | --- | --- | | **Instructies** | `CLAUDE.md` of `AGENTS.md` | `AGENTS.md` | `AGENTS.md` | `AGENTS.md` | | **Plannen** | Shift+Tab naar plan mode | `/plan` | De Plan-agent | Shift+Tab naar Plan | | **Nieuwe sessie** | `/clear` | `/new` | Nieuwe chat | Nieuwe chat | | **Terugdraaien** | `/rewind` of twee keer Esc | Een checkpoint, in VS Code | Restore Checkpoint | Restore Checkpoint | | **Wijzigingen zien** | Elke bewerking als diff | De diff, in VS Code | De knop boven de chat | De diff view | Een checkpoint zet alleen terug wat de agent bewerkte. Wat een commando deed, zoals `npm install` of een bestand verplaatsen, blijft staan. ## 1. Klaarzetten ### De Studieplanner *studieplanner/* ```bash index.html de pagina, het formulier en de lijst style.css de opmaak script.js taken toevoegen, afvinken, bewaren AGENTS.md de afspraken voor je agent TASKS.md wat er nog moet gebeuren plans/ de plannen, één bestand per feature ``` - Een taak heeft een titel, een vak en een deadline - Afvinken als hij af is, met een vinkje om afgewerkte taken te tonen of te verbergen - Alles blijft bewaard in `localStorage`, ook na herladen - Geen framework, geen npm, geen server: je opent index.html in de browser ### De startversie *Prompt* ```md Maak in deze map een studieplanner in gewone HTML, CSS en JavaScript. Geen framework, geen npm, geen build-stap. Ik open index.html in de browser. - Een formulier om een taak toe te voegen: titel, vak, deadline - Een lijst van de taken, de vroegste deadline bovenaan - Een taak afvinken, en een vinkje "Toon afgewerkte taken" - Bewaar de taken in localStorage onder de key studieplanner-taken ``` Drie taken toevoegen, één afvinken, herladen. Staat alles er nog, dan is de startversie klaar. ### Een AGENTS.md om mee te starten *AGENTS.md* ```md # Studieplanner (HTML, CSS, JavaScript) ## Werken - Geen framework, geen npm, geen build-stap - Ik test door index.html in de browser te openen ## Afspraken - De taken staan in localStorage onder studieplanner-taken. Verander dat formaat nooit zonder het eerst te vragen. - Tekst van de gebruiker komt nooit via innerHTML op de pagina. - Zeg na elke stap wat ik in de browser moet checken. ``` Elke agent uit de tabel leest dit bestand bij de start. Eén bestand, en iedereen in je team kiest een eigen tool. Kort houden. Alles wat de agent ook zonder dit bestand juist doet, schrap je. **[Werken met AI](https://slides.mctantwerp.be/nl/the-agency/23-werken-met-ai)**: Hoofdstuk 4: wat erin hoort, regels per map, en Laravel Boost. ### Skills *.agents/skills/plan-schrijven/SKILL.md* ```md --- name: plan-schrijven description: Schrijft een plan voor een feature in plans/. Gebruik dit als ik om een plan vraag. --- 1. Lees eerst de code die bij de feature hoort. 2. Stel je vragen voor je iets schrijft. 3. Schrijf plans/.md met Context, Beslissingen, Relevante code, Stappen (elk met een check in de browser), Niet doen en Open vragen. 4. Wijzig geen code. ``` Een map met een SKILL.md. De agent leest eerst alleen de beschrijving, en de rest pas als je vraag erbij past. Werkt in elke tool uit de tabel: [agentskills.io](https://agentskills.io). ### Waar je skills zet | | Claude Code | Codex | Copilot in VS Code | Cursor | | --- | --- | --- | --- | --- | | `.agents/skills/` | Nee | Ja | Ja | Ja | | `.claude/skills/` | Ja | Nee | Ja | Ja | Zet je skills in `.agents/skills/`, de map van de open standaard. Claude Code leest alleen `.claude/skills/`, dus daar maak je een symlink naar dezelfde map. ```console $ mkdir -p .claude $ ln -s ../.agents/skills .claude/skills ``` ### Opdracht: Zet je project klaar *15 minuten* 1. Maak een lege map studieplanner en open ze in de agent van je keuze 2. Laat de startversie bouwen met de prompt van daarnet 3. Drie taken toevoegen, één afvinken, herladen: staat alles er nog? 4. Schrijf een AGENTS.md met de afspraken 5. Extra: maak de skill plan-schrijven in .agents/skills, of doe een git init en een eerste commit 6. Klaar als de Studieplanner draait en AGENTS.md in de map staat ## 2. Plannen ### Een prompt om te plannen #### Zo gaat het vaak ```md maak een filter op vak ``` #### Zo werkt het ```md Ik wil een filter op vak boven de lijst met taken. Nog niets wijzigen. Lees de code die erbij hoort en stel me eerst je vragen. Daarna schrijf je een plan in plans/vak-filter.md. ``` ### Eerst de vragen #### De agent vraagt - Welke vakken: een vaste lijst, of de vakken uit je taken? - Een dropdown, of een knop per vak? - Moet de keuze blijven staan na herladen? - Wat met het vinkje "Toon afgewerkte taken"? #### Jij antwoordt - Uit de taken, elk vak één keer - Een dropdown boven de lijst - Ja, in localStorage - Dat blijft werken, samen met de filter ### Zo gaat het vaak **Jij:** maak een filter op vak _Leest script.js_ **Agent:** Ik zet het project om naar Vite met React, dan kan je later makkelijk filters en andere features toevoegen. _npm create vite@latest . -- --template react_ node_modules, package.json en 14 andere bestanden _Bewerkt index.html, src/App.jsx, src/Filter.jsx, src/storage.js_ + Taken bewaard onder tasks in plaats van studieplanner-taken + Het vinkje "Toon afgewerkte taken" weggelaten + Filter op vak, met een vaste lijst van vakken **Agent:** Klaar! De filter werkt. Start de app met npm run dev. **Jij:** waar zijn al mijn taken?? en index.html openen doet niks meer **Agent:** Je hebt helemaal gelijk, sorry! Ik pas het meteen aan. **Jij:** zet alles terug **Agent:** Ik heb het checkpoint teruggezet. node_modules en package.json blijven staan: die kwamen van een commando, niet van een bewerking. ### Zo werkt het **Jij:** Ik wil een filter op vak boven de lijst met taken. Nog niets wijzigen. Lees de code die erbij hoort en stel me eerst je vragen. Daarna schrijf je een plan in plans/vak-filter.md. _Leest AGENTS.md, index.html, script.js, style.css_ **Agent:** De lijst wordt opgebouwd in render() in script.js, het vinkje voor afgewerkte taken filtert daar al. Voor ik verder plan: 1. Welke vakken: een vaste lijst, of de vakken uit je taken? 2. Moet de keuze blijven staan na herladen? 3. Wat als het bewaarde vak geen taken meer heeft? _Maakt plans/vak-filter.md_ + Context en relevante code + Open vragen: 3 **Jij:** De vakken uit de taken, elk één keer, alfabetisch. En een optie Alle vakken bovenaan. _Werkt plans/vak-filter.md bij_ + Beslissing: vakken uit de taken, alfabetisch, met Alle vakken **Jij:** Ja, onthouden in localStorage, maar onder een eigen key. Heeft dat vak geen taken meer, dan toon je alles. _Werkt plans/vak-filter.md bij_ + Beslissing: keuze onder studieplanner-vak + Beslissing: onbekend vak, dan Alle vakken **Jij:** Het vinkje voor afgewerkte taken moet blijven werken, samen met deze filter. En blijf van de opslag van de taken af. _Werkt plans/vak-filter.md bij_ + Stap 2: filter op vak en vinkje samen in render() + Niet doen: studieplanner-taken aanpassen **Agent:** Het plan staat klaar: vier stappen, elk met een check in de browser. Eén open vraag nog: moet een vak los van hoofdletters tellen, zodat Webdev en webdev één vak zijn? Ik ging uit van ja. **Jij:** Ja. Ik lees het plan. ### Het plan *plans/vak-filter.md* ```md # Plan: filter op vak in de Studieplanner ## Context De lijst met taken wordt opgebouwd in render() in script.js, de vroegste deadline bovenaan. Het vinkje "Toon afgewerkte taken" filtert daar al. De taken staan in localStorage onder studieplanner-taken. ## Beslissingen (uit het gesprek) - De vakken komen uit de taken, elk één keer, alfabetisch. Bovenaan staat Alle vakken. - Hoofdletters tellen niet: Webdev en webdev zijn één vak. - De keuze blijft staan na herladen, in localStorage onder studieplanner-vak. - Heeft het bewaarde vak geen taken meer, dan tonen we Alle vakken. - De filter en het vinkje werken samen. ## Relevante code - index.html Het formulier #nieuwe-taak, de lijst #taken en het vinkje #toon-afgewerkt. - script.js taken wordt geladen uit localStorage, render() bouwt de lijst, bewaar() schrijft de taken weg. - style.css De stijl van het formulier, die volgen we voor de dropdown. ## Stappen - [ ] 1. De dropdown Een boven #taken + vulVakken(): Alle vakken en de vakken uit de taken, met new Option() _Werkt plans/vak-filter.md bij_ + [x] 1. De dropdown **Agent:** Stap 1 is klaar. Check voor jou: herlaad index.html. De dropdown toont Alle vakken en elk vak één keer, alfabetisch. Filteren doet hij nog niet, dat is stap 2. Ik stop hier. **Jij:** Top. Ik lees de wijzigingen en check het. ### Na elke stap 1. **Lees de wijzigingen**: In de diff van je tool, bestand per bestand. Een bestand dat niet in de stap stond, is je eerste vraag. 2. **Doe de check**: De check uit het plan, in de browser, met de console open. 3. **Klopt het niet?**: Terug naar het checkpoint van voor de stap, en opnieuw met een betere prompt. 4. **Klopt het wel?**: Een nieuwe sessie, of /clear, voor de volgende stap. ### Connectors Tot nu toe kent de agent alleen je map. Een connector geeft hem tools in andere software, via MCP. - **Een browser**: De pagina openen, klikken en de console lezen. - **Figma**: Het design lezen dat je moet bouwen. - **Notion of Drive**: De opdracht of de notities van de klant. - **GitHub**: Issues lezen en pull requests openen. Het verschil met een API: daar schrijf jij de code die een endpoint oproept. Bij MCP leest de agent wat elke tool doet, en kiest hij zelf. ### Als het misloopt #### Niet - Vijf keer "nee, anders" in dezelfde sessie. Elke foute poging blijft in de context. - De agent laten zoeken tot het werkt, hoe dan ook - Doorgaan in een sessie die het plan begint te vergeten #### Wel - Terug naar het checkpoint, en opnieuw met een betere prompt - De stap in het plan kleiner maken - Een nieuwe sessie die het plan opnieuw leest ### Wat doe je nu **1. Stap 2 van je plan. De agent meldt dat hij klaar is, en heeft ook style.css en bewaar() aangepast.** - Laten staan, het werkt - **Terug naar het checkpoint, en de stap scherper maken** ✓ - Vragen of hij het wat kan opkuisen bewaar() staat in Niet doen, en style.css hoort niet bij deze stap. Zet het checkpoint terug en zeg in je prompt welke bestanden hij mag raken. Opkuisen in dezelfde sessie maakt de wijziging alleen groter. **2. Derde poging, de dropdown blijft leeg. De agent stelt voor om het project om te zetten naar React.** - Laten doen, React is beter - Overschakelen naar een ander model - **Stoppen en zelf in de console kijken waarom** ✓ Een herschrijving is de grootste omweg naar "het werkt", en een fout in de console zegt je vaak in één regel wat er mis is. Misschien is er echt een andere aanpak nodig, maar dat beslis jij na het lezen. **3. De agent meldt: klaar, alles werkt. Hij heeft de pagina nooit geopend.** - **Zelf de check uit het plan doen in de browser** ✓ - Geloven, hij heeft de code gelezen - Meteen aan de volgende stap beginnen Zonder dat iemand de pagina opende, is "alles werkt" een gok. Daarom vraagt elke stap-prompt wat jij moet checken. **4. Je zet een checkpoint terug, maar er staan nog een node_modules en een package.json in je map.** - Het checkpoint is stuk - **Die kwamen van een commando: zelf weggooien** ✓ - Laten staan, ze doen geen kwaad Een checkpoint zet alleen terug wat de agent bewerkte. Wat npm aanmaakte, blijft staan. Gooi het weg, en "geen npm" in AGENTS.md voorkomt het de volgende keer. ### Opdracht: Bouw stap voor stap *30 minuten* 1. Stap 1 van je plan, met een prompt per stap: alleen deze stap, zeg wat ik moet checken, stop 2. Lees de wijzigingen in de diff en doe de check in de browser 3. Een nieuwe sessie, of /clear, voor de volgende stap 4. Loopt een stap mis: terug naar het checkpoint en de stap kleiner maken 5. Klaar als de filter werkt en je elke stap kan uitleggen zonder de chat te herlezen ## 4. Reviewen **Het werkt, maar klopt het?** Een agent die iets werkend moet krijgen, vindt de kortste weg. Soms is dat de oplossing, soms een omweg die je pas later voelt. ### Waar je op let | Wat | Waarom het gebeurt | | --- | --- | | Bestanden of functies die niet in het plan stonden | Het model verbetert wat het onderweg tegenkomt | | Een andere key of een ander formaat in `localStorage` | De agent ziet je bestaande data niet | | Een framework, een script van een CDN of npm | Een package voelt als een oplossing | | `innerHTML` met tekst van de gebruiker, een `catch` die alles inslikt | Het werkte niet meteen, dus ging het eromheen | **[Werken met AI](https://slides.mctantwerp.be/nl/the-agency/23-werken-met-ai)**: Hoofdstuk 10: de review-oefening, met vijf fouten in één pull request. ### Een tweede paar ogen **Jij:** Lees plans/vak-filter.md en de code in deze map. Je schreef deze code niet. Meld wat je niet zou goedkeuren, wat tegen het plan ingaat, en wat er gebeurd is dat niet in het plan staat. Wijzig zelf niets. _Leest plans/vak-filter.md, AGENTS.md, index.html, script.js, style.css_ **Reviewer:** Drie dingen: 1. script.js, regel 48: de taken zelf komen via innerHTML in de lijst. Een titel als voert code uit. Gebruik textContent. 2. Een bewaard vak zonder taken geeft een lege lijst, tegen de beslissing in het plan. 3. Niet in het plan: style.css kreeg een nieuwe kleur voor alle knoppen. **Jij:** 1 en 2 laat ik fixen in een nieuwe sessie, als stap 5 in het plan. De kleur zet ik zelf terug. ### Opdracht: Review per twee *15 minuten, Per 2* 1. Wissel van laptop. Lees het plan en de code van de ander, en probeer de filter in de browser 2. Zoek één regel die je niet zou goedkeuren. De maker legt uit waarom hij er staat. 3. Laat daarna een nieuwe sessie reviewen met de prompt van daarnet 4. Vergelijk: wat vond de buur, wat vond de agent, wat geen van beide? 5. Klaar als elke opmerking gefixt is als een nieuwe stap in het plan, of bewust genegeerd ## 5. Met git ### Een commit per stap ```console $ git switch -c vak-filter $ git diff --stat index.html | 4 ++++ plans/vak-filter.md | 2 +- script.js | 18 ++++++++++++++++++ $ git add -p $ git commit -m "Dropdown voor de filter op vak" ``` Een commit vervangt het checkpoint. Hij overleeft elke sessie, en `git status` toont ook wat een commando aanmaakte. Liever klikken? [GitHub Desktop](https://docs.github.com/en/desktop/making-changes-in-a-branch/committing-and-reviewing-changes-to-your-project-in-github-desktop) laat met een klik op het regelnummer één regel buiten een commit. ### Commits reviewen ```console $ git log --oneline main..HEAD e7d2b19 textContent voor taken, Alle vakken bij een onbekend vak c41e9a2 Filter op vak onthouden in localStorage 8b07d13 Filteren op vak in render() 2f5a6e0 Dropdown voor de filter op vak a91c3d4 Plan voor de filter op vak ``` *Prompt voor een nieuwe sessie* ```md Review mijn commits met git diff main...HEAD. Je schreef deze code niet. Meld wat je niet zou mergen en wat niet in plans/vak-filter.md staat. Wijzig zelf niets. ``` ### Een pull request *Pull request* ```md ## Wat Filter op vak boven de lijst, onthouden na herladen. Werkt samen met "Toon afgewerkte taken". ## Hoe getest In de browser: elk vak, met en zonder afgewerkte taken, herladen. ## AI Plan en alle stappen door de agent, zie plans/vak-filter.md. Na review: textContent en een onbekend vak in stap 5, de kleur van de knoppen zelf teruggezet. ``` Pushen en de pull request openen doe jij: `git push -u origin vak-filter`, dan `gh pr create --fill --web`. ### Worktrees Een tweede werkmap van dezelfde repo, op een andere branch. Een agent werkt in de ene map, jij of een tweede agent in de andere. - **Handig**: Twee taken tegelijk die andere bestanden raken. Een hotfix tussendoor, zonder je werk te stashen. - **Niet handig**: Taken die dezelfde bestanden raken. Meer agents dan je diffs kan lezen. **[Werken met AI](https://slides.mctantwerp.be/nl/the-agency/23-werken-met-ai)**: Hoofdstuk 9: worktrees per tool, wat ze niet meenemen, en wanneer ze de moeite zijn. ### De agent meldt na stap 3: klaar, alles werkt. Wat doe je eerst? - A. Stap 4 starten in dezelfde sessie - B. De wijzigingen lezen en de check uit het plan doen - C. Vragen of hij het zeker weet - D. Meteen committen **Antwoord:** B. De wijzigingen lezen en de check uit het plan doen Een bestand dat niet in de stap hoorde, of een andere key in localStorage, zie je alleen in de wijzigingen. En of het werkt, weet je pas als iemand de pagina opende. De agent zegt dat hij het zeker weet, ook als het niet klopt. ### Wat zet een checkpoint niet terug? - A. Een regel die de agent in script.js aanpaste - B. Een nieuw bestand dat de agent zelf schreef - C. Wat npm install in je map zette - D. Een vinkje dat de agent in het plan zette **Antwoord:** C. Wat npm install in je map zette Een checkpoint kent alleen de bewerkingen van de agent zelf. Wat een commando in de terminal deed, zoals npm install of een bestand verplaatsen, blijft staan na het terugzetten. ### Waarom zet je het plan in een bestand en niet alleen in het gesprek? - A. Een agent volgt een bestand strenger dan een prompt - B. Zo telt het niet mee in het contextvenster - C. Een nieuwe sessie kan het lezen, een oud gesprek niet - D. Plan mode werkt alleen met een bestand **Antwoord:** C. Een nieuwe sessie kan het lezen, een oud gesprek niet Met een plan in een bestand begin je elke stap in een verse sessie, met een leeg venster, en weet de agent toch waar je zit. Het telt wel mee in de context zodra hij het leest, en een agent volgt het niet strenger: het is gewoon tekst die blijft bestaan. ## Begrippen - **Agent**: Een taalmodel in een lus met tools: het leest bestanden, voert commando's uit, past code aan en kijkt naar het resultaat, tot de taak af is. (slide 3) - **Checkpoint**: Een momentopname die je tool neemt voor de agent iets wijzigt. Terugzetten draait de bewerkingen van de agent terug, niet wat een commando in de terminal deed. (slide 6) - **Plan mode**: Een stand waarin de agent je code leest en vragen stelt, maar nog niets wijzigt. In Claude Code en Cursor met Shift+Tab, in Codex met /plan. (slide 15) - **Skill**: Een map met een SKILL.md: een naam, een beschrijving en instructies. De agent laadt de instructies pas als de beschrijving past bij wat je vraagt. (slide 11) - **Connector**: Een koppeling via MCP tussen je agent en andere software, zoals een browser, Figma of Notion. De agent krijgt er tools bij die hij zelf kiest. (slide 27) - **MCP**: Model Context Protocol: de afspraken waarmee een agent tools van andere software ontdekt en oproept. Vaak een dun laagje rond een API die er al is. (slide 27) - **Worktree**: Een tweede werkmap van dezelfde repo, op een andere branch. Zo werkt een agent in de ene map en jij of een tweede agent in de andere. (slide 40) - **TASKS.md**: Eén lijst met alles wat nog moet gebeuren in je project, met een verwijzing naar het plan van wat bezig is. Vermeld hem in AGENTS.md, dan leest de agent hem bij elke start. (slide 21) - **Diff**: Wat er in een bestand veranderde: de regels die erbij kwamen en de regels die weg zijn, naast elkaar. (slide 26) ## Links en bronnen ### In de presentatie - [Agent Skills](https://agentskills.io) (slide 11): De open standaard achter SKILL.md - [GitHub Desktop](https://docs.github.com/en/desktop/making-changes-in-a-branch/committing-and-reviewing-changes-to-your-project-in-github-desktop) (slide 37) ### Bronnen - [Claude Code: best practices](https://www.anthropic.com/engineering/claude-code-best-practices): Verkennen, plannen, bouwen - [Claude Code: permission modes](https://code.claude.com/docs/en/permission-modes): Plan mode en Shift+Tab - [Claude Code: checkpointing](https://code.claude.com/docs/en/checkpointing): Wat /rewind terugdraait en wat niet - [Codex CLI: slash commands](https://developers.openai.com/codex/cli/slash-commands): /plan, /review, /new en /init - [VS Code: checkpoints and editing](https://code.visualstudio.com/docs/copilot/chat/chat-checkpoints): Restore Checkpoint en de diff boven de chat - [Cursor: checkpoints](https://cursor.com/docs/agent/chat/checkpoints) - [Cursor: Plan Mode](https://cursor.com/docs/agent/planning) - [AGENTS.md](https://agents.md) - [Model Context Protocol](https://modelcontextprotocol.io) - [GitHub CLI: gh pr create](https://cli.github.com/manual/gh_pr_create)