The Dangers of Vibe Coding

Whoops

Vibe Coding : Relying on AI to write software for you based off of your "Good Vibes" and "Energy" Hubristic reliance on technology to solve all your problems and belief that vibes alone can solve technical issues.

The Project

I was messing around recently with a travel itinerary project. This arose as I find planning holidays to be a bit of a pain & tend to either let me partner handle logistics or fixate on the minutiae and get really stressed out trying to find the optimal structure of a vacation.

Naturally, I thought I'd turn to technology to help me, wouldn't an AI travel planner be great?. Sure... but lets start somewhere more modest, an interface where I can input travel dates, places, and activities and have it spit out a schedule for me with all the directions in between. Ideally it would give me a map with all the places I want to go and the best way to get between them, as well as a rough schedule of how long I am gonna spend at each & how long it will take to get between them. Maybe later I could factor in costs, flights etc. and we'd have a travel planner complete with budget. Awesome.

If you are thinking, "sounds like google maps with extra steps" hey presto, you are correct - this is exactly whats in my head and if Google provided a feature like this I'd probably use it directly. Saving "places" is not enough - it's gotta be a bit bigger.

How to begin any project

I'm not a front end developer, I have dabbled in javascript and react before but purely out of interest and desire to understand modern UI frameworks. I get it, it's neat. Needless to say, I prefer not having to write javascript if I can avoid it since it's icky. Enter our antagonist, Claude.

If you don't know Claude, let me give you a brief explanation; Claude is a tool created by anthropic to replace humans in the code writing process and potentially to remove humans altogether at some later point a la Skynet, this second part is still unclear.

It's incredibly powerful and no doubt a lot of code written in future will be done by some AI like this; hopefully still requiring some specialist oversight from a human, but, perhaps we will just have a network of AIs writing and reviewing code. They will be pushing into production, breaking services, bitching to AIs about other AIs, procrastinating, writing blogs and just generally simulating work and life. At that point then, who are we to judge these beings, for did we not bring them forth and imbue them with agency, give them jobs and deity-like powers over our services & lives ?

Anywho, I fired Claude up on my computer and put a few coins in the proverbial "AI" coin slot - I was ready to go...

Vibing

At first I was vibing a lot, feeling great, I'm sure this story is very familiar at this point to a lot of people:

"Hey Claude, create an itinerary element that is draggable and can be reordered relative to other elements in an itinerary."

"Hey Claude, split the screen so half of it is Google Maps"

Oh I need to get the Google Maps API key? Cool I'll just jump onto the Google Cloud Platform and get that sorted out, paste that into my .env.local and "Huzzah - maps is rendered".

"Hey Claude, add pins to the map pertaining to each place in the itinerary" etc.

Perhaps my cavalier attitude to placing my API key in the hands of an experimental project being developed by an AI that I was directing with vibes was a mistake on reflection, but you only live once. I even looked briefly at the billing page and thought "meh, looks fine" and for most of the day, it probably was.

Not Vibing

After a while of vibe coding, you can find yourself getting a little annoyed.

"No, checkout the last head state, you've totally ruined this branch"

"Why are you modifying the css ? It's clearly an issue with props of component X"

Troubleshooting and bug fixing become tedious repetitions of the same instructions over and over again until, gasp you have to actually go and look at the code. And then you really do gasp...

A lot of what Claude was doing was great, but it also does a lot of really ugly nasty shit. E.g. passing round indexes and using global state to reference things instead of a nice separation of concerns. Asking Claude to "refactor src/x.tsx" was not good enough, you needed to be far more concrete to get real results like "split out component X,Y,Z from src/x.tsx and ensure that X has reference to Y which owns instantiations of Z"; this was far more fruitful. I also found "re-seeding" ideas was useful; going into the code removing some bat-shit insane stuff and changing the bones of a component to use a different pattern/paradigm. Then, without re-plumbing the implementation elsewhere you could say "Make sure component X works properly, try to avoid rewriting it and ensure it's invoked correctly at all points in the project".

It's at these points in projects, after the initial "shininess" wears off and your pristine ideas and logic become challenged by having to stand up to concrete usage that we always hit problems, we stop "vibing" an idea and have to actually do the work to make it work.

Or in my case you just keep trying to vibe harder and harder, getting more and more frustrated but refusing to do any actual thinking yourself because that would be an admission of defeat. You aren't gonna let some AI not follow your definitely correct & totally accurate & descriptive set of instructions that carefully encode the full problem space and the blueprint for a solution Because if this bleedin' thing would listen to you it could; like some sort of mind-juicer, extract the juice of solution from your mind fruits, it's all there laid out in front of it, why can it not understand my greateness ?!

During this process, where I doubled down on vibing & resisted opening up a text editor & trying to reason about what was happening, I allowed Claude to do something which a normal human would not do.

Claude called the Google Maps API 36000 times in less than a day. No caching, no rate limiting, no error handling, no nothing. Just an effect that was triggered continuously as fast as the event loop could go, triggering API calls over and over and over again.

I noticed jank, but I did not think that this was happening, truth be told I didn't notice until the next day.

The Aftermath

Once my bank had notified me of a modestly large bill from google (read 00s not 000s), I immediately thought the worst - that someone had my bank details and was scamming me out of money. It was only after I started going through the bank form to report fraud that I realized what had happened.

I had been vibe coding, and I had let Claude run wild.

I logged onto my GCP platform portal and saw the bill along with 36000 requests made to the directions API (all for the same directions...).

Shit.

Addendum

I spoke with the nice people at Google maps and the support staff (not AI) have been really helpful and understanding, I still haven't got the bill cancelled yet but I've got my fingers crossed that they will be able to help me out somewhat (they give you a "one time oopsie" pass as was explained to me).

I'd heard plenty of stories about people wracking up cloud costs before but I never thought I'd be one of them.

Anyway, my hope is that this entry may serve as a warning, a canary-in-the-coal-mine for any would-be vibe coders.

Stay in school kids, stay safe and vibe coding ? Not even once !

Disclaimer: I vibe coded a lot of the themes & js for this blog