Leerpad
AI-toepassingen ontwikkelen
21 uur
Eind vorige maand kondigde Cursor 2.0 aan, een nieuwe versie van Cursor die agentische ontwikkeling naar Cursor brengt.
Als je nieuw bent met Cursor, raden we aan om eerst onze tutorial Cursor AI: een gids met 10 praktische voorbeelden te lezen. Zoals we weten, wordt Cursor vertrouwd door engineers van toonaangevende AI-bedrijven, waaronder OpenAI, en biedt AI-ondersteund coderen, slimme codesuggesties en integratie met diverse ontwikkeltools.
In deze tutorial verken ik de belangrijkste features van de nieuwe Cursor 2.0 door een webapp voor valutawissel te bouwen in Python.
Wat is er nieuw in Cursor 2.0?
Voor een volledige lijst met functies van Cursor 2 verwijzen we je graag naar hun officiële changelog. In deze tutorial focussen we op de features die het meest relevant zijn voor kleine teams en solodevelopers.
Composer-model
Cursor introduceert zijn eerste eigen codemodel genaamd Composer. Ze claimen dat het ~4× sneller is dan vergelijkbaar capabele modellen en specifiek is afgesteld op agentische, meerstaps codeworkflows. Het belangrijkste doel is het verminderen van latentie, zodat het meer voelt alsof je in real time met de AI samenwerkt in plaats van wacht.
Multi-agent interface en orkestratie
Cursor 2.0 verschuift van één agent die je helpt naar meerdere agents die parallel draaien. Tot 8 agents kunnen parallel draaien op één prompt. Elke agent krijgt een eigen geïsoleerde kopie van de codebase zodat ze elkaar niet in de weg zitten. Een zijbalk-UI toont je agents/plannen, en je kunt de beste output kiezen uit meerdere runs.
Ingebouwde browser- en testmogelijkheden
De browsertool (voorheen bèta) is nu algemeen beschikbaar. Agents kunnen een webpagina binnen Cursor openen, DOM-elementen inspecteren, DOM-info doorsturen naar de agent en UI-wijzigingen testen. Dit betekent dat je AI-agent zich beter bewust is van de webomgeving en wijzigingen kan valideren in plaats van alleen blind code te bewerken.
Aan de slag met Cursor 2.0
Om te beginnen, download en installeer Cursor 2 via hun officiële website. Zorg dat je versie 2 downloadt en het juiste besturingssysteem selecteert.
De meeste features die we in deze tutorial bespreken, vereisen een Pro-abonnement, dat ongeveer $20 per maand kost. Cursor 2 heeft echter een gratis proefperiode van een week, zodat je ermee kunt experimenteren en deze tutorial gratis kunt volgen.
Om toegang te krijgen tot de proefperiode, moet je je creditcardgegevens invoeren. Je kunt kosten voorkomen en de 7-daagse proef ervaren door het abonnement op te zeggen voordat de proef afloopt.
Een waarschuwing: na het starten van de gratis Pro-proef toont de interface een knop om Pro-functies te gaan gebruiken. Dit is misleidend en niet vereist om tijdens de proefperiode toegang te krijgen tot Pro-functies. Als je erop klikt, beëindig je de gratis proef automatisch en worden de kosten voor de eerste maand in rekening gebracht, wat waarschijnlijk niet is wat je wilt.
Een app maken met Cursor 2.0
Om Cursor 2 te testen, hebben we een webapp voor valutaconversie gemaakt met Python. De app is volledig met Cursor 2 gemaakt.
Na installatie schakel je over naar de nieuwe "Agents"-weergave:
Een van de nieuwe features van Cursor 2 is de mogelijkheid om onze app automatisch te browsen om deze te testen. Daarom besloot ik een Streamlit-webapp met Python te maken.
Streamlit is een open-source Python-framework dat is ontworpen om snel en eenvoudig interactieve webapplicaties te maken, vooral voor data science- en machine learning-projecten.
Met Streamlit kun je user interfaces bouwen voor je Python-code door simpele scripts te schrijven, zonder front-endervaring nodig te hebben. Het wordt vaak gebruikt voor het bouwen van dashboards, datavisualisaties en tools waarmee gebruikers in real time via de webbrowser met data of modellen kunnen werken.
We gebruiken Streamlit om een app te maken waarmee je eenvoudig tussen valuta’s kunt converteren. Vanuit een lege map is dit de initiële prompt die ik gebruikte:
Let op dat het model dat ik gebruikte het nieuwe Composer-model van Cursor 2 is. Andere modellen kun je selecteren met de modelkiezer onder het invoerveld voor prompts.
Dit is de app die het maakte:
Navigeren in de Cursor Agents-weergave
De nieuwe "Agents"-weergave organiseert onze wijzigingen als gesprekken met verschillende AI-modellen. De workflow lijkt op het gebruik van een ChatGPT-gesprek per feature, behalve dat alles direct in Cursor 2 is geïntegreerd.
We kunnen verschillende modellen voor elke agent gebruiken en zelfs meerdere modellen tegelijk, zoals we later zullen bespreken. De vorige code-editorweergave blijft beschikbaar, zodat we eenvoudig kunnen schakelen tussen code schrijven, zoals we deden met de vorige versie van Cursor, en werken met agents.
Cursors Composer-model
Composer is een nieuw agentmodel ontwikkeld door Cursor, speciaal ontworpen om software-engineeringtaken efficiënt en intelligent te ondersteunen.
Het model is getraind om echte codeerproblemen binnen grote codebases op te lossen met behulp van diverse ontwikkeltools, zoals bestanden bewerken, terminalcommando’s en semantisch zoeken.
In tegenstelling tot traditionele code-assistenten die zich alleen richten op code completion, kan Composer complexere taken aan, waaronder het genereren van code-edits, het opstellen van ontwikkelplannen of het geven van informatieve antwoorden op basis van de context van het probleem dat het krijgt.
Het trainingsproces van het model is gebaseerd op reinforcement learning, waardoor het zich kan aanpassen aan verschillende ontwikkelomgevingen en het effectief gebruik van tools en responssnelheid kan prioriteren. Deze focus op snelheid en praktische bruikbaarheid maakt het zeer geschikt voor scenario’s waarin developers snel, relevant hulp willen zonder hun workflow te verstoren.
Composer is geëvalueerd aan de hand van benchmarks die echte verzoeken van werkende engineers weerspiegelen, zodat de output aansluit bij gangbare softwareontwikkelpraktijken. Deze benchmarks zijn echter privé en Composer staat niet op de bestaande openbare AI-benchmarks, dus we moeten dit met een korreltje zout nemen.
Composer op de proef stellen
Een van de nieuwe features van Cursor 2 is de multi-agentinterface.
De multi-agentinterface maakt het mogelijk om verschillende modellen hetzelfde codeerprobleem te laten aanpakken, zodat we resultaten kunnen vergelijken en de meest effectieve oplossing kunnen kiezen.
De interface bevat tools om wijzigingen van elke agent te bekijken en een native testfunctie die agents in staat stelt hun output iteratief te verbeteren totdat deze aan de vereisten voldoet. Deze combinatie is vooral nuttig voor complexe projecten, omdat het kan helpen bij het versnellen van review-, test- en codetaken.
We hebben dit gebruikt om het Composer-model te vergelijken met andere state-of-the-art AI-codemodellen op een complexe taak. Om meerdere agents te activeren, klikken we op de 1x-selector onder het promptveld en selecteren we "Use Multiple Models".
De taak die we voor deze vergelijking gebruikten, was het toevoegen van persistentie in de standaardvaluta’s. Op dit moment wordt, zodra de gebruiker de pagina vernieuwt, de lijst met valuta’s die voor conversie wordt gebruikt, gereset. We willen dat dit wordt opgeslagen, zodat de valuta’s bewaard blijven als de gebruiker de pagina opnieuw bezoekt of herlaadt.
We kozen deze taak omdat deze wat complexer is, aangezien het framework dat we gebruiken om onze app te bouwen niet echt is ontworpen voor dit soort functionaliteit.
Ik selecteerde drie modellen voor deze taak:
- Composer
- Sonnet 4.5
- GPT-5 Codex
We kunnen tot acht modellen parallel laten werken. Dat kan echter wat overkill zijn als we van plan zijn om elke output te bekijken en de beste te selecteren. Ik vond drie een sweet spot: voldoende variatie in oplossingen, maar niet zóveel dat het meer tijd kost om ze te controleren dan wanneer ik de oplossing zelf had geïmplementeerd.
Hier is een video van drie agents die parallel aan het probleem werken. We zien dat Composer inderdaad veel sneller is dan de andere twee.
Uiteindelijk kunnen we eenvoudig schakelen tussen de drie outputs en de verschillen in elk ervan bekijken. Vervolgens kunnen we op de knop "Apply All" klikken bij degene die we in onze code willen integreren.
In dit specifieke geval, ondanks dat het veel langer duurde, was mijn voorkeursoplossing die van GPT-5 Codex omdat die minder hacky leek en bestaande libraries gebruikte om het probleem op te lossen.
Snelheid is echter erg belangrijk bij codecompletions omdat het om een realtime usecase gaat. Hier blinkt Composer uit vergeleken met andere modellen, omdat het zeer snel goede codesuggesties kan geven, wat zorgt voor een vloeiende code-ervaring.
Planningsmodus
In plaats van dat de agent direct codewijzigingen voorstelt, kunnen we de modus “Plan” gebruiken om eerst aan een implementatieplan te werken. Hierdoor kunnen we itereren op het plan en zeker weten dat het uitvoert wat we willen voordat er wijzigingen aan de code worden aangebracht.
Om deze modus te gebruiken, selecteer je de optie “Plan”, zoals hier:
In deze modus krijgen we in plaats van codewijzigingen een markdown-plan van wat de agent van plan is te doen om de feature te implementeren. In dit geval kregen we dit:
Stel dat ik de streamlit_js_eval-bibliotheek wil gebruiken om JavaScript-code uit te voeren. Dit was iets wat de GPT-5 Codex-oplossing gebruikte en dat robuuster aanvoelde dan de oplossing van Composer. We kunnen de agent vragen het plan hierop aan te passen:
Na het opnieuw uitvoeren zien we dat de bibliotheek is opgenomen in het nieuwe plan:
Als we tevreden zijn met het plan, kunnen we de wijzigingen doorvoeren door op de knop “Build” te klikken.
De Browser Agent
De Agent browser-functie van Cursor stelt gebruikers in staat een ingebouwde webbrowser direct binnen de Cursor-omgeving te bedienen.
Dit betekent dat we veelvoorkomende taken kunnen automatiseren, zoals webpagina’s navigeren, formulieren invullen, knoppen aanklikken en screenshots maken, zonder externe tools of setup nodig te hebben. De browser biedt ook directe toegang tot consolelogs en netwerkactiviteit, waardoor het eenvoudiger wordt om problemen te identificeren of webapplicaties te debuggen.
Deze feature is nuttig voor uiteenlopende taken, waaronder geautomatiseerd applicatietesten, webtoegankelijkheid controleren en webdesigns vergelijken met daadwerkelijke implementaties.
Om het aan te roepen gebruiken we de mention @Browser in de prompt.
Een veelvoorkomende usecase voor de browseragent is het testen van de applicatie. Zo vragen we om de valuta-converter te testen door 100 USD om te zetten naar euro’s en Japanse yen:
Als we dit doen, start Cursor de applicatie automatisch en voert een geïntegreerde browser uit om de taak uit te voeren die we hebben gevraagd.
Tijdens het proces kan het nodig zijn enkele commando’s uit te voeren, die we handmatig moeten goedkeuren. Dit is een veiligheidsmechanisme zodat we commando’s kunnen beoordelen voordat ze worden uitgevoerd.
In dit geval vroeg het mij om een commando uit te voeren om de valuta-app te starten:
Hier is een video van het proces. De browser die we in de video zien, wordt automatisch door Cursor bediend.
