Transcription
My name is David Andre, and here is how to start Vibe coding like a pro. What even is Vibe coding? Well, it's a new way of building software using AI, and I built my entire startup, vect, just with Vibe coding. Currently, it makes over $116,000 a month.
For example, I just added a brand new feature into vect, which is my startup, called the Idea Inbox, and I built this in like 2 hours with Vibe coding. So you can see that this is a really powerful skill to have. So in this video, I'll reveal everything I know about Vibe coding, so make sure to watch until the end.
The popularity of Vibe coding is skyrocketing, and all of that is thanks to one man: Andrej Karpathy, the co-founder of OpenAI, one of the greatest minds in all of AI. This tweet is the first mention of the word Vibe coding, and he posted it just a month and a half ago. Before that, nobody used this term. So let's read this legendary tweet: "There's a new kind of coding I call Vibe coding, where you fully give into the vibes, embrace exponentials, and forget that the code even exists."
All right, so what do we actually need to do Vibe coding? Well, all you really need is an AI tool that can write code, such as Cursor. So go to cursor.com and click on download. If you can install a video game, you can install Cursor too.
Once you have Cursor installed, start by opening an empty folder. So here it is, an empty folder, boom. And this is really all we need to start Vibe coding. Now, the reason Vibe coding even works is because the LLMs, AKA large language models, are getting too good. Also, another part of Vibe coding is just clicking "Accept All." So no matter what changes the AI suggests, you just blindly accept them and Trust The Vibes. Even an advanced programmer like Karpathy himself, when he gets an error message, he just copy-pastes it into the Cursor agent with no comments, and that usually fixes the error.
All right, so let's jump straight into Cursor and let's start Vibe coding. Now, I don't even have the idea chosen; I'm just going to trust The Vibes of the AI model to do that. "I want to build some small but useful software purely with Vibe coding. Give me seven different ideas." Okay: Markdown Note Taker, Habit Tracker, File Renamer. Let's go with the Habit Tracker. "Create a new conda environment for it and then build the Next.js front-end MVP." Enter. And now this is Vibe coding; we're going to blindly trust the AI to do what I described. So it created a new conda environment. Okay, now it needs to activate the environment. Let's see if it figures that out. It did.
So, by the way, one thing that I need to clarify: inside of Cursor, if you go to settings, Cursor settings, I have enabled YOLO mode. This is like maximum Vibe coding. If you want to take Vibe coding to the next level, make sure to enable this auto-run mode. This will allow the Cursor agent to just run the terminal without you having to approve all of this. Right, for 95% of terminal commands, if you enable it, you can just trust the Cursor agent to do that.
Now, look how many changes it did in a single prompt. This was my prompt, and it created the conda environment, activated the conda environment, created the Next.js project, then it did a bunch of lookups through the folder, just, you know, looking at the directory, finding files; it read the file, read two more files, and then started writing some code, changed the directory, created another file and another file, and one more file—all of that from my original prompt. By the way, all I'm doing is just vibing, you know, I'm I'm just chilling. This is the future of programming.
Real quick, I need to show you Infinite Thinking 2.0. This is the new AI agent which just added into vect. Let me show you. So you can give it an objective, such as "Help me write a book about Vibe coding," and then you can send this objective, enable YOLO mode, and just watch it work. This AI agent does not exist anywhere else; vect.ai is literally the only place where you can get this. So, as you can see, the first was create a task, and then it starts reasoning on it using the best reasoning models available, and you can see the speed is just insane. Boom, it accepted another change, and then again, look at the speed. This is the power of Infinite Thinking 2.0. So if you want to have access to that, go to vector.ai and sign up. And if you join the next 3 days, you can get 30% off if you use the code INFINITE during checkout. Again, this offer is only available for the next 3 days, so go to vector.ai and sign up.
So the Cursor agent has finally finished running all the files, but we got an error when we tried running it. Now, I probably can spot what this error is, but let's say we're not going to use any of our knowledge; right, we're going to do Vibe coding. So all you need to do is highlight the error, add to chat. I'm going to say, "Fix this." This is Vibe debugging, you know, you paste in the error, and you tell it to fix it.
Now, there's an interesting trend in Vibe coding where a lot of people hate on it, especially the people who have some former programming background. Now, it is absolutely true that a lot of beginners use Vibe coding and they just produce terrible software and never get anywhere, but that's because they make the dumbest mistakes possible, which I'll cover later in this video. However, people who don't use AI are equally as stupid. AI is getting better so much faster. Even if you are an expert programmer yourself, you can save time, and none of you watching are better programmers than Andrej Karpathy. He literally co-founded OpenAI and built the Tesla self-driving team. This guy is a super genius, and he uses Vibe coding, so should you. So that's why, in the future, all of the best programmers will be using Vibe coding to some degree or another.
Now, while the AI agents are writing code, make sure to take a second to subscribe. For some reason, 76% of you guys that are watching my videos are still not subscribed. So if you want me to make more videos on Vibe coding, please take a second to click the Subscribe button; it's completely free and it helps out a lot.
All right, so it seems like Cursor was able to figure out what the error was, and it was because we were in the wrong directory. So it just seeded it into Habit Tracker and it started the server, and now if we go to localhost:3000, we should see our Habit Tracker app. So let's see how this looks. All right, so we see the basic Next.js directory. So I'm just going to take a screenshot of this; I'm going to copy it to clipboard. I'm going to say, "I don't see my Habit Tracker app when I go to localhost:3000. Fix this." Do not take the errors personally; anything can be fixed, no matter how difficult or convoluted the bug is; it absolutely can be fixed. So just describe what you're seeing and give it to the AI, and it will fix that.
Perhaps the most common mistake beginners make when Vibe coding is trusting the AI too much. You need to decide what the idea is; you need to decide how the UI should look like, which features to add, which features not to add. The AI is just a tool; do not let the AI become the boss; you need to be the manager; you need to be the CEO, giving specific and direct commands to the AI. This is how you achieve success with Vibe coding.
Now, the beauty of this is that everyone can play coding. Even just three years ago, it used to be only for programmers, but now anybody who can speak English can participate in building software. This means the barrier to entry is so much lower than any time in history of humanity; literally anybody can build an app, and I myself am a proof of that. I built vect from nothing with zero startup experience to a $116,000 a month startup, which, by the way, is better than most San Francisco startups, which are pre-revenue forever. So if you want to build some piece of software, something that you've been thinking about for a while, some little app, or let's say you're annoyed with Discord or Google Calendar and you want to build a simple alternative for yourself, now is the time to do so.
Okay, so Cursor has apparently fixed the issue, so I'm going to click "Accept All," as always, and let's go to this localhost, and boom, we have an error, but a different error this time. So we're making progress, at least when the error changes, you know that something has improved. Now, by the way, when you see this, "Start a new chat," this is a good idea to actually follow Cursor's direction. What that means is that there is already a lot of context in our chat, so I'm going to click "New Chat," I'm going to paste in this image and say, "Look at the image I attached. Fix it." Okay, so actually, I'm going to kill these terminals that way we're not taking up these ports. Okay, so it thought for 4 seconds, "Could not find package.json; it might still be in the incorrect folder." And again, if you know what the issue is, you can tell it that. Obviously, Vibe coding gets more and more powerful the better of a programmer you are yourself, but also the more hours you spend on Vibe coding, the better you get. Like, I was terrible when I first started building vect, but now I would say I'm one of the best Vibe coders in the world. I mean, who else do you know that literally used AI to build a successful startup from zero? Thanks to AI, thanks to Vibe coding, I took vect from just an idea in my head to a startup that makes $116,000 a month. I think that's one of the best Vibe coding success stories there is.
Now, I see Cursor made the same issue because I restarted the chat, so I say, "Make sure you are in the right directory when starting the server." Okay, so now it went into the right directory and started the server, and I can actually click "Move terminal into panel" that way it's it's, you know, properly right here. So if we go to localhost:3000 and reload, we should have some updates. Now we still have this error. Okay, so I'm going to copy this; I'm going to go back, boom.
Now, another thing that can take your Vibe coding to the next level is creating a Cursor rules file. So I'm going to go on the right in our folders; I'm going to click "New file," and I'm going to name it ".cursor-rules," and now we can give Cursor specific instructions that let it perform better. So, for example, I could say, "Make sure you are in the habit tracker folder when running the npm run dev command." So now it won't make this mistake that it made multiple times, and this is how you ensure that the AI agents actually keep improving. You have your Cursor rules file, and you keep expanding on it. For reference, my main Cursor rules file for vect is like 400 lines long. So this is something that you keep refining and keep improving every day.
All right, so I'm going to "Accept All," as always, and I'm going to say, "Restart the front-end server again." All right, there it is. So let's reload our localhost. All right, so let's see; there it is. So we have achieved the UI; we have solved all the errors, and we're in the UI. So let's add a new habit: "Learn Vibe coding." Okay, this is terrible contrast, but it is here. Okay, um, let's click this, and now we have one-day streak. So it should reset to the next day automatically.
Now, what actually are the long-term implications of Vibe coding? Well, well, first of all, it allows you to focus more on the idea than the code. There are millions of people in this world that have some, you know, idea for a business or idea for an app, but they don't have the technical skills to do that. Thanks to Vibe coding, anybody can build an app; anybody can build software. This means that apps will exponentially improve, as Karpathy says, just forget that the code even exists; focus on solving the problem; focus on building what you want to build, and let AI, let large language models, do the rest. So rather than spending an entire day fixing errors, just let AI fix the error and start building the next feature.
By the way, if you want to see how I built an app that makes $116,000 a month purely with Vibe coding, all of that is documented into New Society. So in this module right here, "How to build an AI startup," I documented from day one building vect, literally from choosing the idea to starting the project in Cursor, first back-end file, all the way to today when the startup makes $116,000 a month. I believe I'm the only person on Earth who've done this. So if you want to have access to all of these daily documentings, as well as all the other exclusive AI content, tutorials, and trainings we have, make sure to join the New Society; it's going to be linked below the video.
So now that our simple Habit Tracker actually works, we can really start Vibe coding for real. So I'm going to create a new chat actually, and I'm going to move this terminal into panel. All right, so actually, this is a very good example of when Vibe coding can go wrong. As you can see, it created a bunch of folders on the right, and that's because we gave it too much autonomy. I need it to be more in charge and more in control. So what I'm going to do, I'm going to switch to ask mode, and I'm going to say, "Analyze our entire file structure in habit tracker directory, because right now it's a mess. We need to understand which files are actually working currently and which we should delete." Okay, so Cursor is saying that it doesn't have access to the complete file structure, so I'm going to say, "Use a terminal command such as `tree` to see the entire file structure inside of habit tracker." And by the way, it's a good practice to add that into your Cursor rules. So I could say like, "File structure," right? And what I'm going to do is, bottom right corner, I'm going to switch to Markdown that way Cursor rules is in the Markdown format. Okay, so let's run this command right here: `tree --ignore node_modules`. Boom. So there it is, and this gives us the entire file structure of our project. So what I'm going to do is I'm going to copy this, and I'm going to not only give it into our Cursor rules file, that way anytime the AI agent runs it knows how our file structure looks, but I'm also going to paste it in right here. I'm going to say, "Here's what the file structure looks like. As you can see, it's quite convoluted. What do we need to do to fix this?"
Looking at the file structure, it's definitely in need of a cleanup. You have three `app/router` directories; the recommended approach is for Next.js to use `src/app`. So I'm just going to delete the other ones. So this one, boom, full delete; this one, full delete, boom. Okay, so we delete those. Let's see if our uh code works. It does not work. Okay, so that's expected because we deleted a bunch of files, but what I'm going to do again is I'm going to run in a new terminal this command, boom. So now our file structure is much simpler. I'm going to copy this; I'm going to put it right here. I'm going to say, "Do not create any new `app/router` folders; use the one in `src/app`." Okay, actually, I'm going to say, "Habit Tracker: `habit-tracker/src/app`". Boom, and I'm going to call this "Import Rules," just a header; that's why using Markdown is cool; can just quickly add headers, bullet points, you know, file structures, whatever. Okay, I'm going to say, "I deleted the two other ones, only keeping `src/app`. However, now our app doesn't fully work. Fix that." And what I'm going to do is actually I'm going to open `page.tsx` and I'm going to open `global.css`, and inside of `components`, add `HabitForm`, `DeleteHabitButton`, `HabitItem`, `HabitList`, `Header`, `Stats`. We have a bunch of errors here, and a very cool feature inside of Cursor is `/add open files to composer`. So many people don't use this. I say, "Fix that; do not do anything else." So we have done a lot of changes, right? Obviously, deleting those was an aggressive change, but the TypeScript configuration is messed up, so let's see how that how that's going to turn out. We need to create a `layout.tsx` file. Okay, so there it is. Where did it put it though? In `src/app` folder. Okay, right here. Now let's check the `next.config.js` file to make sure it's configured. Okay, "Make sure you have `@types/react` installed," so it `cd` the directory and that `npm install`. Okay, seems like our errors are resolved now, and it started the project again. Let's open it up, and there it is. So even though we deleted two major folders, our project is back. So we cleaned it up; we cleaned out the mess, and now we can get back to Vibe coding. So say, "Great work! Now update the UI to be more colorful and interactive. Do not do anything else." Okay, so I don't know if it's going to update `layout.tsx` or `page.tsx`. Okay, actually, `global.css`; that makes sense; uh, it's for the styling. So this is what our app looks like right now, and the beauty of `npm run dev` is that it updates automatically, so we can just keep looking at our site, and we will see the updates in real time. Let's actually create a new habit: "Test," and we should tell it that when typing it needs to be oh, boom, there it is. So already much better; this improved the UI significantly, but it's still working, so let's keep it there. I guess it's improving the stats next. This is the beauty of Vibe coding; you can literally see in a matter of seconds changes, and I mean, again, I'm speaking from experience that how that's how I built my entire startup, and wow, this is much better. CLA 3.7 is really great at UI design; look at this, nice, very nice responsiveness, nice icons. Okay, "Add habit form." So now it's improving this component; very good uh separation of concerns, I would say. There it is, "Improve this," and will it improve the Habit Item? Yep. So it went through like, wow, this is impressive; actually, it went through the structure of the entire page and improved each like the UI design of each component one by one. Okay, and now it improved this, but we can see the text is not contrasting; "Delete habit button." Okay, so it's literally enhancing everything, but we need to make sure the contrast of this text, as well as this text, is good. All right, so it made this gray, but on hover red; I like that. "Update the main page container for a more polished look." All right, so okay, this change was not that good. All right, so I'm going to say, actually, what we can do is we can reject this file and then just "Accept All," so our page stays white for better contrast, and going say, "The issue is with the text, right? So both in the both in Habit Item and Add Habit Form." So I'm going to tag these two files. Let's actually create a new chat: "Update `AddHabitForm` and `HabitItem` so that the text nicely contrasts the background color. Right now, it's nearly the same shade, which makes it hard to see. Do not change anything else." Okay, let's add a few more habits. So I'm going to do like, I don't know, "Meditation," "Working out." All right, so as you can see, we have a scrollable area; that's good, but these are not good, you know, these need to be changed. Okay, I'm zoomed in too much into the UI as well, but it works nicely. Okay, let's see, "Add habit form." Oh, now it's fixed. Okay, so now I can actually see the text while typing because it chose black, not like white. And now, "Habit Item," these need to be updated hopefully to like white or something. Boom. Nope, it's not visible at all. Let's say, "The tag Next in Habit Item needs to be white. Fix that; do not change anything else." So this is actually a good thing to realize: the AI models do not have good visual understanding. Even though CLA 3.7 is probably the best at this, it still cannot see what you can see. So just telling it like, "Make the text white," is much better than boom, there it is; it made the text white, and I can see that. Clicking this off gives me one-day streak, and I can see 25% completion, longest streak, streak one day, boom, 50% completion. This is actually a nice Habit Tracker, to be honest. You can see the streak for each of these habits; they probably will reset automatically on a new day, but let's say I want to add a reset button. So first of, I'm going to "Accept All." I'm going to say, "Into our page, add a small reset button into top right that acts as if we skipped to the next day, allowing us to track habits again." All right, let's see how it executes this request. Now, the beauty of using CLA 3.7 with Thinking is that, as you can see, it does a bit of reasoning before it does any actions, so on average it will have better results than using just CLA 3.7. All right, so it's updating `page.tsx`, and if you didn't know what file to tag, doesn't matter, right? Okay, so we have it right here; it's probably not the best spot to put it, but whatever. Let's see if it works. "Reset day," boom, works, and we still have our streaks. Keep going, one-day streak. Okay, click, two days. So this actually works; this is a nice Habit Tracker, man, and we built it in a few prompts with Cursor and CLA 3.7 on it. So this is what I mean; you can literally build startups with Vibe coding, and again, I'm I'm probably one of the first people in the world who actually built a successful startup. Still, there is a long way to go, but like $116,000 a month, I would say it's pretty successful. I really believe I'm one of the only people in the world who actually did this, who used Vibe coding to build a successful product that thousands of people use today, this day, and vect is only getting started.
So if you want the most powerful AI productivity tool in the world, if you want to have advanced AI agents constantly working on your tasks, saving your time, go to vect.ai, sign up, and for the next three days, we have a special offer: if you use the code INFINITE during checkout, you can get vect Pro for 30% off. This is the first time I've ever done something like this, and it is to celebrate 5 months since the creation of vect, and again, this offer is only active for the next 3 days. So if you're someone who likes to be productive and hates wasting time, go to vector.ai and sign up. This is the future of productivity. With that being said, thank you guys for watching, and have a wonderful rest of the week. See you.