Terug naar artikelen
Developer Experience met Cursor.ai en Claude.ai - Deel 1: Overwegingen & Afnemende Meeropbrengsten

Developer Experience met Cursor.ai en Claude.ai - Deel 1: Overwegingen & Afnemende Meeropbrengsten

Scott Jones - Front-end Developer & Designer

17 maart 2024

Als front-end developer die constant streeft naar het verbeteren van productiviteit, heb ik de afgelopen maanden AI-tools geïntegreerd in mijn dagelijkse workflow. Cursor.ai is mijn editor van keuze geworden, terwijl Claude AI dient als mijn coding partner via zowel de Cursor interface als een standalone webapplicatie. Om mijn AI toolkit compleet te maken, gebruik ik Midjourney voor visuele ontwerptaken waaronder wireframing en UI theming.

Dit artikel is het eerste in een serie waarin ik openhartig zowel de uitdagingen als voordelen deel die ik ben tegengekomen. Voordat we in volgende artikelen de potentiële voordelen verkennen, wil ik eerst de zeer reële beperkingen en valkuilen van deze AI-tools bespreken. Het begrijpen van deze beperkingen is essentieel voordat je AI-assistenten in je professionele ontwikkelingsproces integreert.

Disclaimer

Het gebruik van AI-tools kan mogelijk gevoelige informatie over je organisatie blootstellen - niet alleen code, maar ook structurele en persoonlijke details. Je API-sleutels en andere vertrouwelijke informatie kunnen theoretisch worden opgeslagen of gebruikt voor training, samen met potentieel gevoelige data over gebruikers, teamleden en andere exploiteerbare informatie.

Wanneer je een AI-tool gebruikt, ga er altijd vanuit dat de informatie die je deelt niet gevoelig of vertrouwelijk is.

Cursor.ai

Cursor biedt instellingen waarmee je kunt bepalen welke informatie extern wordt verzonden voor AI-assistentie. Neem de tijd om deze instellingen te bekijken en zorg ervoor dat je bepaalde filters en bestanden hebt gemarkeerd om te voorkomen dat ze naar de server worden verzonden. Controleer daarnaast de code retentie-instellingen in je Cursor account om te beheren hoe lang je code queries worden bewaard.

Claude.ai

Hoewel het gebruik van Claude.ai via een browser je meer controle geeft over de informatie die je deelt (omdat je handmatig de code aanlevert die je wilt analyseren of wijzigen), onthoud dat je code nog steeds tot 30 dagen wordt bewaard op Claude's servers. Het is daarom cruciaal om geen gevoelige structuren of informatie te delen.

Verduidelijking

In dit artikel verwijs ik met Cursor.ai specifiek naar de Claude.ai agent of chatfunctionaliteit binnen Cursor, niet naar GPT. Als ik Claude.ai noem, verwijs ik naar de browserversie van de dienst.

Overmatig gebruik van AI-tools

Zoals we in deze artikelen zullen verkennen, zijn er overtuigende redenen om niet te veel te vertrouwen op AI-tools voor het creëren van code. AI moet strategisch worden ingezet - als een tool om alledaagse taken te automatiseren, inzichten te verzamelen en als sparringpartner te dienen. Overmatige afhankelijkheid van AI om je code te schrijven en te repareren zal uiteindelijk problemen creëren voor zowel jou als je organisatie.

Uitdagingen bij het gebruik van AI

Ondanks de aanzienlijke voordelen en hype rond AI-tools, wil ik eerst enkele uitdagingen bespreken die ik ben tegengekomen. Deze ervaringen zijn authentiek en belangrijk om te begrijpen voordat we verkennen hoe AI mijn werk positief heeft beïnvloed. In het vervolgartikel zal ik de voordelen van werken met AI behandelen.

Te ver gaan

Te ver gaan

Een van de meest voorkomende problemen die ik ben tegengekomen is dat Claude verder gaat dan mijn oorspronkelijke verzoek. Als ik bijvoorbeeld vraag om de afbeeldingen in deze mockbestanden te vervangen met deze lijst van afbeeldingen (img1.png, img2.png) en context geef zoals mock1.json mock2.json, zal het ongeveer 40% van de tijd niet alleen de afbeeldingen updaten maar ook beginnen met het wijzigen van niet-gerelateerde content binnen de JSON-bestanden.

Dit probleem wordt nog belangrijker tijdens grote multi-file refactors, waar de AI mogelijk bestaande functionaliteit begint te verwijderen die volledig losstaat van je oorspronkelijke verzoek. Ik noem dit fenomeen "over-reach" - Claude identificeert wat het ziet als aanvullende problemen en overschrijdt de reikwijdte van wat er werd gevraagd.

Verborgen kosten: Over-reach beïnvloedt je verzoeken, vooral bij gebruik van de "agent" voor multi-file refactors. Als de AI te ver gaat, zal het aanvullende onnodige verzoeken doen. Wanneer je merkt dat het meer doet dan bedoeld, annuleer dan onmiddellijk het verzoek en geef duidelijkere instructies.

Tegenstrijdige informatie in je codebase

Tegenstrijdige informatie in je codebase

Onlangs reviseerde ik een codebase die ik maanden geleden had gebouwd om de back-end API's te refactoren, informatie te condenseren en resources te optimaliseren. Mijn typische workflow bestaat uit het eerst schrijven en testen van code, en daarna het bijwerken van documentatie en readme bestanden.

Deze aanpak creëerde uitdagingen bij het gebruik van Cursor. Toen ik vroeg om een vereenvoudigde API te maken op basis van mijn recent gewijzigde API's, had het toegang tot de volledige API-structuur, back-end utilities, mock data, en cruciaal, het verouderde readme bestand in de root van het project.

Herschrijf de consumer API om nu het bijgewerkte schema te retourneren - consumer.api.js, _mocks/_data.json, readme.md

Het resultaat was een verwarrende mix van recente en oude functionaliteit. Cursor legde te veel nadruk op het verouderde readme bestand in plaats van prioriteit te geven aan de code die ik recent had gewijzigd.

Dit probleem komt ook voor bij inline documentatie - ik heb gevallen meegemaakt waarbij Claude code herschreef omdat de documentatie boven de functie verouderd was. Vaker echter, vanwege de neiging tot over-reach, zou het de documentatie corrigeren om overeen te komen met de functionaliteit.

De aanpak moet meer afgebakend zijn om ervoor te zorgen dat de specifieke context wordt verstrekt: Herschrijf de consumer API om nu het bijgewerkte schema te retourneren - consumer.api.js[200-700], _mocks/_data.json, readme.md[244-450]. Dit commando beperkt de context van de query tot de specifieke bestandsregels, in plaats van de volledige context van de bestand(en).

Context overbelasting

Context overbelasting

Een significant probleem dat de kwaliteit van AI-interacties aanzienlijk beïnvloedt is wat ik "context overbelasting" noem - in essentie te veel informatie verstrekken in één verzoek. Er zijn drie primaire manieren om met de agent of chat te interacteren:

  1. Directe vragen stellen en een doorlopende dialoog voeren
  2. Verzoeken doen met de context van specifieke bestanden of regels
  3. Vragen stellen met de hele codebase als context (met Ctrl + Enter of Cmd + Enter)

Wanneer er te veel informatie in een verzoek wordt opgenomen, komt er gemakkelijk "ruis" in het gesprek, wat resulteert in afnemende kwaliteit over tijd. Grote bestanden, talrijke kleine bestanden, of combinaties van beide creëren snel overbelasting, wat verergert wanneer gecombineerd met uitgebreide Chat-geschiedenissen. Als gevolg hiervan kunnen kritieke delen van je verzoek worden genegeerd, wordt over-reach waarschijnlijker, en kunnen sommige bestanden volledig over het hoofd worden gezien.

Als ik bijvoorbeeld 15 mock data bestanden aanlever die allemaal hetzelfde probleem hebben URLs die "https://" nodig hebben in plaats van "http://" en de AI vraag om dit op te lossen in plaats van een eenvoudige zoek-en-vervang actie, vangt Cursor bijna nooit alle getroffen bestanden in één keer. Het vereist meestal meerdere aanvullende queries om uiteindelijk alle instanties van het probleem aan te pakken.

De betere aanpak, indien mogelijk (voor jouw probleem), is om Cursor in plaats daarvan te vragen om scripts of commando's te leveren om het probleem in één keer aan te pakken: geef me een script dat door mijn data/*.json bestanden gaat en de afbeeldingspaden corrigeert naar absolute en https paden, controleer ook of de afbeeldingen geldig zijn, zo niet, lever een werkende fallback afbeelding. Deze aanpak biedt een oplossing die geen AI-verzoeken vereist, aanvullende pogingen voorkomt en voorkomt dat er dingen worden gemist. De oplossing zal meestal ook gekoppeld zijn aan je project codebase en taal, dus voor mij zal het een nodejs script zijn.

Geheugenbeperkingen

Geheugenbeperkingen

Een andere uitdaging bij het werken met AI is het Vraag / Chat geheugen, dat verder kan worden aangetast door context overbelasting. Zelfs bij het werken aan oplossingen voor één bestand kunnen geheugenbeperkingen snel problematisch worden.

Neem een scenario waarin je probeert een probleem op te lossen met een canvas element, waarbij je het pannen, zoomen en schalen van elementen binnen het canvas aanpast. Als het probleem na enkele pogingen niet is opgelost maar wel verbetering toont, ga je mogelijk door met itereren. Echter, naarmate het gesprek vordert, kan de AI eerdere fixes en verbeteringen beginnen te negeren, wat mogelijk leidt tot achteruitgang in plaats van vooruitgang.

Dit gebeurt omdat de context van eerdere fixes niet meer van toepassing is op nieuwe queries naarmate het gesprek zich uitbreidt. In complexe probleemoplossende scenario's met langere Chat / Vraag geschiedenissen, kun je significante achteruitgang in oplossingen opmerken na slechts 15-30 minuten heen-en-weer communicatie.

Solutions

Oplossingen

Er zijn geen perfecte oplossingen voor deze uitdagingen. Ik ben AI gaan behandelen zoals ik een junior developer in mijn team zou behandelen - rekening houdend met zowel de voordelen als beperkingen. Je kunt een probleem uitleggen aan een junior developer en hen een oplossing laten proberen, maar je weet dat het waarschijnlijk verfijning en verdere begeleiding nodig zal hebben.

Iedereen - mens of AI - overweldigen met te veel informatie leidt tot gemengde resultaten, net zoals onduidelijke instructies geven tot slechte uitkomsten leidt.

Beperk codebase context

Volledige codebase context biedt momenteel beperkte waarde. Focus in plaats daarvan op het includeren van alleen specifieke bestanden en regels die relevant zijn voor je taak, in plaats van hele bestanden en mappen.

Overweeg indirecte benaderingen

Soms is het effectiever om de AI te laten helpen bij het bouwen van een script om een specifieke taak uit te voeren, in plaats van het direct te vragen de taak uit te voeren. Ik heb Cursor scripts laten genereren die mijn codebase verwerken en gerichte wijzigingen aanbrengen, wat betere resultaten opleverde dan wanneer de AI dezelfde taak direct probeerde uit te voeren.

Herbouw in plaats van refactor

In veel gevallen levert het vragen aan de AI om een component of functionaliteit vanaf nul op te bouwen betere resultaten op dan het verzoeken om een refactor. Het refactoring proces introduceert vaak meer ruis en overbelasting, wat leidt tot suboptimale uitkomsten. Opnieuw beginnen met verwijzing naar specifieke regels en datastructuren levert vaak schonere, effectievere resultaten op.

Behoud focus in gesprekken

Houd Vraag / Chat of Agent interacties gefocust op specifieke taken. Als je iteratieve wijzigingen maakt, kopieer en plak dan het initiële doel van de chat in volgende prompts om consistente context te behouden.

Lever uitgebreide context

Onthoud dat jouw mentale context verschilt van het begrip van de AI. Je bezit waarschijnlijk kennis van specifieke details over je code die belangrijke context bieden voor het aanpakken van problemen. Ga er niet vanuit dat de AI weet wat jij weet - leg problemen initieel gedetailleerd uit om het te helpen accuratere oplossingen te bieden.

Chat / Vraag vs Agent

Onthoud om Chat / Vraag te gebruiken voor vragen, discussies en inzicht en gebruik Agent voor code wijzigingen.

Gerelateerde Artikelen

Product Owners - Considerations for your next project with suppliers

Product Owners - Considerations for your next project with suppliers

Here at Goldmund, we've been openly publishing more and more articles on the use of AI. We've tried to find a balanced truth in this topic, which is commonly over-hyped or under-played depending on bi...

Deep Dive - Claude AI as a Pair Programmer

Deep Dive - Claude AI as a Pair Programmer

In last week's series of articles, I explored the considerations, issues, and benefits of using Cursor and Claude to enhance the development process. In this week's article, I'll dive into how we can...

Developer Experience Using Cursor.ai and Claude.ai - Part 1: Considerations & Diminishing Returns

Developer Experience Using Cursor.ai and Claude.ai - Part 1: Considerations & Diminishing Returns

As a front-end developer constantly seeking to enhance productivity, I've spent the last several months integrating AI tools into my daily workflow. Cursor.ai has become my editor of choice, while Cla...

Developer Experience Using Cursor.ai and Claude.ai - Part 2: Benefits

Developer Experience Using Cursor.ai and Claude.ai - Part 2: Benefits

Having explored the challenges of AI coding assistants in my previous article, I'm now turning to the substantial benefits these tools can bring to a developer's workflow. After months of intensive us...

Designer Experience - Using Midjourney Ethically

Designer Experience - Using Midjourney Ethically

While my journey with AI coding assistants has been documented in previous articles, this piece focuses specifically on how Midjourney has revolutionized my design process. As visual communication bec...

Bezoek ons

Hoofdkantoor Groningen

Winschoterdiep 50, 9723 AB Groningen