Imagine building your next startup with nothing more than a sentence. This is Vibe, an AI-powered app builder that makes that possible. And in this course, you're going to learn how to build it yourself. Let's try it out by entering a simple prompt and hitting submit. What you're about to see next is something you'd normally expect from high-end tools like Lovable, Repl.it, or Bolt.
But in this tutorial, it is something you will learn how to build. The result? A fully functional Netflix-style homepage generated entirely by AI. We can explore the full app right here in the preview. And everything just works.
The layout, the interactions, even models and favorites. It doesn't just look like a Netflix style homepage, it behaves like one. And just above the preview, there's a live URL. You can open it in a new tab, share it with others, or test the app in a real browser environment. And when you're ready to see exactly how it works, simply switch to the Code tab and explore every component, utility, and file that was created.
But how is this even possible and how does it all work? Let's break it down. What you're looking at here is the Ingest Developer server. It shows a background task that kicked off as soon as we submitted our prompt. The task itself is handled by an AI coding agent.
The agent has access to various tools used to build the app. It can run commands in the terminal, create, read, or even update files. And its goal is to create a fully functional Next.js application tailored to the user's request. You can click into any step to see exactly what happened and when, which packages were installed, what commands were run, and which files were created or modified. Finally, the agent spins up a real development environment using an E2B sandbox, a secure container that runs your app and exposes a live URL, so you can preview and interact with it just like any deployed project.
And finally, the finished app is saved to our Postgres database, powered by Neon. Let's head back to our Netflix project for a second, and just above the message form, you will see that we have a message, two credits remaining. That's right, each generation uses a credit. So Let's see what else we can build with this app and find out what happens when we spend our last point. This time I will go with something a bit more interactive.
Like a kanban board I can drag around. And Just like our previous project, this one was created flawlessly. I can drag and drop cards and even create new ones. Everything just works. And just like our previous project, I can visit the file explorer and see every line of code that was generated.
Notice how I've got one more credit left. Let's go ahead and spend it. Right beneath our homepage, we can find all of our previously generated apps, or Vibes, as we are going to call them. Let's click into the first one just to confirm it is still live and working. But now let's use our final credit to build something new.
This time I'm going to build an admin dashboard, and I'm hoping to see some status cards and a paginated table. And here it is, a sleek-looking admin dashboard with status cards, sidebar, and a paginated, searchable data table. Notice how I have no more credits left. Meaning that when I try to generate a new prompt, I'm going to get an error, and it is time to upgrade. In order to get more credits it's time to upgrade.
Billing is powered by Clerk. That's right, just like their alt system, the developer experience is incredibly smooth. No webhooks, no complicated code, no confusing Stripe setup. Everything works out of the box. Watch how quickly I can upgrade my account.
That's it. I have upgraded and I am now on the premium plan And I can see my status reflected immediately in the user settings. And as a developer, you can now track your monthly recurring revenue on the Clerk dashboard page. After a successful upgrade, you will see that you have a hundred credits remaining, and beneath them the exact time they will reset. And by the way, Dark Mode is fully supported in this project.
You can switch it on from the project's settings bar, and it will immediately update the entire app's UI, including the code explorer and the landing page. This isn't just a coding tutorial. We'll also be following a proper Git workflow throughout the project. This will include creating commits, new branches, and real pull requests. Every pull request will be reviewed by CodeRabbit, our AI reviewer that provides feedback on everything from logic issues to best practices.
All actionable insights and critical mistakes will be flagged automatically, drastically improving our code quality. Let's quickly go over the tech stack we'll be using. Next.js 15 with React 19 make our framework with support for server-side rendering and server components. TRPC combined with 10-stack query will ensure our app meets full-stack type safety. Prisma ORM with Postgres provided by Neon will be our database solution.
Tailwind v4 for styling, along with ShadCNUI for accessible and reusable components. Authentication and billing will be done by Clerc, while background jobs and agent tooling and agent networks will be done by Ingest. E2B for executing AI-generated code in secure cloud sandboxes. Docker for generating custom sandbox templates. OpenAI Anthropic or Grok, depending on the model you choose to power your AI agents, CodeRabbit for AI-powered code reviews, and of course, we'll deploy everything to production when it's finished.
And now, without further ado, let's get started.