Vibe-Coding met een Agent IDE: Mijn Ervaringen met Cursor

Introductie

De wereld van software development is veranderd met de komst van AI-powered development tools zoals Cursor IDE. In mijn jeugd programmeerde ik in GW Basic, losse text bestanden die direct via de commandline uitgevoerd werden. Tijdens mijn studie Hogere Informatica kwam ik voor het eerst in aanraking met een IDE wat een veel gestructureerde manier van werken was. Sinds C# 1.1 werd het programmeren steeds makkelijker met de komst van Visual Studio en later met plugins zoals WholeTomato en ReSharper leek het programmeren steeds meer vanzelf te gaan. Je hoeft niet meer elke letter code zelf te schrijven maar veel code werd voor je geschreven d.m.v. structurele refactoring. Zo’n 10 jaar geleden besefte ik dat we hierin stilstand hadden bereikt, ja er kwamen steeds nieuwe versies van Visual Studio en ja, ik was inmiddels overgestapt op de IDE Project Rider, maar een echte hoopvol verwachte nieuwe revolutie was dit niet. Ik heb wel eens hardop gefantaseerd met collega's wat de volgende stap zou zijn, we kwamen uiteindelijk uit op een directe interface met onze hersenen waarbij de code werd geschreven door onze gedachtes.

In deze blogpost neem ik jullie mee in mijn ervaringen met de nieuwe revolutie in de wereld van programmeren: "vibe coding". Het ontwikkelen van software waarbij je in een flow komt met een AI-agent als je pair programming partner. Zelf schrijf je de code niet, hoewel het geen directe link is met je hersens, komt het toch op de een of andere manier wel heel erg dicht bij de gedachtes die wij destijds hadden.

Mijn eerste ervaring: Een "hello world" calculator

Normaal begin je een nieuwe programmeertaal te leren met de bekende "Hello World" implementatie, maar mijn gevoel was dat AI wel direct meer aankon. Dus begon ik met een redelijk on-gedetailleerde prompt voor het bouwen van een minimale calculator applicatie.

"You are an experienced Angular developer with loads of experience building Angular frontends. I want you to create a minimal calculator application that does all the basic calculations."

Het resultaat? Mijn mond viel open van verbazing. De agent begon direct met het opzetten van een Angular applicatie, het implementeren van components en het toevoegen van styling. Binnen een minuut had ik een volledig werkende calculator en met een keurig design, niet het welbekende grijze "developer design" met standaard knoppen. Met dit resultaat besefte ik dat dit dé nieuwe revolutie is waar ik al die jaren hoopvol op had gewacht.

De reality check

Naar mate ik samen met de agent verder werkte aan nieuwe features voor de calculator, besefte ik dat het (nog niet) de heilige graal was. Soms maakte de agent keuzes die ik niet begreep, hij volgde niet altijd mijn instructies op en introduceerde bugs in bestaande functionaliteit bij het bouwen van nieuwe features.

Ik merkte dat ik zelfs gefrustreerd en boos werd op mijn nieuwe pair-programming partner waar ik eerder nog zo euforisch over was. Na een korte zelfreflectie sessie begon ik op zoek naar oplossingen.

Prompts, Prompts, Prompts...

Na wat gerichte research over het werken met IDE agents bleek wat ik al wist van mijn ervaring met de AI chat bots, de kwaliteit van het resultaat is afhankelijk van de vraag (of prompt) die je stelt. Ook de IDE Agents hebben duidelijke instructies nodig, je moet ze op de juiste manier begeleiden, instructies geven en controleren.

Gelukkig hoeven we niet bij elke opdracht de volledige context van je project op te geven maar kunnen we gebruik maken van agent.md bestanden. Deze plaats je in elke folder die extra context en instructies behoeft. Wanneer de agent een bestand in je project bewerkt zal deze alle agent.md bestanden vanaf de betreffende folder tot aan de root folder inlezen en toevoegen aan de opdracht prompt.

In de root van je project geef je een beschrijving van het project en algemene instructies die van toepassing zijn op al je code. In de onderliggende folders, zoals een folder backend of frontend geef je extra instructies specifiek voor de inhoud van die folder. Bij het juist inrichten van de prompts voor de agent kun je weer samen met je pair programming partner door één deur.

Bug-terminator 3000

Net als menig menselijke developers, is de IDE agent heel goed in het maken van bugs, maar gelukkig is deze ook uitermate geschikt om ze weer op te lossen. Waar een developer eerst een uitgebreide analyse nodig heeft eventueel ondersteund door online research, heeft de digitale tegenhanger genoeg aan de error melding als prompt en is de bug binnen no-time opgelost.

In het geval van een compileer foutmelding kan het zelfs nog gemakkelijker door een hele simpele prompt uit te voeren:

"De build faalt, zorg ervoor dat deze slaagt."

Nog voordat je jouw verse kopje koffie hebt ingeschonken heb je weer een succesvolle build!

Debuggen met de Agent

Wanneer het niet een simpele foutmelding of compileer fout betreft kun je samen met je digitale pair-programming partner beginnen aan een debug sessie. Dit kun je bijvoorbeeld doen door de agent te vragen om extra logging toe te voegen om de bug te kunnen analyseren. Door de logging terug te koppelen aan de agent prompt kan deze het probleem beter begrijpen en oplossen. Soms zijn er meerdere iteraties en additionele logging nodig om tot een oplossing te komen maar samen komen we daar prima uit.

Als je echt hardcore wilt gaan, kun je zelfs de agent vragen om een playwright test te schrijven om de bug te reproduceren, uitvoeren, analyseren en oplossen.

Of nog een stapje verder, geef de agent toegang tot je test/productie logging (b.v. Application Insights) en laat hem de logs uitlezen, analyseren en oplossen.

Technical PO: De Agent als Team

Naarmate ik meer ervaring kreeg met het bouwen van een applicatie met een agent, begon ik te beseffen dat ik niet meer aan het programmeren was, ik was aan het dirigeren. De agent fungeert als een volledig ontwikkel team, bestaande uit de onderstaande rollen en ik vertel vanuit een product owner rol welke features ik gebouwd wil hebben. Niet zomaar een PO, maar eentje met uitgebreide techniche know-how, een PO die weet dat we service bus en een redis cache nodig hebben.

De Agent als team:

• Backend developer - Implementeert API's en business logic -
• Frontend developer - Bouwt UI componenten -
• DevOps engineer - Configureert en deployed de Azure infrastructure -
• Designer - Creëert gebruiksvriendelijke UI/UX -
• Security expert - Identificeert potentiële security issues

CSS styling issues

Hoewel een agent kan fungeren als een ervaren UI designer met de juiste prompts, werken ze zonder enig visuele feedback. Ze kunnen de interface die ze creëren niet echt "zien".

Ik merkte dat ik regelmatig in discussie ging met de agent over de plaatsing van componenten, zichtbaarheid van elementen en styling details. Met veel geduld, duidelijke prompts en een beetje eigen analyse kom je een heel eind, maar soms moet je toch even teruggrijpen op je eigen CSS skills.

Niet zo DRY

Agents hebben vaak een duidelijk projectoverzicht vanuit gedetailleerde agents.md bestanden, maar hebben door de manier dat ze werken wel last van tunnelvisie, omdat niet het hele project in de prompt is opgenomen. Je zult bijvoorbeeld een agent dus expliciet in een prompt moeten aangeven om bepaalde componenten te hergebruiken, doe je dit niet dan is de kans groot dat de agent nieuwe code gaat schrijven in plaats van bestaande code te hergebruiken.

De Agent als domain expert

Een zeer waardevolle feature is dat de agent jouw project kan analyseren en uitleggen. Vraag hoe het caching mechanisme in je backend werkt en geef daarbij aan dat dat je een rapport wilt in een door jouw gekozen formaat. Al snel rolt er een compleet overzicht uit zodat je zelf niet meer hoeft te grasduinen in je eigen code.

Je zou de agent zelfs in kunnen zetten voor

• code reviews

• onboarding van nieuwe teamleden

• documentatie genereren

• complexe logica begrijpen

Lazy Developers

Maar wees jezelf wel bewust van de keerzijde van het gebruik van AI agents, studies tonen aan dat developers minder zorgvuldig of zelfs lui worden wanneer ze agents gebruiken. Taken die zo basic zijn als het hernoemen van bestanden worden aan de agent overgelaten en complexe analyses worden in hapklare brokken geserveerd en zelfs geïmplementeerd. Dit kan leiden tot een afname van je eigen vaardigheden en begrip van je eigen codebase.

Conclusie

Werken met een Agent IDE zoals Cursor is een fascinerende ervaring. Het kan je productiviteit enorm verhogen en nieuwe manieren van ontwikkelen mogelijk maken. Maar het is geen magie - het vereist:

• Goede prompts - Context en duidelijkheid zijn cruciaal

• Controle en begeleiding - De agent is een tool, geen vervanging

• Veiligheidsmaatregelen - Beperk toegang en controleer de output

• Realistische verwachtingen - Niet alles gaat perfect

"Vibe coding" is een experimentele aanpak die voor prototyping en hobby projecten uitstekend werkt. Voor productie waarbij code kwaliteit belangrijk is, moet je bewust blijven dat je als professional altijd verantwoordelijk bent voor de code die je laat schrijven.

De toekomst van development ziet er interessant uit. AI-agents worden steeds krachtiger, en tools zoals Cursor maken het mogelijk om op een nieuwe manier te ontwikkelen. Maar onthoud: de beste developer is nog steeds een mens die AI gebruikt als een krachtige tool, niet als vervanging.

Dan rest nu nog maar één vraag, Geef jij je AI Agent volledige controle? Bij XPRTZ gaan wij graag in gesprek over uitdagende onderwerpen, kom jij bij ons op de koffie?