Bij Breach bouwen we MVP’s op een manier die past bij onze tijd: snel, slim en samen met AI. Claude Code van Anthropic is een van de tools die ons daarin veel leverage geeft. Hieronder vind je een praktische gids om direct aan de slag te gaan met Claude Code. Niet teveel gedoe, gewoon meteen bouwen.
Wat is vibecoding?
Vibecoding is software bouwen in flow. Je werkt samen met AI. alsof je een slimme collega naast je hebt, of ja.. eigenlijk aanstuurt. Geen eindeloze prompts of contextverlies, maar directe interactie met een LLM die schrijft naar je codebase en interacteert met je browser. Jij bent de dirigent.
Zo omschreef Andrej Karpathy vibecoding (en coinde daarmee de term):
Subscription
Sluit eerst een Claude Pro account af op claude.ai (linksonderin op je initialen en selecteer het Pro-plan). Binnen het Pro-pakket krijg je een beperkte hoeveelheid calls/tokens per dag, goed voor zo’n 1 à 2 uur gebruik tot de dagelijkse reset. Meer nodig? Upgrade naar Claude Max.
Wat heb je nodig
Een terminal (dit zit standaard binnen je operating system) of een code editor (IDE) zoals VSCode of Cursor, waar ook een terminal in zit.
Installeer Claude Code via npm:
npm install -g @anthropic-ai/claude-code
Je kunt Claude gewoon in je terminal draaien, maar ook binnen VSCode of de terminal van Cursor. Zorg eerst dat je in de juiste map bent van je development project, Typ vervolgens claude om te starten. Je zit nu in Claude’s omgeving. Typ / om alle commands te zien.
Heb je Claude in de terminal van je code editor geladen (IDE), gebruik dan /ide om deze te koppelen (zodat Claude weet welke file je actief hebt) en /terminal-setup om shift-enter werkend te maken in je terminal.
Gebruik je Claude buiten je IDE? Dan is iTerm2 een aanrader. Je kunt meerdere tabs openen om Claude verschillende functies tegelijk te laten schrijven, of aan meerdere projecten werken als je goed bent in context switching 🤓.
Get started
Start je binnen een nieuw project? Gebruik het commando /init zodat Claude je codebase analyseert en een overzicht maakt in Claude.md. Is je codebase flink gewijzigd? Run het opnieuw of vraag Claude het bestand te updaten. Zo kun je in het bestand bijvoorbeeld aangeven om bepaalde patronen aan te houden of dat Claude altijd tests schrijft voor de features die het schrijft.
En dan? Probeer wat je wil – je kan starten door Claude te vragen of hij je de codebase wil uitleggen. Of start met een kleine feature die je toegevoegd wil zien aan het project. Het is zoals met wel meer dingen in het leven; gewoon proberen om te leren.
Resources
- Eén video kijken? Dan deze van de maker (Boris Cherny) van Claude Code zelf: https://www.youtube.com/live/6eBSHbLKuN0?si=FQn1Odnb4WumF1Qw
- Verder handig: https://www.youtube.com/watch?v=gNR3XI5Eb0k
- En: https://spiess.dev/blog/how-i-use-claude-code
Simpeler starten?
Voor een niet technisch persoon kan dit allemaal wat uitdagend lijken, al kun je onderdelen die lastig zijn met behulp van ChatGPT of een ander LLM best snel verduidelijken.
Wat we zelf doen is een project starten met Lovable. Dit is een super gebruikersvriendelijke manier om tot een website of app te komen en je kunt het gewoon vanuit je browser doen. Lovable is ook visueel sterk wat het een prima startpunt maakt. Uiteindelijk kun je verder met Claude door vanuit Lovable eerst je project te synchroniseren met Github, dit op je lokale machine te laden en vervolgens door te ontwikkelen met Claude.
Tips
👉 Gebruik /clear regelmatig. Lange conversaties vertragen Claude en maken hem onnauwkeuriger. Nieuwe feature = nieuwe prompt.
Plan mode
Claude heeft 3 modi waar je tussen kan switchen (shift-tab om te wisselen); normaal, “auto-accept edits” en “plan mode”. In de normale modus vraagt Claude toestemming voor elke aanpassing die gedaan wordt aan de code. Je zal snel merken dat je daar moe van wordt en al snel naar auto-accept schakelt. Claude werkt beter in plan mode . Omschrijf je probleem en vraag Claude om eerst een plan te maken. Dan pas de code. Als je toch direct aan de slag wil, werk dan in (auto)-edit mode, maar laat hem eerst goed begrijpen hoe de codebase in elkaar zit. Voor kleine aanpassingen is plan-mode wellicht iets te zwaar, maar voor grotere features is het verstandig om plan-mode te gebruiken.
Over nieuwe features gesproken. Je kunt Claude een hoop dingen laten bouwen, maar soms loopt hij vast of bouwt hij een feature niet zoals je hem in gedachte had. Het is dan nice om een stukje terug te kunnen. Dit is geen standaard functionaliteit dus het is handig om git te gebruiken en een nieuwe commit te maken voor elke feature (of tussen stap) die je laat implementeren. Onbekend met git? Vraag aan Claude code hoe dit werkt en hoe je het eventueel zou kunnen gebruiken binnen je huidige IDE.
Models
Claude wisselt automatisch tussen Anthropic’s modellen; Opus 4 en Sonnet 4. Groot verschil: Sonnet loopt vaak vast of schrijft dingen die je niet nodig hebt. Opus is consistenter. Claude geeft aan wanneer hij switcht, maar je merkt het direct aan de kwaliteit, alsof je een overwerkte programmeur achter het toetsenbord hebt. Opus is beschikbaar vanaf de Max subscriptie.
Escape
Gaat Claude de verkeerde kant op tijdens z’n denkproces? Druk op ESC. Voeg een extra instructie toe om bij te sturen of wijs hem direct op een file. Vaak komt hij er dan snel uit, zeker met grep-achtige commando’s.
Afbeeldingen
Je kunt gewoon screenshots slepen in Claude. Hij is multimodaal en begrijpt prima wat je bedoelt.
Verbruik
Check hoeveel tokens je vandaag al gebruikt hebt met:
npm install -g ccusage
ccusage blocks --live
Connect Claude met je browser
In onze workflow is het handig dat Claude (net als een developer) kan debuggen in de browser. Denk aan navigeren, console logs uitlezen, of screenshots maken. Dit kun je lokaal doen via deze Chrome-extensie:
Daarna kun je Claude verbinden:
claude mcp add browsermcp npx @browsermcp/mcp@latest
Nu kan Claude je (Chrome) browser gebruiken om te navigeren, logs te lezen en screenshots te maken. Niet alles werkt perfect, maar meestal is dit genoeg om te debuggen of kleine taken uit te voeren. Help hem soms even een handje of herinner hem eraan dat hij hier toegang toe heeft.
Er zijn meerdere “MCP servers” die je kan koppelen. Dit kun je zien als een soort API laag voor allerlei bestaande software. De MCP hierboven laat Claude communiceren met het open tabblad in je Chrome browser. Maar je hebt ook een Github MCP, of zelfs een Blender MCP – waarmee je het opensource 3d software pakket Blender kunt aansturen via Claude.
Klaar om te bouwen?
Met deze setup heb je de volledige power van Claude binnen handbereik. Dit is geen vervanging voor je eigen productinzicht, maar wel een enorme versneller voor alles wat daaruit voortkomt. De kracht zit ’m in de leverage van AI door een team. En dat is precies waar Breach voor staat.
Happy vibing 😊