Adventures in AI-Assisted Coding, Part 2
A few weeks ago, I built a simple web app using Cursor, an online IDE (and wrote a blog post on the experience here). Next, I wanted to try out an AI-assisted website builder: a tool that offers the promise of creating a website entirely through prompting.
I used v0.dev from Vercel to create two projects: a jewelry ecommerce site, and a Wordle-like word guessing game. Other tools that aim to offer similar functionality are Lovable and Replit (the latter of which seems to have pivoted from its original focus of being an online IDE to a full-fledged AI website building tool).
Similar to my experience with Cursor, I was blown away by how quickly v0 was able to help me get something up and running. While there are definitely limitations, overall I was deeply impressed at the capabilities now available to everyone, something that would have been science fiction only a few years ago.
Jewelry E-Commerce Website
I asked v0 to create a jewelry website using this prompt: I want to build a simple storefront for my jewelry business.
Rapid start-up: From this initial prompt and a couple of follow ups, v0 created the homepage, a product search page, a product detail page, and a cart page. Additional prompts created the backend (using Supabase, a “backend-as-a-service” platform) and an admin interface to create and update the list of products. I created all images on the site using ChatGPT.
Looping on problems: v0 ran into trouble with the authentication for the admin part of the site. It would not let me log in or create an admin user, and went through several rounds of claiming to have fixed the problem when it actually had not. A pattern that I had also noticed before with Cursor, which repeated with v0, is that it would put in what I would consider hacky code in order to fix a problem: for example, at one point it said that it would just give any user going to the /admin URL admin permissions, without authentication (I later got it to change this). Overall, this process was frustrating. Because of the next issue described below, I had to nudge it with “nope, still not working” prompts till it eventually rewrote the auth and created a working admin interface.
Cannot inspect runtime information directly: v0 cannot inspect information from running the preview site (or perhaps I did not understand how to enable this). As a result, my development loop consisted of deploying the site (which is seamless), trying to log in via the admin console, failing, and then posting in some information from inspecting the Network tab in the browser to help it hopefully resolve the problem. Ideally, v0 would be able to inspect the browser logs itself, or even to interact with the website itself and record what goes wrong.
Transient: The reason I don’t have the website linked to this post is that as soon as I completed the project, Supabase started sending me somewhat obscure emails about security issues with the database. After a few more days of inactivity, it then shut down the backend database. While the latter is likely part and parcel of using a free service, the security notices would have given me pause about sharing the website publicly even if it had stayed up. This is I think a general problem with these sorts of tools that abstract away a large amount of technical complexity — non-technical people who use these tools to create real projects may find that they have launched with security holes or other major issues unresolved.
AI Wordle
For my next project, I wanted to build a game without a backend, to avoid the security issues I had had with the previous project. I asked v0 to create a simple Wordle-like app to guess AI-related words. This time, I used a more detailed prompt, and asked it to create a plan first without writing any code:
I want to build a game website like Wordle but focused on words related to AI. The words can be of any length between 2 and 8 letters (not always 5 letters like in Wordle). The game should be playable in a web browser. I do not need any backend storage. Please make a plan for creating this game website, but do not write any code yet.
The process was pretty much flawless: v0 created a phased plan to create the game, and built a playable game immediately once I gave it permission to create the code. A few tweaks later (for example, it started with a hard-coded list of words, and I nudged it into getting AI-related words via OpenAI’s API), I ended with what I think is a pretty fun game.
Later, at my daughters’ request to not include only AI words (“that’s so boring”), I extended the app to allow the user to choose a theme (AI, music, sports, or math), and renamed it the Amazing Word Guesser app.
The game is available at https://amazing-word-guesser.vercel.app/. Try it out!
Bidirectional Github integration: In this project, I also experimented with v0’s Github integration, trying out a bidirectional flow: pushing the code from v0 to a Github repo (v0-ai-wordle), pulling the code to my computer locally, editing and pushing back to Github, and then pulling that updated code into v0. This worked seamlessly, though I did find that in a later iteration of code generation v0 wiped out a minor edit I had made locally to a file. This may be inevitable given the way v0 works.
Regressions: v0 had trouble with getting the tile “flip” animation to work correctly, and I don’t think it is exactly Wordle-like even now. Sometimes, it would create a passable animation, but when I asked it to add another unrelated feature, the animation would revert back to looking strange. I could not discern any pattern to these regressions.
File navigation: The file navigation interface in v0 is quite basic; there is no way (that I could find) to jump quickly to a file, or to search across files. This is a minor usability issue, but coupled with the fact that I wasn’t sure if changes I made outside of the v0 editor would “stick” after the next v0 change, it makes it harder to make changes directly to the code, which I imagine most programmers will want to do at some point.
Takeaway
My general sense is that v0 and other AI website building tools may be most effective as design and prototyping tools, and play in the same space as tools like Figma. v0 can allow designers to quickly flesh out their designs, test them out as live prototypes with real users, and hand them off to engineers to implement a production version. It’s possible that engineers can simply copy over the code that a tool like v0 generates into their own codebase (especially if v0 natively integrates a company’s design language into the UI it generates), while maintaining control of key considerations such as security and hosting.
This experience reinforced my sense that all programmers, and likely designers and product managers as well, need to become deeply proficient at using these AI code generation systems: the possibilities that they open up for empowering individuals and teams, and enabling deep collaboration within companies, is very exciting.
