Transcription
Vibe coding has made it easy to launch small businesses quickly. People have actually gotten rich building apps this way, whether it's SAS products or other applications.
One of the biggest frameworks used by Vibe coders is Nex.js. What if I told you that you can turn your coding agent like Claude Code or Cursor into a specialized tool for building complete Nex.js apps. You won't just be building demos. You get real apps with login systems and payment processing already set up ready to sell products and make money.
The main thing that will automate the entire full stack application is the use of MCPs. I'll be using different MCPs that will help me create the front end, the back end, and even set up the payments. All of this done with just prompts. What's great is that I don't even have to go to their sites and do manual configurations because the MCP can handle that part as well.
So throughout this video, we'll be working with three MCPS with each one being responsible for a certain part of the application. Now I'll be using claude code with them but this will work with any AI agent you prefer. We'll connect all the MCPS in one claude code project. So I'll go ahead and create a new folder called agent hub which is where we'll connect all the MCPS. I'll explain the application itself later on.
Now the first MCP will handle the back end and for that I'll be using the superbase MCP. To connect this to Claude code you'll need to run a command in the terminal. We'll provide all the claude code commands for every MCP. But with Superbase, you'll need to add your personal access token. You can find this API key in your Superbase account settings. And once you have it, just paste it into the command we provide. After running the command, you can verify the connection in cloud code by using the /mcp command, which will show you whether it's connected successfully. As you can see, in my case, the connection went through perfectly. This same verification method works for all the MCPS I'll be showing you throughout the video.
In the front end, I'm using Shad CN components, which I absolutely love because applications made with them look really amazing. To work with these components effectively, I'll be connecting the Shad CN MCP. What this does is give your agent better context of all the Shad CN components, allowing it to use them correctly and reducing the chances of any UI issues. You can find the command for clawed code in the resources below. And I also have a dedicated video on this MCP server that I highly recommend watching. That video will show you how to use Shad CN in any app perfectly with a workflow I've built specifically for this MCP server. As you can see here, the Shad CN MCP is now successfully connected in Cloud Code.
Now, a quick break to tell you about today's sponsor, ProActor AI, the world's first proactive AI teammate. Unlike tools that wait, Proactor spots what you need in real time before you ask. People say Insights listens and pulls out the important facts, risks, and opportunities so nothing gets missed, even during fast, noisy meetings. Teams call proactor memory a second brain. It saves past chats and brings up context when you need it. A product manager said, "T-do list turns decisions into clear tasks automatically." Colleagues use transcription for accurate transcripts and short summaries to catch up fast. seamlessly. Wiki View became a simple shared knowledge base the whole team can use. Whether you're a professional student or team lead, ProActor AI turns conversations into clear action. Click the link in the description and start building today.
Now, the third MCP is for automating the payment setup. And we're going to use the Stripe MCP for this. Similar to Superbase, you'll need to get a Stripe secret key before running the command. Simply go to your Stripe application and grab your restricted API key from there. Once you have the API key, paste it into the command and run it and it'll connect with clawed code. As you can see, Stripe is now connected alongside all the other MCPs we've added so far.
So, what am I building here? I'm creating a demo store where people can buy and sell agents. It's going to be a complete application with authentication, different user roles, and payment processing. All built using the MCPS we just connected.
To start this project properly, I needed to generate a PRD for my idea. So I went ahead and had a brainstorming session with chat GPT. After the brainstorming session was complete, I took all those ideas and requirements and compiled them into a comprehensive PRD that covers every aspect of the application.
Now that the PRD is ready, here's where things get interesting. Since each MCP is responsible for a specific part of the application, I need to give each one a tailored prompt based on the PRD. Essentially, I'm taking the PRD and converting it into specific instructions that each MCP can understand and execute. To make this easier, I've created converter prompts for each MCP that translate the PRD requirements perfectly. I'll be sharing these converter prompts in the resources so you can use the same approach for your own applications with these MCPs.
Now coming to the actual workflow of building out the application. I'm going to be using these MCPs in a single chat. Meaning that I'm not going to be using any parallel implementation in this. So first we'll start with the back end using the superbase MCP. After that, we're going to build out the front end based on that back end we just set up. Once the back end and front end are done, we're going to move ahead with Stripe and set up the payment for our store.
Right now, all of the MCPS are connected. As you can see on the screen, the prompts for the individual MCPS have been worked out and I'm going to use them one by one. Starting with the superbase MCP. According to the prompt, it will create different tables in the database based on the requirements in our PRD. Claude Code reads the entire prompt and creates a to-do list of the tasks based on the PRD and step by step it will complete them. Right now, since there is no back-end project in Superbase, it will create a completely new project. Usually you'd have to do this manually, but here the MCP is going to do everything by itself. And now the back end is completely set up in Superbase and it is running.
Now we have to build out the front end to connect to this running back end. Moving on to the front end, we'll be using the shad CN MCP to implement the UI components. Now I'm going to give it the prompt converted from the PRD for the front-end implementation and it also contains the technical specs such as the use of shad CN UI as the UI library so that it uses the shad CN MCP. I'll also use a custom theme from tweak CN which is an amazing site for different shad CN UI themes. I'll link this in the description as well. For the shad CN MCP I've also added a slash command that contains additional instructions on how to use the MCP more efficiently. This is what I've shown in my Shadcen MCP video and you can watch that for the full Shad CN workflow. The prompt has the broken down implementation of the UI of the app and it also outlines the basic sections that will be in the app and also the elements that will be reused across different pages but it is not broken down in terms of the shad CN components. The shad CMC will figure that out itself based on the prompt that I will give. After giving out the prompt, Claude code is going to go ahead and build a to-do list to start the implementation with the shad CN MCP. It is fetching all the components that we need to use to understand its structure. And after getting the details, it will move on to creating a layout with the shad CN components. Now it will start creating the components and integrating them. Step by step, it is creating different sections of the application. By the way, right now the UI is completely static. The cart section and the checkout section that it has created so far are just UI. There is no functionality in them. Moving on, it created the rest of the components one by one.
Now it's time to run and test the front-end application. However, it's important to note that while both the front end and backend exist as complete entities, they are not yet connected to each other. The next step will be establishing the communication between these two layers. For that, it creates another to-do list and begins the connection process. After the task list has been completed, the connection is made and now the back end and front end are connected. We can also go to my Superbase project and go to the authentication panel. Here we can see the login attempts that I made using the login page.
Now we have to implement the payment process and for that I'll give it the prompt for the Stripe MCP. First it'll make a mock setup just to test out that it's working. Once that is complete, it'll replace the mock with the real Stripe checkout process. Now that the implementation is complete, let me show you the Stripe dashboard. In the dashboard, if I go to customers and then transactions, you'll see it has a complete history of all the transactions.
So, this is the agent marketplace that was built using all the MCPS. As you can see, authentication has been fully set up. Since I already have an account, I'll use the login option, though the sign up feature is working perfectly as well. Here's the main homepage. Now, let me demonstrate how the payment process works. I'll place an order, add it to the cart, and then proceed to checkout. After the payment has been processed, notice how it smoothly redirects to the successful payment page. Let me also show you the actual Stripe invoice. Here in my account, you can see all the transaction details have been properly logged.
So there we have it, a complete app implementation where we leverage these MCPs to automate the entire development process and build exactly what we envisioned. If you have any idea and a subscription to a coding agent with MCP support, simply add these MCPs and you can build anything you want.
That brings us to the end of this video. If you'd like to support the channel and help us keep making videos like this, you can do so by using the super thanks button below. As always, thank you for watching and I'll see you in the next.