The Vibe Coding Chronicles
POV: You’re a professional dev watching me talk about vibe coding:
I’m not exactly a stranger to using AI code, parts of nipy-bridge like the part that handles posts based on size was written by Chat GPT via Duck.AI, and I regularly use a Mixtral-Dolphin written bash script to convert files with avifenc. Recently, however, I came across Bookstr by MK Fain, which is being vibe coded. It’s a site that takes books people are talking about on Nostr and combines them with OpenLibrary data to offer reading material recommendations and reviews. The site alone is a cool concept, and the fact it was vibe coded and working with a lot of moving parts made me think I need to check out how good AI code has gotten. So yeah, here I chronicle my vibe coding adventure.
Projects I (had an LLM) make
So far I’ve worked on three different projects, and all of them have turned out pretty well, all things considered. The first project I started with was n_cord (source code) - a Nostr chat client with a UI inspired by Discord, and being based on Nostr, something that almost feels like upgraded IRC. It’s pretty minimalist, and probably will never be anybody’s primary client, but seems to work pretty well for what I set out to do. It’s fairly sleek, works on desktop and mobile, and does exactly what I told the AI I wanted: create a chat like experience that lets you send basic messages and read what your relay’s community is talking about on any specific tag. It’s still due for some tuning, but it works pretty well.
The next thing I tried was making m_cord (source code), the Mastodon API equivalent of n_cord. If you have an Activity Pub account on a server that supports the Mastodon API you can sign in there, getting a nearly identical experience of browsing your home feed or tags of your choosing in a chat app like form. Both n_cord and m_cord don’t actually subscribe you to the tag when you add a channel, so you can browse high traffic tags without spamming your home feed.
Last, I also made a Golden & Blue Hour Calculator (source code). It’s simpler than the other two, just calculating what time Golden and Blue hour will be for your location. Unlike the other two it’s a PWA, allowing you to ‘install’ it and use it offline.
All three are static sites, which can be served from any server or static site host (in my case GitHub Pages), and which don’t send me any information whatsoever. n_cord and m_cord are single HTML files, performing everything locally and using the Web Storage API to store data between sessions. The Golden and Blue hour calculator is mostly a single HTML file as well, although it’s got a manifest file and service worker file so that it can work properly as a PWA.
I don’t know how much vibe coding I plan to do in the future, but I’m honestly pretty impressed. I had to do a few minor tweaks, and re-prompt the AI a few times when it didn’t like parsing the json of Nostr posts properly, but I wrote less than 1% of the characters in all three projects. I assume that a base level of understanding of the technology got me a better result - such as telling it to use the Web Storage API, clarifying I wanted a static site, troubleshooting user tags in Nostr posts, etc. Still, though, each were written nearly solely by me prompting AI.
My Vibe Coding Setup
For my vibe coding I used Gemini. If I’m not using locally run AI (too complex a task for local AI and/or just too lazy to boot it up) I usually go to Duck.AI &/or the Brave Browser for the simple stuff and Gemini for the more complex. Gemini offers quite a lot in their free plan, offering several daily prompts of their best model (2.5 Pro at the time of writing) as well as free access to other AI tools like their Canvas feature or Deep Research. I quickly used all my prompts within the free plan while vibe coding, so I’m currently using a free 30 day trial of Gemini’s pro plan at the time of writing.
I started by taking some time to write out a prompt outline. If you’re doing anything remotely complex it helps to take the time to write down exactly how it’s going to look and work. I started with a description of the project in a few sentences, then had a fairly long list of bullet points with details of how I wanted it to work. Then, instead of prompting it directly, I gave the prompt to Gemini and told it what I was doing and to write the ideal prompt for itself - which I then provided to Gemini using the canvas feature.
It wasn’t 100% complete on the first prompt, but was pretty close, and the preview gave an overview of what it looked like. From there it was just a matter of downloading, sticking it behind a Python server, and prompting the changes I wanted - rinse and repeat. The file eventually got too big for Gemini to output in one go, so I downloaded VS Code with the Gemini plugin, letting it work on individual files without outputting the entire file at once. From there it was pretty much the same, prompt Gemini in VS Code to do x, fire up my browser and see if it did x correctly, and then either revert the changes or move onto y.
Within the last ~24 hours of drafting Google also release Firebase, a Gemini powered all online IDE. I haven’t used it yet, though if you’re looking to give vibe coding a try, that might be worth trying instead of using it in VS code or a similar setup.
Editing Me Note: I think I might try to vibe code something more complex, such as a better version of ni.py bridge. Something that could verify signatures so it could be hosted publicly, and that could maybe allow registrations and have a web interface. I might give Firebase a go with something like that.
Gemini Itself
Google has come a long way since its failed launch of Google Bard, and Gemini seems capable of doing all the basic to moderate stuff I’ve thrown at it. However, I have noticed some instability problems.
As with the image above, the plugin likes to fail a lot in VS code. I don’t know what’s causing it, whether it’s me breaking it or it being inherently unstable, but it’s a toss up whether it’ll load or not when I boot up VS Code. Similarly, if Gemini tries to output anything longer than its token limit it’ll crash and delete the chat - giving either the generic error “Check your internet and try again” or “Something went wrong.” It won’t stop itself from trying to exceed its token limit, or clarify that it broke because of an exceeded token limit, and it will absolutely nuke anything in the chat. If you’re doing anything complex, you need to keep a local copy of the code between every prompt.
I guess it’s kinda to be expected given we’re in the “get something out there now” phase of AI’s development, and once you know how to break it it’s relatively easy to work around. All in all, if you’re looking to give vibe coding a try for free (either using the free plan or a free trial) Gemini still seems like the best way to go - assuming you don’t have the hardware to run a larger model locally. Outside of the free plan, however, for $20/mo there is rather stiff competition. If I end up paying for a premium AI subscription for code (or any other purpose) I’m not sure whether or not I’d go with Gemini.
Oh, and very funny, when I told it to add a reply feature it gave me this.
Editing me here, I can’t find the screenshot. But it added a reply button that only said “This feature is in development” when clicked. In the code comments it said something along the lines of “This feature will be implemented later” or “Todo: implement feature.”
If you want to pass the Turing test I think “Nah, I’ll implement this later” is a pretty convincing way.
Vibe Coding as a whole
Right now I’d still be very cautious trying to vibe code anything complex. Anything involving the LAMP stack is probably bound to introduce some gaping security hole, and anything too complex is probably going to cause an AI to struggle until they start increasing max token sizes. Still, for the simple web app that performs a specific function it works very well, and for something like n_cord or the Golden/Blue hour calculator there’s very little that can go wrong. Both don’t require the server to do anything or have access to anything, running entirely locally in the browser. Neither have access to anything remotely sensitive (assuming you sign into n_cord with a signing extension) and they’re run in your browser’s sandbox, so there’s very little they could do that’d break anything. Even m_cord, while it has access to your Mastodon API key, it’s fairly limited since it’s not full account access and can be revoked at any time.
Something like the simple web app that fulfills a particular purpose is something I think vibe coding will do well with in the future. For example, the Golden/Blue hour calculator was spurred on by the app I previously used for that purpose no longer working without Google Play services. Instead of dealing with that, a few minutes of prompting got me a super simple offline capable web app that filled that need for me and anybody else with that specific need. Paired with GitHub it’s hosted for free, meaning it cost me nothing but a few minutes of writing prompts to develop and deploy.