With the recent breakthroughs in AI and large language models, there has been a major shift in how we approach building software. One notable change is a new workflow called vibe coding, where you skip the traditional software development pattern and let AI help you build instead.
In this article, we’ll break down what vibe coding actually means, how the term became popularized, and why it’s catching on. We’ll also walk through a real example by vibe coding a full-stack time capsule app from scratch in just a few minutes. To wrap it up, we’ll look at the pros, the downsides, and whether this workflow is viable in the long run.
In simple words, vibe coding is the process of building software by vibe, i.e., letting ideas flow and using AI to do the heavy lifting, without getting stuck on structure, rules, or boilerplate.
Compared to the traditional software development workflow, where you’d plan things out, architect the system, and manually code each part, vibe coding is different. When you’re vibe coding, you describe what you want, use AI to generate most of it, and just tweak as you go. This is also made possible by how good AI tools and LLMs have gotten, especially code-aware ones that can understand even rough prompts and generate working code.
This practice has been around for a while now. But the term “vibe coding” was popularized by Andrej Karpath, cofounder of OpenAI. In this tweet, Karpathy casually described a new way of building apps by just “seeing stuff, saying stuff, running stuff, and copy-pasting stuff,” with barely any typing and mostly just talking to an AI to get things done:
The tweet resonated with a lot of people, gave the practice a name that sticks, and inspired even more people to lean into vibe coding.
The first step in the vibe coding process is to get an idea of what you want to build. Ironically, AI tools can also help generate these ideas or refine one you already have. Once your idea is set and you’ve either thought it through or jotted it down, the next step is to pick a tool.
Some AI coding tools that don’t require much setup and let you vibe code directly from your browser. These include Claude, Replit, Lovable, Bolt, and v0 by Vercel. However, if you want more control over what’s happening under the hood, you can use tools like Cursor or Windsurf instead.
With your idea and vibe coding tool ready, the next step is to prompt the AI to start building it out. From there, you iterate, then iterate again until you get your desired result.
Enough said; let’s see vibe coding in practice!
The world is moving so fast, and I want to be able to look back someday (five, 10, or 20 years from now) and see what certain moments look like. That’s why I thought it’d be cool to vibe code a digital time capsule app, where I can write and upload pictures or videos of what things look like today, then lock them until a future date. I also have a specific tech stack in mind: Next.js for the front-end and API, and MySQL for storage.
With the idea set, the next step was to open Cursor, one of my go-to vibe coding tools, and prompt it with the following idea:
Create a time capsule app where the user can set a title, description, and a future unlock date, and open the capsule once that date arrives. They should be able to upload media (images, videos, etc.). The UI should use a box design for the capsule to give it an aesthetic feel. Build it using Next.js and MySQL (no ORM), and style it with Tailwind CSS:
Cursor then presented me with a command to install Next.js with the Tailwind and TypeScript setup, as well as the MySQL library. Then, it generated the project files, including a schema.sql file with the basic table setup, and even updated the README.md with instructions on how to run the app. I followed the steps, ran the command to set up the database, and launched the app.
But when it loaded, I still saw the default Next.js index page. Apparently, it forgot to update that, so I followed up with, “The index page is not properly updated.”
This was also a good reminder that while these AI tools seem impressive, they still miss basic things:
It fixed it. I reloaded the app, and the initial output looked like this:
This is a nice start, but obviously, we don’t want the form to be the first thing users see when they open the app. So, I added this prompt:
The form should not be the first thing the user sees when they open the app. Instead, show a title, a brief description, and any time capsules they’ve already created. If they haven’t created any yet, display a message letting them know that their capsule list is empty and encourage them to create one. The time capsule creation form can then be shown as a popup:
And with that update, the homepage now looked like this:
After a few iterations, it looked something like this:
At this point, I thought it would make sense to let users set a closing date for each capsule so they could keep adding content or uploading images until that date. So I prompted:
Let’s update each capsule to have a closing date period, so that users can still upload media or update the description until that period is reached.
The AI handled the logic and updated the database schema to include a new closing date field. But it didn’t add any UI changes for this feature, so I followed up with the following:
If the closing date has not been reached, display the media the user has uploaded so far (for each capsule), along with options to delete and add more media, and to update the capsule description:
At this stage, everything worked as expected. If a capsule’s closing date hasn’t passed, I can update it with new images or change the description. Also, the app now properly locks a capsule until its open date is reached, and I can’t view its contents before then:
That pretty much sums up vibe coding in practice. You mostly tell the AI what to do, ask it to fix things when it messes up, and repeat until you get your desired result.
Vibe coding has some real advantages, including:
While vibe coding is a powerful workflow, it still has some major drawbacks
The answer mostly depends on your vibe coding approach.
If your approach is to entirely rely on the AI to write all your code just by describing what you want, it won’t work well in the long run. You’ll lose track of how everything fits together, and maintaining your app will become harder over time.
A better long-term approach is to treat AI coding tools like a collaborator, i.e, start small, explain what you’re building, and ask for help step by step. Instead of just asking it to fix or implement things, let it guide you through the structure and logic behind each part.
This way, you’re building with context. Plus, you get to stay in control of the architecture and logic of your application.
In this article, we explored vibe coding, how it became popular, its major advantages and drawbacks, how it works in practice by building a full-stack app using vibe coding, and whether it’s viable in the long term. Vibe coding, if done well, has a lot of potential, but it also comes with challenges that shouldn’t be ignored.
Hey there, want to help make our blog better?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up nowExplore the MUI Grid system in depth, including updates from MUI v5, and learn how to build responsive grid layouts.
Build a progressive web app using Rust, WebAssembly, SurrealDB, and Nostr with local encryption and fast storage.
Explore various ways to implement SVGs in React applications, and learn about their integration, animation, and usage as React components.
Discover how AI code generation works and explore top artificial intelligence coding tools, benefits, and real-world use cases.