How To Build Anything With No Coding Knowledge

So today I have the pleasure of teaching you everything I know about Claude code in one video. And there's a lot of ground to cover. But I won't just be talking about starting your first project. I'll be guiding you for the entire process of literally creating a new folder all the way to your application idea. Being live on the Internet with user authentication and multiple AI integrations, this might sound quite ambitious, but recently I've had the experience of multiple friends approaching me and asking about this whole vibe coding thing, and some of them specifically asking about clone Claude code. And this session is going to be exactly how I would walk a good friend through this entire process. As a newcomer to all of this, the main chapters that we'll be covering here is one, the setup and the applications we'll be using. Two, the agents feature within cloud code, how to create them, what's their purpose, how I use them. Then we'll hop on over to MCPS again, which ones actually matter as a beginner, and then we'll also go through setting up your first database and making your application not just available online through the use of a combination of GitHub and Vercel or but also functional by showing you how to fix issues when they rise with a combination of all the things that we previously discussed. So, as you can see, there is a lot to go through, but I'm making this video because I'm confident that you can absolutely do this. And I'm saying that because I have done this myself. I myself do not have a development background, but with nothing but curiosity and a little bit of grit, I managed to really work my way into this. And I'm looking forward to sharing everything I know at this point in time with you in order to get started with this incredibly, incredibly powerful software. So with that being said, let's get right into it. And the thing that we'll be getting done today is building a brand new application around the idea that I personally quite enjoy. And here's my idea, I'm going to draw it out. It's basically a web application into which you can log in. So this is, you know, username and password, and then once you are inside, it uses two different AI models to help you set boundaries also. In other words, it's kind of a AI tool to help you say no in an elegant and professional way. This is the topic that I noticed a lot of people are not good with. For me, this has been something that I was not that good at. And as I got good at it, it changed my Life. And now I see it all around me. Like people don't have the ability to kind of assert themselves and say no. So we're going to build an app that will help with that. And the idea is basically just a text box at the top where you can enter the event you want to avoid or the ask that somebody's making that you want to say no to. And then what I wanted to generate is three different versions of saying no, light, medium and heavy. And then I want images along with each one that I could maybe send with the message to lighten the mood a little bit. So quite simple, but we'll be using the Entropic API to generate the free ways of saying no. And then we'll be using an image generation API to generate respective images for you. And it's behind the paywall, so you can share it with loved ones, with team members, whatever you want. And I think this concept of app is small enough for us to get it done in one session, but large enough to cover everything to make you confident enough to actually do this yourself, because you're going to see the entire process here, A to Z. Okay, so let's get into building what we'll call the GNOME machine. I actually kind of like that word. But in order for us to build the no machine, we actually have to get setup first. So I'll be switching over to my screen here to guide you through the step by step. So first things first, with the setup and all the supporting materials and prompts and agent prompts that we'll be using in this video, I put all of them into one big notion page that you should open up along with watching this video. In order to have all the links, prompts and resources, including the little tips and tricks that I share in this video in one simple page. I put the link to that in the description below. I also pinned it as the top comment. All I ask of you is to sign up to the free newsletter where we share prompts similar to the one that this entire application is built on on a weekly basis for free. You can so just check out the link in the description for all the resources that we'll be using in this video and all the various applications and various other recommendations. So that's one essential resource. And the second one is actually a video that I already have on the channel which helps you get set up with Claude code. In that video, I did my very best to show you the setup from not having it on your computer all the way to have a functional version of Claude code on your computer that I won't be doing in this video. Again, I'll kind of just assume that you already have cloud code running. In case you don't, that video will be linked below. Go through that first. I think it's like a six or seven minute video and includes some examples samples too. So in just a few minutes you'll be ready to go with Claude code running. And in case you want to prepare for the rest of this process, the other things that you will need to have to follow along this entire process are the following. As mentioned, you need claude code installed on your computer. You will need an Anthropic account for the API key. From Anthropic you will need a File AI account for the image generation API key. From there you will need a Vercel account to deploy. You will need a GitHub account to store your application and do versioning of it. Then for extra credits to make things more convenient, I'll be using this in a video. You will want to install the GitHub CLI and then finally you want the subabase account to host your user data and the application data in a database. The good news is if you set all of these up once, you can keep building apps and you'll just keep using the same services. You just have to set it up once, including Claude code. But the cost of these GitHub and GitHub CLI are completely free. Both Sapabase and Vercel are going to be more than sufficient on the free plan. I mean I've been literally running our website on the free Vercel plan for free few months and I didn't even hit the limits. So that is free for both Anthropic and the Phala API. You'll be paying per usage, so you'll have to load a few dollars there. But to get started, $5 in each account will suffice. And then Claude code is free, but the most efficient way to use it is on the paid Anthropic plans. I recommend the $21 to get started. If you hit the limits regularly, you upgrade to the $100 one. If you hit those limits regularly, you upgrade to the $200 one. That's the one I'm on right now, but I've been kind of obsessed with this thing. A lot of 5am mornings, me just having two free cloth codes open, working on different projects simultaneously. I only recommend you start hitting those limits regularly though. So start with the $20 one and avoid paying through the API for Claude code. Because that just gets super expensive extremely quickly. And for example, on a $200 plan, you get thousands of dollars of value in terms of the APIs. So those are all the things that you need to set up. And I realize that's a lot. And I also realize I'm kind of throwing you into the deep end of the pool right here, especially if you've never worked with any one of these apps. I decided that for this process it would not be the most useful thing for me to go through and see sign up with Google into each one of those services to create an account. You can do that on your own. And if you ever get stuck, you can always ask ChatGPT or Claude to assist you through the process. So if you're trying to create a Vercel account or you're trying to do something in this video and it doesn't work and you're not sure about that one, you can type it right into Claude code and say, hey, I don't really understand this. Can you explain this to me step by step? Or you just go into ChatGPT and ask the same thing and you will always get the support that you need to get all of this done. I'm confident in that because again, I've done it myself. And also in the community. We've seen so many people go through through this entire process and set it up with no prior knowledge. With non technical college professors, we have entrepreneurs who took a software development class 30 years ago in university and haven't touched it since. Picking this up. Building applications, monetizing them, empowering their own companies. This just works. And there's a reason I haven't done a video like this in a long time. This really is a game changer and I can't wait to get into the next section of explaining the agents to you. Finally, now we have the setup section. I'll assume you have all of these accounts you have. Click Claud code running and we'll just get right into it by creating a brand new folder. Okay, I have this folder here with various cloud code projects. I'm just going to create a brand new folder, name it the no Machine. Okay. And then what I'm going to do is right click the no Machine. And here on Mac, this is the quickest way to get the Cloth code. New terminal add folder down here and then you just type cloth. As I have it installed already, it will open up Claude code. I'll just make this larger so it's easy for you to see. Okay, I trust the files in this folder. And this is where the process begins. So the GNOME machine is created in a brand new folder and Claude code will be creating it within here. So I'll kind of do this two tiered setup with the folder over here and Claude code right here. So before we start creating the first files in a folder, I want to show you some essential things you need to set up in here. One of them would just right away be going to Slash model. And then they shipped a recent update here with Opus Plan mode. And this is just the best thing ever. If you're in the lower tiers, you're not going to be able to use Opus all the time. So a lot of people just default to Sonnet because it's just way cheaper and you don't need Opus. In most of the use cases, Opus is just a larger, smarter model. But many of the things you do Sonnet is perfectly fine. It's extremely good too, especially for writing code. But in this Opus Plan mode, what I'll be showing you in a second is that before you implement a new feature or you start a new app, you always want to create a plan. And what Opus Plan mode does is it uses Opus, the big smart model, with a lot of forward thinking and planning and strategy for your plans, and then uses Sonnet to write the code. So you kind of get the best of both worlds without maxing out your plan too quick. Okay, so when you have that set up, then you will want to move into initializing this project. And you do that by saying slash init. And if you say slash init in here, it will look at my code base. And right now it has no information, it has nothing. Right? It is just the name of the folder, the GNOME machine. But this will set up the project for success with Claude code. And you always, always, always want to do this, because the main thing this is going to do is create a markdown file in the root of the folder called Claude m with essential information on your entire app. And then as it works, it will keep updating this file. You can kind of think of this as the brain of the project, because really, every time something changes or you add more things, a Claude MD will be updated. And here wants a confirmation. So I have three options here. I can say one yes, two yes and don't ask me again. This command is always okay, and then three no, and then you can kind of direct it. I usually like to say the second yes so it doesn't bug me so much. And there you go. It's created The Claude MD file, we can kind of have a quick look at this. This file provides guidance to cloud code when working with code in this repository. This repository is currently empty. When code is added, this file should be updated with. And then here are the different things that will be in here. So again, this is kind of the brain of the project. You can also think of it in terms of human psychology as the ego of the project, the identity, like, what does it do, what is this project's job, what are the previous employments or schools that this project went to, what tools is it using, etc. So now that we have the basic setup, I want to get started with this app. Let's actually start turning the no machine into a reality by telling it about our app idea. But before we start typing, we got to enable one essential feature. You got to know this and it's a bit hidden. So what you want to do is hit shift and tab and I want you to watch this part of the screen. When I do that, shift and tap once plan mode on. See that? If I shift and tap multiple times, it kind of cycles through these three options. I want to go to plan mode because if you're inside of plan mode, cloud code will not be doing. It will be planning its next actions. Because if I would just type what I want from this app, what would usually happen is say this is Claude code right here and I send it a prompt with hey, I want the no machine. And then I give it some details on what I imagine with the app without the plan mode on, Claude code would move on to create a To do list. This is my beautiful drawing of a to do list with different items. And then it will think for a little bit and start working on the first item, and then it will work on the second item and so on and implement all of this. And a few minutes later you have the application right there for you to review, add features, remove features, remove any bugs, etc. We do not want this for anything. That is a big task. It's fine to let it work like this many times, but if you're starting a brand new app, especially also if you're adding any new feature, what you rather want to do is have cloud code here, but have it in plan mode as we switched it right now and we're going to send the same null machine prompt idea to it. Oh God, my writing is getting increasingly bad here. And then rather than it creating a to do list and just getting to work right away in the plan mode, as you might already be able to do tell it will create a plan for us and say, okay, these are the TO dos that I'm planning to do. These are the features that I want to include. These are the things that it's going to achieve and this is the architecture that I propose. Now, you don't have to understand all of the things that it will plan for in order for this to be useful for you, but you definitely want to review its direction, especially if you're starting with nothing as we are right now. So what I'm going to do right here is I'm just going to type out my idea for this snow machine. I want to create a web app that uses the anthropic API to turn an event that I want to decline or a message that I want to reject into three different ideas on how to set a boundary or say no. The application will be titled the no Machine. And for each one of the free ideas, I also want to generate images that could be sent along with the message you generate to get the point across smoothly. Okay, I think that describes it pretty well. And I'm just going to name the different models that I plan on using the file AI Flux Realism API and Ropic Opus 4.1 API for the response generation and SAPA Base for the authentication. And I think that's actually it. So this is really all it takes to get going. And now that we're in plan mode, I can already hit Enter and kind of explain a few alternative approaches that other people take. Because as you start consuming content on cloud code, you will find many different opinions on how to get a project started. Some developers have these elaborate frameworks on how to exactly do it and they're sure that they have the very best way. There's these entire methods with like 10 steps that you have to do before you even get started into project. And although that might make sense, what I found from some fellow developers and cloud code users is that a lot of them don't work reliably and at this point in time, we just don't have a single consensus of how to best do it. And this tutorial is for getting your first proper project up and running. So we won't be getting into creating an entire PRD and design specifications in advance. Before getting into this, I just described this in natural language in two sentences. And there we go. We have the plan. In case you wondered how I dictated right into cloud code, that's not a native feature is this is an app called Whisperflow that actually reached out to sponsor us and we're going to be doing some partnerships with them in other videos. But yeah, this is not sponsored. I just generally use them and it works great with Claude code because I just press two buttons and I can dictate just like I would in ChatGPT or Claude. Back to our plan. So here we have the plan you really want to review this in details. So the no machine web app implementation plan Tech stack front end next JS14 with App Router, TypeScript, Tailwind CSS. So if you're non technical you don't really have to understand all of this. But I think as you work with a few projects you'll just naturally learn about some of these frameworks and it often helps to kind of just 01 out and then ask ChatGPT explain next JS14 to me like 16. I kind of like the 16 to 18 range because it doesn't tell children stories, but it really keeps it simple. It's like Lego blocks for a website. You build small pieces and snap them together. Next JS is like a pro toolkit that makes react easier and more powerful. Okay. Then it explains more. Back to building this thing. So authentication will be with Subabase. APIs will be anthropic Claude and file AI Flux Realism. The database will be subabase and will deploy on Vercel. This is the folder structure it imagines that will in a second appear in here. And then these are the different implementation steps. You can see there's only seven. This is actually quite a simple application for us to build here today. So it will go through the step by step and now it asks you, okay, do you want me to proceed and then stop at every phase and you need to approve that it's or do you want to change something about the plan and go keep going. Now we could just say yes, but at this point I will show you the very best practice that I hope you will have learned and adopted by the end of this video. And that is using MCP to make sure these entire plans are based on the reality of what these frameworks do today and how they're used today. Now that might sound complex, but luckily this is the most common problem. And there's a fantastic tool that you can activate as an MCP and CLAUDE codes to actually get this done automatically. Still confused. Let me show you in practice and explain after. Okay, so I'm going to say no, keep planning. And I want to alter the plan and what I'm going to do is I'm just going to tell it, review the plan with Context seven. And I'm just going to hit Enter and we're going to see this work. What context 7 is is MCP that I have installed in here. It's completely free. We'll do it later on in this video. And I'll be showing you MCP management and agent management in a later point of this video. But as I said, we're kind of skipping ahead here because this is so damn useful. If you're not familiar, contact seven.com is just this free website that collects the newest version of the documentation for all of these things. So, for example, we'll be using Vercel, right? And they updated their documentation six days ago. And the newest version is available right here. And you could go in here and copy this entire documentation by hand and paste it into claude code, and you could do that with each one of the actual tech tools that you'll be using here. Or alternatively, you just install the MCP server by running this one line in claude code. This is somewhere downhill. We'll do this later, installing claude code. And if you run this line once and restart claude code this right here, it will add a MCP server that you can then invoke inside of claude code by simply saying what I did right there. So if we scroll up a little bit, you'll see review the plan with context 7. Aha. And then we see right here, I actually do not have the context 7 server, so I'll hit escape to abandon this plan for now and say mcp. And it says no MCP servers configured. So what I'm going to do is I'm going to just close this conversation with claude code right there and to install the MCP again. This is skipping ahead a little bit. You just go ahead and run this command. And it looks like it added successfully. So we can just close this terminal and open up claude code again. New terminal folder claude. And now I get to show you this extra feature, which is if you type help, you see all the commands that are available to you. And there is one that continues your last conversation where it left off. It's slash resume. Okay, so I'm going to say slash resume. And then it's this one from one minute ago with 55 messages. Perfect. See, it loads right into where we were before. And now I can type MCP and hopefully we have the context 7 server here right there. It's already installed in the project. So now that it's installed, I could just escape out of this. I can say, review the plan with the context 7 MCP. And now it has the server to actually look at all this documentation for all the apps again it told us about in the beginning. So as you remember, it told us it's going to use next JS, Zappabase, TypeScript, Tailwind, Vercel, and now Claude Code has the ability to on its own check out all the newest documentation on those tools and adjust the plan for how to exactly implement this according to the makers of those technologies themselves. And that's really what you do. This is how you get the best, most reliable results. Because often these LLMs are trained on code that is a few years old. And maybe certain things worked a bit differently back then. This way you make sure it's all up to date. So I'm going to confirm once more here and from here on out I won't be explaining this whole confirmation process. If you just see this pop up, you can always either say yes, continue or no. Don't continue. Sometimes you get this option in the middle like yes, don't ask me again. And usually I use that. So then it just becomes a bit more flowy and easy. Okay, here's the updated plan. So based on my research with context 7, here's the updated and refined implementation plan. And then it tells you, here are the key insights from the research from the new documents. Next JS App router authentication. Here's a best practice on how to actually do it. This is something it didn't have before. Amazing SAPA based documentation said this is how authentication is best done today. Not a year ago, not two weeks ago today. Also checked out Anthropic integrations and the documentation from Anthropic themselves on how to use the API. And then here are the phases. First it will build the foundations, then it will build authentication. Then core functionality, image generation, features and data and polish. So one thing I noticed here is we're not in plan mode anymore. So I'm going to say Shift tab twice more to get back to the plan mode. At this point I could just say continue, but I'm going to go back to plan mode and insert one more thing for our plan because I do actually have a very specific prompt that I want to use that I prepared here in advance. I just had a conversation about Claude with what I imagine with this prompt and after a few refinements I arrived at this point where I feel very happy with it. System prompt Boundary Coach AI so this right here, you are a reformed people pleaser turned boundary expert. You once apologized to automatic doors for making them open now you help others set clear professional boundaries without the guilt spiral. And then the whole point of this is that you input a specific boundary scenario and then it outputs three boundary options, a soft no, a clear no, and a wall, including free image prompts. To visualize that, I'm just going to take this as is and copy it into Claude code. It even has some example image prompts. Amazing. And I'm actually going to copy this entire message and tell Claude Code one last refinement of our plan. All right, that sounds great. I also already have the prompt I want to use to generate the free boundaries and the according visuals. Okay. And then in quotation marks, I just paste in this entire prompt with command V and that is it. Now I'm ready to hit enter. It's going to create one final plan and we're ready to go. And as that will work, we will move to talking about agents and how to use them in the process. But already, with us having this set up and being at this stage, we're ready to hit Enter and let this Agentix system do its thing and build out this application for us. Now, to be clear, there's more to talk about here, and we have to finish this entire process. Okay, but if you got to this stage and if you followed along and if you set up all the things, you're super far already, because this core process of planning, refining the plan, and then getting to this point where it tells you this is the entire implementation plan. These are the key features. We're going to have free responses, humorous visuals. We're going to have the reformed doormat personality. I just absolutely love that word combination right there. We are ready to just hit enter to build this. Okay, so now that this is on its way, it will work for, I don't know, I guess would be five minutes to actually populate this entire folder. I'll kind of leave this on screen right now and we can fast forward over it. And I'll probably have to confirm this a few times in the process, but what I want to do next is review how Claude code is practically working right here and how you can make this workflow even better by using MCPS and agents. They really go hand in hand. But I want to start out by talking agents, because we'll be using them in a second here. Now, as you can see right here from this entire conversation, there is a to do list right here that it will work for. And what Claude code basically does in the background, you can think of it as a genetic system that will spawn Agents to tackle the first item and work through it and then it moves on to the second item and works through it. And it has a lot of tools here. This is the terminal, so it can create folders, it can delete folders, it has different search functions to look over the entire application that it's building. Look, if I open this up already, we have all these files that it created in here just by doing its thing. To be clear, I'm just explaining right now, right? This is running by itself. The only thing I'm clicking is that if it asks for permissions, I tell it, yeah, do that. And if you ask again, keep doing it. But it's already creating the application in here by itself. This is not like ChatGPT where it writes 200, 300 lines of code and you can maybe preview it in there, but if you start going beyond, it starts getting lost. No, because this has task management built in this big old to do that it's doing here. And these planning features where it uses the super smart model to plan for you and you refine the plan. The results of this are far superior. You can build apps that are thousands, if not tens of thousands of lines of code that actually work. I'm not saying they're perfect. I'm not saying you should go ahead and sell them to the world and pretend as if you have enterprise grade security right off the bat. No, for that you should probably work with a professional developer or a studio to get it audited so that it's all okay. But if you're using this for yourself or within your company or the stakes are not that high, this works and it works better than anything like this before. And I want to be clear, we've seen many applications like this before. This is not the first agentic builder that has come out. Matter of fact, there's been dozens, if not hundreds before this. I Remember back in 2023, we had agent GPT and we had baby AGI. Remember those? They kind of worked. Not really. Nobody really used them for anything useful, but it was the same idea. Let's not use one ChatGPT, but let's use five ChatGPTs working together to get more done. This is the first system that really successfully integrated it and that's why I'm showing it to you today. And that explanation now transitions into this discussion around agents, which as this works, I want to illustrate to you on brand new slide right here. Because what you're probably familiar with is the following. When it comes to agents, I will assume you're familiar with ChatGPT. If you're watching this video like you probably have account and you've probably been using it for a while. And the way ChatGPT works is, well, you give ChatGPT a prompt and ChatGPT gives you a response. Now they started making it more powerful in multiple ways. They add extra context to your prompt, so the memories dynamically look at your other conversations and all of a sudden chatgpt knows more about you. And it's not just the prompt that you're feeding it, you're giving it the prompt plus some extra stuff. You can set this up in a custom way through custom instructions. So ChatGPT is not just getting the prompt, but. But then also they started adding in tools, right? There's the code interpreter, there's the image generation function. ChatGPT doesn't just give you text back, it can generate images, it can write code. So it doesn't just give you the response, but here in the middle, it might use the image generator that went so viral this year, and then it gives you a response plus an image. And people are really excited about that because all of a sudden their AI assistant can generate images, it can visualize data, it can do maths and things like that by running code. It's really impressive. Now, how does this differ from claude code? And how does just claude code differ from using custom sub agents in cloud code, which I want to explain now? Well, the base promise stays the same, right? Just instead of ChatGPT, we have Claude code over here and you still input a prompt that it works with, right? The fact that this interface looks a lot less user friendly than ChatGPT is just a visual thing under the hood. The same thing is happening. You give a prompt to LLM and then it processes it. But the big difference here is there's different types of context that get added. 1. So as we talked about, the cloth MD file is one type. This didn't get updated yet. With everything we want to do with our project, we'll do this in a second, as soon as it's done with all of these tasks here. But that is one piece of context that keeps it on track. We're not just working on a task, we're working on an entire project. And you got to keep the North Star of the project in mind, not just the task you're working on. Beyond that, it spawns these different sub agents by itself. You can see it's doing these things step by step. So it has a to do list and then it spawns different versions of itself to tackle those things. And then it prompts itself on the background. So they didn't fully reveal this. There's people studying this and using proxy servers to kind of look at the messages it sends back and forth. But essentially like the way you can think about this is this is not just CLAUDE code giving you a result, it's CLAUDE code talking to claude code talking to CLAUDE codes to get your thing done. I think you get the point. It just keeps going like this and it does that while keeping this entire to do list in mind. Okay, so it also manages its to do. And then also, as you've seen before, we have these different ways of dynamically adding even more more context and really engineer our context to our advantage with different tools. In here, the one tool I showed you so far is the context 7 MCP, where it pulls the freshest documentations and adds that. So when we did that, it wasn't just considering the prompt I was giving, it was also considering the CLAUDE MD and the to do or more like the plan in that case that it had at that point because it had the entire chat history too. But it was also considering the context from the context 7MC. And all of a sudden that's a lot of information. That's a lot of rich information to actually do something. In contrast to you doing the same thing in GPT5 and it then going ahead and giving you an answer. This is a lot of concrete info you're giving it. And the whole system is set up to work for five minutes sometimes I had it run for an hour or two with some of the sub agents that we're about to explain next year. On its own. You never get a two hour waiting time in ChatGPT. It's just a whole different system for a different purpose for users that have more patience, are ready to really engineer the context and refine the results rather than GPT5 being optimized for outputs that are usable as is. Okay, so over here you see the different types of context and over here you can kind of see the workflow as it goes. But additionally to all these types of context, there's one more thing that you can do and that is set up custom agents that add even more context and make your request even more specific. Plus they come with other advantages like you can force them to use specific tools because they have a specific purpose. More on that in the next section on mcps. But if you're using one of these sub agents, which actually at this point I'm going to show you visually because that just makes it so much simpler. So I'm just going to open a project that I've been working on recently here with some sub agents set up. I'm just going to say Claude and then as I'm in here I'm going to say slash agents. And as you can see, I have multiple agents in here. So I have a QA software tester, aiaos, backend engineer, I have a Vercel, depending on deployment fixer, a code reviewer, front end web dev and then a flux image generator. You can see these are all different agents and you might be like, all right, okay, so different agents, what is that all about? Well, it's really simple to create them and I think understanding them starts from this creation because you say create new agent and then it asks you, okay, do you want to create this agent in this local project or do you want to create your personal agent generally in claude? Let's just do a personal one that is going to be across all of my different projects. And then what Anthropic recommends here is that you always start by generating it with claude. So I'm just going to pick the first version here and then I can answer this question, describe what this agent should do and when it should be used. So specifically I'm going to create an agent that is just there for expert development documentation writer that updates all documentation including the Claude MD file. Okay, going to hit enter. It's going to use CLAUDE to generate the agent setup file. And there we go. We proceeded to step here 4 where it asks what tools does this agent want? So you could just give it all tools or if you go to the advanced options, you can really see the full list and you could be very selective. You could for example, tell it, hey, I have no interest in this one having these other MCPs. I'm going to deselect this one and this one can hide the advanced options. Again, make it simpler and then it can keep all other tools. That's fine. And then we're going to continue and then it's going to ask, okay, what model do you want to use for this agent? As writing out the documentation is pretty simple, you could get away with using the haiku model here. That will eat up the most credits and give you you the most mileage on your plan. In my case, because I have the biggest plan, I'm going to use opus. I really like the writing and the thinking and the strategy of Opus. So especially for my documentation, I want this to be well written. You can probably get away with Haikudo. And then I'll give it a color. This one is going to be cyan. Perfect. And there we go, the final setup, our Dev Docs Updater. There's a description of him right there, There's a system prompt and we can just hit enter right here. And rather than me kind of like over explaining this, let's just look at the agent who's right here. Dev Docs Updater. You can see him, I can navigate to him, hit Enter, say Edit Agent and then open in Editor. And then it will open up a text editor with the entire system prompt and the entire instructions for the agent that Claude came up with. And right here, this is where we return to our little visualization of what the agent does. Because if you're using an agent, you're not just giving it all of this context right here, you're also giving it, well, in this case, the Dev Docs Updater markdown file. But for a little visualization here, let's just write agent. Because what really happens is, is all of this gets added to your history and all of a sudden this agent is executing the task that you assign him to. And that's exactly what you can do. So now if you do things, and don't worry, we'll review this file in a second and what the different sections mean. But when you're actively working with Claude code, what you can now do is not just that you have all of this context that you're communicating to cloud code, and therefore being really precise in what you want and how you want it done, but also the entire process changes. Because all of a sudden, instead of Claude code just interacting with itself and just creating to DOS and doing things, you can tell it more concretely, hey, Claude, I want you to work for the to do list. But once you're done, I want you to spawn this Dev Docs updater and use specifically that agent to update all of my documents. So then Claude code will classically work with itself and itself, but then once it's finished, it will move and use this Dev Docs agent. I'll just type A because I'm out of space here, and it will use this specific agent to do the specific task. Now, on the surface, that might look trivial. You could just say, okay, why can't I just send this prompt to ChatGPT after having a bit of a conversation? Isn't that the same thing? Well, if that's all you're doing, yeah. But the point here is that this does way more okay, because the structure here is the following. At the top you have a description for other agents to understand what this one is doing. And it's really there to make the other agents understand what when they would want to invoke, AKA activate this agent. So here it says use this agent when you need to create, update or maintain development documentation, including readme files, cloud MD files, API documentation, blah blah blah, blah, blah. Then down here is a list of all the tools it has, including MCPS. So we gave it access to the context 7 MCP. You can see that right there. We select that as an option, right? So it can actually pull up the newest documentation to write our own documentation reliably. That's a great thing that you, you cannot just do in ChatGPT. And then down here is the system prompt on how it should behave. And this is the part you would want to customize along with this description if something there doesn't sound right to you, but usually gets it pretty right. But especially for agents that you're going to be using regularly, this is where prompt engineering, as much as people dislike the word at this point is necessary because, well, this is where the magic happens. This is where you define the behavior of the agent, the rules that it lives by, and this is where you can make changes. So CLAUDE did an excellent job at this agent building prompt in the background. So usually what you get right here is an incredible starting point and all you need to do is make a few minor tweaks. But if you want to change how it handles Claude MD files right here, then you could make that right in this section. And then if you make any changes to the file, you want to re save this close out of it and your agent will be updated. And then just to demo this right away in this other project, I actually just realized that I haven't updated the cloth MD file file today on the changes that I've done. So use the documentation agent to update my documentation, hit Enter. And then in a second we should see the sign agent spawn in here and CLAUDE code actively using that agent with the tools that it has assigned to it and the system prompt that we just updated to do it. And here you can see it, Dev Docs Updater, it's already doing it and updating the documentation for this project right here. And that's the very basics of how agents work. Now the cool thing is if you set up multiple agents, you can say things like, okay, I want you to build the front end with the front end engineer, then I want you to connect the backend with the backend engineer. Then I want you to use the testing agents to test the entire app, and then in the end, use the Dev Docs updater to update the entire documentation of the working app that the other free agents built. And you hit enter and you go get a coffee, and three hours later you come back and the whole thing happened. Now, in practice, you might have to confirm a few commands in between. Between, but that's how it works. But at this point, I do want to talk about when to use these agents, because it's actually not so obvious. And from my experience, I don't think you should be using an agent for every single thing you can. Now, this is maybe more of advanced concept, but nevertheless, I want to kind of squeeze it in here, because if you work with agents, it's important to understand that when you spawn Agent One and he goes off and does all of this work, okay, and then let's say it's a research agent with access to the Internet and it researches various sites and pulls them together and creates a summary for you, then the research agent will have an output. It will create this research text that is maybe this long. It's just a fraction of the work it did. Right? Like, that's the whole point. You don't want every single detail of what the agent did. Well, if you then take the research agent and you hand it off to a writing agent, and yeah, at this point it's hopefully starting to click, that you can use these agents for more than just development. You could use them for any workflow that you already have in ChatGPT, to recreate your prompts with agents and then let them collaborate. But if you do that again, it's important to realize that if Agent 1 produces this research document, this output, when it hands its work to the next agent or to Claude code, the kind of main agent, the orchestrator, as you can think of him, then it only hands off the result, not the entire process. In many cases, like if you have a research agent, that's fantastic. If you have an agent writing documentation, that's incredible. You don't want the entire thought process handed off to the next agent. The beautiful thing about these agents is they have independent context. So right here, agent one has 200,000 tokens of context. As of now. They released the update to the Sonnet API recently with 1 million tokens, but as of now, it's not live yet. Depending on when you're watching the video, that might be the case already. But the point is, each agent has its own Context window, meaning its memory is limited. It cannot just intake every book in the world into its context. There's only so many words it will take. And it uses that context to do all of this work right here. But then it produces a report that, let's say, is maybe just a few thousand tokens, and it hands that off to the next agent, which takes over. So here we have agent two, and maybe agent two is a writer. And again, this agent has another 200,000 tokens of context. And it takes in this report, which is amazing because now it has a summary of everything that it needs to know to then go ahead and work again on a final, I don't know, let's say, block blog post. And then it writes its blog post with all the context it has, including this report, and then, voila, you have your final blog post, and this worked great. So at this point, you might be asking, what are the advantages of using an agent over just using claude code as is? Well, there's a few. One of them is you can give specific agents specific tools, so you can make our agent read only, so that doesn't have the ability to create or delete files, which can be advantageous in some situations. Also, you can assign certain MCPs to just a certain agent, not to overwhelm CLAUDE code, because if you have a bunch of MCPs, you can assign one to each agent and then just invoke that agent when you need that ncp. And you know that you set up the agent with all the instructions of how to really use that mcp. So, for example, if you want a backend Engineer that uses context 7 every time in the prompt, you can specify. And claude code gives you this advice of using the word proactively. So if you're in the process of refining that agent's prompt, you can say, Proactively, use the context 7mcp to verify all the planning you do, and then every time it plants, it will use context 7 on its own. You can do this with any MCP really powerful. Beyond that, you can pick which model to use. And by far my favorite thing is you can chain or run agents in parallel. So let's abstract away from coding for a second, because you can use CLAUDE code for way more than that. People are using it to write, to build design studios. All of these other tasks that you might already be doing inside of ChatGPT manually by copy pasting prompts. Well, you can set up agents here and kind of chain them together. So how that looks practically as we illustrated before with chatgpt you put in a prompt with some extra context and you get a result as it works for it. Maybe it thinks, maybe it uses some tools. With Claude code, you get a whole lot more context, as we discussed with the Claude MD file and all these extra agent prompts, etc. And also the work process is different. It's cloud code talking with cloud code, talking with cloud code, creating a plan, talking with 20 more instances of cloud code. So it kind of works with itself and then gives you the result. And now when we introduce agents, well, yet again this looks differently because it's just cloud code talking with, I'm just going to say agent one, and then if you chain them together, it can be agent one doing its work and talking to agent two. And to keep this simple, then you would get the result. Now, to be clear, even the agent works with itself and uses this cloth code engine to kind of go through things and work through them. Doesn't just give you the results straight away. But this is really cool because if you, for example, set up a researcher agent and you give it an MCP that can browse the web well, then the research agent can go out and find different pieces of information and create a report for you that it then hands over to the second agent, which might be a block writing agent. And then the block writing agent does one thing, it writes the blog for you, which you then get as a result. And it's beautiful. You can change this together. In ChatGPT, you would have to do multiple steps, right? You run a deep research and then you run a block writing prompt, and then maybe you follow up and refine that. You can have all that baked into your prompt writing agent with some criteria for a good outcome. And it will kind of re prompt itself and keep working on itself until it gets to a desired result as you specified it in the prompt. Now, this is great, but there's one more scenario possible here, and it's also the most exciting one because you can kind of start seeing the potential of this versus an assistant like ChatGPT. Because what you can do is, let's say you have these two agents, right? You have agent one, which is the research agent, and then you have agent two, which is the writing agent. And this is kind of the first workflow that I showed you here, right? But what you can also do is you can just spawn free research agents, like so, and then all three of them give their reports to the writing agent as context to consider, and that agent will produce the result. So it's not Just that you can chain these agents together, you can also run them in parallel. And that's where it gets incredible. Because once you get one of them working in a way that is productive to you, you can say now spawn five and then hand all of that work to agent number two to finish up the task. Or you can create an entire chain with actually more than two or three. Three steps, right? You can see how many possibilities you have here. And as I said that both of our tasks finished up here. On the one hand, my documentation agent in this other project finished writing the documentation, including the systems that I implemented today. So that is really great. But this one will close out for now. I just quickly wanted to show you the agents feature. But the most exciting part is the project that we're building, this GNOME machine is really shaping up as you can see. It told us, okay, we completed almost all of these tasks right here. No machine is now successfully built and ready for deployment. Okay, so here it catches me up what we've accomplished. Created a next JS web application with the following features. This is the things we talked about. Perfect technical implementation. This is the stack it planned for. Perfect. This is the project structure it outlined the plan also. Great. And then here next steps. And this is how you use it. It communicates with you just like ChatGPT, but it tells you, hey bro, I did everything I could. These are the next steps we need to do to complete the setup. You will need to. That's me. Create a Zappabase project at zappabase.com Set up the database schema provided in Claude MD, get API keys for anthropic and file AI and configure environment variables in EMV Local Deploy to vercel. So let me explain this to you if you've never encountered this before. So zappabase, as I mentioned earlier, is a site that creates and manages databases. So on there we'll be creating a database. And the way these production ready databases work is usually they're in a language that is called SQL. And essentially the way it works is that Claude will write up these files that you just need to copy and paste into a specific point on zappabase.com if you just copy paste and then you hit the green button, it will do all the actions for you and you're set. Sounds easy. It also is easy, but you do have to take these steps manually. So let's do this by opening up zappabase right here and going to my dashboard. I'll go into my pre existing existing organization and at this point, let me just review this. Create a subabase project@subabase.com, so I'm on subabase.com and you can see this new project button here. In case that is not clear or maybe you're not sure how to do something, you could say, okay, explain step one in detail and then it will really give you a click by click navigation. And as you'll see in a second here, you could even give it screenshots like this on Mac I'm clicking Command Shift 4 to drag this and then I could go in here and say Control V and it will paste this image in here and I can say the green new project button and I can talk to this as if I would talk to ChatGPT, right? It told me what to do. Now I'm coming back with my feedback and in a second it's going to look at the image and it should tell me, yeah, it can see where I'm at and new project button is on the top left. Perfect. So as you can see, you can really use it to guide you through everything step by step, even if you're not familiar. So let's do this. Let's click click new project and okay, I'm at a point where I only have two projects live and I use Supabase and two projects on this account. I'll just quickly upgrade so we can keep going. But yeah, as I said on a free plan you can have two live apps. So back to projects going to say new project. Going to call this the no machine one. Best practice is to never use spaces. I mean you can but if you can avoid it with anything development related, you're going to prevent things from breaking here and there. It's just a good best practice. I'm going to pick a server that is is close to me. I think Western Europe Paris sounds good. I'm just going to give it a password and create a new project. Say understand here and then here's the stuff that I'll be needing in the next steps. The project API keys and more. So let's go back to cloud code, see what it wants. Okay, choose a project name, set a database password. Done, done. Select a region. Done. Pricing plan free tier should be perfect for getting started. Okay. Also sorted after the project is created you'll get yournextsubabase URL and the anon key. Okay. And these files you will need to add to your project. And in case you're not familiar with this locally, you want to manage these in a so called env file. Now, this file is hidden by default, and on a Mac you want to hit command shift dot to show hidden files. So here it is env local. And then also up here you can see a cloud folder that is hidden. If you create local agents, they will be placed in here. Anyway, right now we're working with the env local file. I'll say open with text, edit, and right here I will copy in the data. So what I need is the next public subabase URL and the next public subabase anon key and the subabase service role key. Okay, let's see if we can get those from this site. So if you're in the project, what you want to do is go here to the project settings on the left side, and then here you can find API keys. Now this can be confusing sometimes because they had old API keys and now they have new API keys. So what I'm just going to do is give a screenshot of this to Claude code and ask which one of these do I set as? And then I'm going to give it all the free keys that it wants here in my file and then I'll wait for the answer. While I do that, I want to show you one little tip on a Mac, and that is something a friend of mine showed to me recently. And that is if you hit Command Shift 5, you can change the settings of how these screenshots are made. And usually what you want is go to Options and then save to Clipboard instead of the desktop or the documents folder. Because then it doesn't just create new files every time you take a screenshot. And you can kind of just take screenshots and then paste them in. This also works with ChatGPT, Claude Code, any other app. Just a really good little tip to make it a bit more efficient and get through a process like this. Setting up the database. So let's see, what did it say? The anom public key is shown in the first section. So I copy the anon key and then next public server base anon key, I paste paste it in here with command V. Then the supabase service role key is the one we need to reveal. So I'm going to click reveal right here. Say copy and paste that one in here under service role key and we're missing one. Right? The next public subabase URL, you'll need to go back to the main project setting to get your project URL. Look for something like your project ID sapabase co. Go to Project Settings and general in the left sidebar. Okay, so let's go to Project Settings in general. Look for project URL or reference id. Okay, so project id, it's this right here. Right. So I'm going to copy this, and this is my subabase URL. Ah, it actually wants the URL, not just the id. So I only have this project id. I could insert it into here, but again, if I'm not sure, I'm just going to tell it. What I'm not sure about here is the project id, but the URL looks different. I'll say project ID colon and then paste it. And then I always separate things with comma. That's the simplest way here. My project URL looks like this up here. So I'll give it that project URL and then I'll paste it in here. Let's see what it has to say. Ah, and now it's proactively actually fixing the file for me. Okay, so it's changing it from just ID to. Yeah, the format it told me about. Okay, so if I close this file again and reopen it, I guess Claude made the changes for me now. Yeah, there you go. So see, this is how you kind of do things that you have no idea how to do. Claude can assist you and do it for you, and it will many times. So there's a few more things here, and it tells you, perfect. Now your subabase configuration is correct. Next step to complete, you need these two API keys and you need to set up the database schema. So let's first do the database schema. And this is simply explained. Honestly, you don't need to understand this. You just have to know that these SQL databases, they're set up by running what's called SQL schema. And the good thing is Claude Code will write these for you. So it'll tell you we'll need to go to the SQL editor in your subabase dashboard and run the schema. So what I'll do is I'll just copy this schema right here. Copy. And then in my application I will go into the SQL editor right here on the left. And here I will paste. And as this is pasted, I will hit run. And that's it. That's our entire database setup. If you're curious, you can go over here to the table editor and see the databases that it created. Right here we have favorites and we have different boundaries. And then that's a database setup for now. So if there's any troubles, we'll return to this and we can run new schemas, but it's all connected. We can close this env file unless there's two more things that we want here, but these are not database related anymore. So this completes the database setup for now. It also wants the two API keys. So we want the anthropic API key and the file API key. So in the case of anthropic you need to go to the anthropic console and you need some dollars on your account. And here I can create a new key set default and say no machine add a new key, copy this key, paste it right after where it says anthropic API key. And then I need a file API key which is really simple. When you have account on file and you load some money into it here you just go to the API keys tab and you can easily create a brand new one which I'll call no machine. Here I can copy the key and over here I'll paste it right after file apikey equals. Okay, if I save over this file and close it out. We're all set up with the different AI connections and database connections. And the good news is you set this up once, it just works. Your app has access to these things now. So I'll say all done and let's see what is next. I'm a little impatient here, so I'm going to go up and see what it wanted from me before. And it says, yeah, it's actually ready to run the application once we have this. So it says, excellent, you're all set up. Let's test the no machine application now. So it's starting a development server here and you can see that down here. This is also a new feature they added recently. It can run these processes in the background like a development server that's just running. So you don't have to go to the online version right away. You can kind of just check it out locally and make quick changes and update it. And then next up we'll also be getting this whole thing live. But first we need it to work locally. Okay, so it's running. I can go to this URL localhost3003 and let's see how this actually does. Okay, that looks good. There's a login and a sign up. Let's see. So I'll fill this out with a burner email of mine. Oh, the color is not great on here. This is all stuff we can adjust in a second. Create an email and a password check email to continue sign in process. So my guess is this will not work because we didn't connect it to any email service. So I can just copy this and tell it like, okay, it tells me to check email to continue sign in process, but there is no email. And then sometimes you run into things like this. It's like, okay, it overfought the app. It made it really complex. It forgot to implement the whole email sending thing. And it will fix that now. And as we do that, you might notice here in the bottom right corner, right here, context left until autocomplete 4%. So it's running out of its 200,000 tokens of context here. And as it hits that context window, it will run this compact function that will compress the entire conversation into a very short file that it will pass to a new conversation in the interface. It will look fluent, but really you'll be losing most of the detail of what is happening. So that is one thing to watch out for, especially if you're in the middle of some big change. Sometimes running out of context can be disruptive because it loses all the details of what you were doing. It just passes the summary to the new one. Just something to be aware of. So it tells me, okay, this is common with a supper base. It requires email confirmation. Let's disable this for development so you can test the app immediately. Go to authentication authentication settings and disable this and hold up, wait, that means I should have. Actually, yeah, I received the email. Okay, so this is completely my bad. I was using a different off service on my other app and I didn't even realize. Yeah, so if you set up zappabase, it's going to send these emails, so I can kind of just confirm and it should work. My bad. So there you go. I just wanted to show you the legitimate process of how I work with this. So, yeah, includes little hiccups like that too. Let's see. This just keeps loading and I see the issue here. So it's redirecting me to localhost3000, but the server it's running on is 3003. So let's just see. This might just work, actually, at this point. Let's see. Igor pfilmail.com Password that I typed in login and it worked. So, yeah, we're logged in. The authentication worked, the email confirmation worked. Now, obviously this text is not optimal. I can barely see this. We'll repair this in a second here, but we can kind of give it a first shot. No, see if this works. So what's the scenario here? Invitation to our birthday party. Generate boundaries and let's see, do our AI features work? No, they don't fail to generate boundaries. Please try again. Okay, and this is where we get into fixing things. So let's talk about how to fix things like this and how to improve. What you want to do is you want to give it the error message and tell it when I share boundary, I get and then quotation marks the error message. And then what also really helps is if you say console and then you copy the console into this. So this is something you need to learn if you are going to work with cloud code in Google Chrome. Here you can right click, say inspect. And then up here you want to tab over to console. And then this is basically what the web app has been doing. And this console shows any errors and stuff. And this is really helpful to improve on what it is doing. So what you want to do here is click anywhere in the text and just right click and say copy console. And we're just going to paste that entire console log into here. Now, to be clear, there's also MCPS to kind of automate this. But again, we're building our first thing, we're getting things done. And then further down the line as you learn more, you can automate things like copying the console over. So I just sent that message and now it's just a matter of patience for it to fix the issue. Sometimes it takes three, four, five different iterations of this and it just doesn't work. Doesn't work, doesn't work. But we'll make it work anyway. And in the resource that I included with this, I also included an extra prompt to really find solutions that might not be obvious at first because sometimes you get stuck. Sometimes you try this process 10 times in a row and you still can't fix it. In that case, I included a special extra prompt that does this. Now, to be clear, I got this somewhere off Twitter like a year ago. But it has been a blessing because it just shows you multiple avenues to finding a solution. So again, that's included in the little cheat sheet I prepared to accompany this video. And right there it tells me, okay, the main issue is inside insufficient credits on your anthropic API account. Aha. Is that true though? If I look at my anthropic API account billing, I see there's $100 of balance. Okay, so I'll just tell it, actually, there is $100 in the account. Meanwhile, I will test out this new version of the app and just say, invitation to a birthday party. Barely visible, but I'll just generate boundaries again. Maybe a little refresh so it updates for the new code. Failed to generate boundaries. Please try again. Okay, let's have a look. What's the issue here? So the error from the console was saying it's an invalid request error. Your credit balance is too low to access the Anthropic API. It's giving me some tips on how I can verify if this is the right key. So, API keys. Yeah, I'm in the right organization. Okay. I would say let's just try again. So I'm gonna refresh the page, describe the boundary scenario, invitation to birthday party, and generate boundaries. Let's see. Okay, so I have a suspicion here, because there's money there. This might not be an issue with my credit, but with the way it implemented the API. So I'm just going to say this. Use context 7 to verify the Enfrawpic API implementation. And this way you can also prompt MCP servers. You don't need agents with the MCP servers to use them. You'll see that it'll engage it right here because we have it installed. You can already see it pulled in 2000 lines of anthropic documentation, and the implementation looks correct. So that. That's good. And as you can see right here, it ran out of context. So it's going to compact the entire conversation and kind of start a new one with a summary of everything we did. In this case, it's fine. We're not in the middle of something big. So I'm really confused by why this doesn't work. This should kind of just work. So give me a minute here to figure out what's wrong, and I'll be back in a second. Okay, so now, after giving it a screenshot of this page and this page, I asked it, hey, I'm doing what you tell me. And it's still not working. It figured out on its own that it was actually using some old key that it had caged in the browser. I didn't even know where that old key came from. But my point is, with these two screenshots, it managed to hopefully fix it. And now our application should be working because it also tested the API and it works now, apparently. Let's see. Invitation to a birthday party, generate boundaries. Failed to generate boundaries. Okay, maybe I need to refresh. One more try. Failed to generate. Okay, so again, inspector, open the console. I'll copy the console and say, still doesn't work. And honestly, this is the reality of the process. But the good news is, all of this stuff is figureoutable and I haven't arrived at a problem yet that I wasn't able to solve. And also take this little scenario as a piece of advice to not over engineer your apps from the beginning. Rather create the simplest version possible, make sure that that works reliably, and then add on top of the it. That's a really good piece of advice, by the way. And again, always make sure to use the plan mode when you do that or when you add big features. Ah, so Claude code is telling me here that, hey, the server is still using the old API key. The environment shows it's loading, but somehow it's not picking up the new key. Let me check if there's a issue. Okay, do your thing. Cloud code, just fix it. But as you can see with the info from the console, it usually is able to figure this out quite well. When in doubt, add screenshots. Okay, so now it took the app offline on this port 3003 and it ran a new server on the port 3000. So that essentially mean it's the same URL but just 3000 instead of 3003. And then I get an error here. I can just copy this error and paste it in here and hit Enter and it will fix that too. And yeah, this is the reality of fixing bugs. I mean, we're building a custom application with multiple AI integrations all in one shot. Might just take a few of these little bug fixing rotations. Remember, the process is always similar. It's cloud code does something, so it creates a page, but then something might not work. So what you want to do is you want to take a screenshot. I'll try to draw a camera here. That's the flash. How'd that do? Does that look like a camera? Fair enough. And you also want to add what's in the console and feed that back into cloud code, which will then improve the app and the cycle continues. So it fixed it right here. So let's have a look. The no machine had a new look there for a second, but there's another error. So I'm going to just, just copy that and paste it back in. What's going on here? Claude, make this work so we can get to the fun part here, which is some final notes on MCPS and actually getting this live on the web right now it's populating and if we refresh. Voila. It just fixed it. I'm not even sure how, but that's okay. So the no machine. Okay, we can start getting boundaries right here. I need to sign in again. Fair enough. Okay, we definitely have to fix this text in a second here, but there it is. So, a birthday invitation. Generate boundaries. Oh, it's loading this time. Come on, you know you want it. Yes, that's it right there. Okay, so, okay, we have a soft. No, Clear. No, the wall. And it made four variations of the wall. Okay, that's unexpected. And then we can generate these images. Yes. Apparently it successfully picked out the part of the prompt that generates the images too. So let's see. So the first one is the soft. No. Thank you so much for thinking of me. Unfortunately, I won't be able to make it this time. I hope you. You have an amazing celebration. Now let's generate the image along with that. Oh, and it errored out. That's okay, though. We really got far here. And we have the error here in the console. So we kind of just copy that and tell cloud code. Okay, that worked, but the image generation failed. Console. When I paste the console. Meanwhile, I want to try this again, though. This is kind of fun. And I can think about how I want to improve this already. So one thing definitely is that I wanted this text to be easily readable, but then I really like how it splits it out. I really don't need six responses. I only kind of need three right here as I have the images. So I can prompt it to remove these three and then the reformed doormat note. Okay, remember, your time and energy are precious. Saying notes. One invitation doesn't make you a bad friend. It makes you a good friend to yourself. Your mental health is worth more than any awkward social moment. Okay, that's good advice right there. Okay, cloth code finished up. Okay, so now it should work. Let's refresh the page. Birthday invitation. Generate boundaries. Okay, let's generate the first image. So that would be. Thank you so much for thinking of me. Unfortunately, I won't be able to make it. And then the visual concept is a birthday cake with tiny white flags sticking out. Laundry work. Netflix calling. Oh, that's actually so cute. That's a great image to send along with that message. No. Okay, let's look at the hard boundary. The wall. Thanks for the invite, but I'll be passing on this one. Ooh, that's a bit harsh. Well, fair enough. I mean, that's the wall. What is the image like for this one? Do not disturb. I think that's kind of good, honestly. I really like how these came out. So now it's about refining it. So let's do the two main Things here. And also it has a save function. Interesting. Kind of safe. Okay. Can also review my history. That's nice. Okay, but let me share what's wrong. So, like, first of all, the text when I type is barely visible. And if you do visual things, I would recommend just including screenshots. So I'll just screenshot this and then paste it in here and then let it work. So it will figure that out and probably increase the contrast by changing the font color here. It sees that it's barely visible. Let me fix the color. It's writing some code and this will be done in a second. And then meanwhile, I can prepare my next message. It generates a total of six boundaries, whereas I just did need free. And then in brackets, you can always add extra context. This is just a classic prompt engineering trick, but it helps. So if you want to make it more specific, you could say the last free red boundaries can be removed. So. Perfect. I just finished typing that as it finished the first change and I'm going to just refresh and see how it works now. Ah, text looks great. That works very well for me. Let's see if it only shows free cards as we're hoping for here. Drum roll. Yeah. Ah, close. Okay, so it still has four. I'll just give it a screenshot and tell it there are four. Remove the last red one. The wall hit enter again, but it's getting closer already. And then this remains functional. And at the bottom. Let's see. Let's do maybe the middle one this time. While we wait. The clear. No. I appreciate the invitation, but I won't be able to attend. I hope you have a wonderful birthday. It's a good balance. A calendar with the birthday date circled dramatically in red with a tiny stick figure running away screaming. Nope. Okay, fair enough. There's one kind of makes me want to do one more while cloth code is jazzercising, no entry. These are really good. I like these visual concepts from the model. And as you can see, it implemented everything successfully. Like, it's making images with the file API, it's generating these ideas with the anthropic API. It's storing everything in our database. If I go over to our subabbase, if I go to boundaries. Yeah, you can see these different birthday invitation boundaries being generated. Here you have them all the soft responses, medium responses, firm responses. It's parsing it out correctly. It understood what we want to do. They're all stored in here, including the reformed doormat notes. Okay. And all of that is happening because Claude code Set it up successfully. So this is great. Final test. Wedding invitation. There it is. Free boundaries, ready to be copied like so we can generate the images in here. This is really everything I wanted from the app. Remember the original concept? I didn't even give it this image, but it's exactly like that. 1, 2, 3. 1, 2, 3. Thank you so much for thinking of me. Unfortunately, I won't be able to make it to the wedding. I'm sending all my love and best wishes to you both. And then this image with that. That's kind of good. That's not bad. Let's do one more to just verify all of this works. I appreciate the invitation, but I won't be able to attend the wedding. Thank you for including me in your celebration. Boundary Ninja. Okay, I don't love that part. Maybe I could tweak the prompt and make sure it doesn't include the words boundary in the images. But I'm pretty happy with this as is. Next up, I could work on the save function and the way I would do that is well, I would explore my app. The history seems to work well, but the save button doesn't seem to work. So I'll just tell it and then I go through the same process as before. But at this point I won't bore you with further refinements and adding features. I think you see the point. If we want to add a brand new functionality to the app that is rather large, I would again switch to the plan mode, refine the plan until I'm happy, and then implement that. Additionally, I also want to highlight that the Claude MD file has been updated in the process. And we have project details on the GNOME machine right here. So it's always using that in the context. And if you want to make architectural changes to the whole thing, you could just go in here and then Claude will respect that in every message it sends afterwards. Okay, but now, at this point, while it's implementing this figure to the save function, we really want to do one more thing, and that is get this onto the Internet. So how do we do that? Well, the easiest way that almost everybody is using that Vibe codes is the following. They use their own GitHub to store the code. You can think of this as an online hard drive for all your code and then they link it up to Vercel that for every new deployment on GitHub it deploys a new version of the site that is then accessible via URL. So in order for this to work for us, we need to get our code on GitHub now, there's many ways to do that and a billion tutorials on the web, but the most basic one would be just going to the GitHub to your repository, saying new, and then naming this and saying, okay, this is the no machine, and then I'll make this one public. You can access the code in the description below in case you like my app here and you want to extend it from the point where it is right now, make it your own. You'll just have to change the different keys in the env file as I showed you. But like this, I created a brand new repository. And then practically what you want to do is, and what I recommended in a setup section is you want to install the GitHub CLI again, like, I'm not going to go through all of the setup step by step because that would just make this video unbearably massive. But installing the CLI is pretty straightforward. And again, you can consult ChatGPT in order to help you with that. But the magical thing that it allows you to do is that from within here, sure, the interface might not be the prettiest thing in the world, but it's so damn functional because all of these developer tools are just right here. They're right in there. So, for example, with the GitHub CLI already installed on my machine, now that it implemented a fix for the save button, which I'll just briefly test before we put this live, I'll say, my boss has a wedding, click Generate boundaries, and then let's just see if that works. And then let's get this live onto the Internet. Let's see, it's saving boundaries saved to your history. Okay, I guess that does something. Let's just get this online. What I can do now, because I created the repository, I can just say add this project to my GitHub repository repository and then I share the URL. Now, just to be clear, you could also create the repository from within here. I just kind of showed you on the website, so it makes more sense. But you could equally say, create a new repository for this project on my GitHub. But you do need the GitHub CLI for this. Otherwise you'll just have to take these files and every other way that you can do this is just so much more complicated and cumbersome. And you'll be doing this all the time. Whenever you add new features, add new bug fixes, whatever, you always want to add it to your GitHub, because then with Vercel, it's just looking at your GitHub. And every time you add a new version of the app, it just hosts a new version of the app for you on the Internet. And then that whole process becomes super simple. So you get both the versioning with GitHub, so every time you add new changes, it creates something that it calls a commit, which is essentially a new checkpoint. And if something breaks with the code or you make changes with cloud code and something stops working, you know you have every previous version on GitHub and you can just easily return. So that's why GitHub is absolutely essential in this workflow. And then if you link it to Vercel, you automatically will have a live website, as you'll see. So I'll just confirm this a few times, say yes and yeah, looks like it's finishing up the process. And then we should see all our files appear in our GitHub here in a second. If we just refresh the GNOME machine repository again, these steps could be done differently. You could be using the GitHub desktop app, but just do this from the get go. It just works so well because every time you, you have a new version, you just say push and commit to git and it writes these beautiful commit messages where it tells you what it changed. So yeah, that's it. I just confirm this and now it's adding it to GitHub again, just for your reference, whenever you change something, you'll just say push and commit to git. After this is set up once, you'll just be saying push and commit to git, or I guess you could just say commit to git and then it's going to add the new version of your code that you worked on with plot code to your GitHub as it did right here. So yeah, if I head over and refresh, I, I should see all the code up here. Here. Beautiful. The entire app is in here with very detailed instructions on what it does written by AI and the whole app in here. So this is wonderful. Now it's stored on my GitHub and in case you wonder where those versions are, well, you go to these commits here and you will see a commit history here. And then you can take this commit number right here and just in cloud code you could say, okay, revert to this version and it will go back to that version, discarding all the changes you made after that. That can and probably will be a lifesaver for you at some point. It is for everyone, trust me. Okay, so now that we have the code on GitHub successfully one last step, and that is hooking that up to our Vercel one time so that every time there's a new commit, a new version of the site gets actually hosted on the Internet. Because in GitHub we just store it. It's not a live website that you could now access. So in Vercel I'm just going to go into my account and set add new project and then here import git repository. As I logged into Vercel I immediately connected it to my GitHub account and now it lets me do this. I can pick my git repository and we're looking for the GNOME machine. Oh, there you go. It's at the top. I can kind of just hit import and I believe all the default settings should be fine right here. I'll just say deploy and that's how simple it is. I can already tell you we'll be needing to do one more thing which is on Vercel we also need to transfer these environment variables. Remember the env file where we were adding the anthropic API key file API key key the database connections, we'll also have to put them in here in a sec, but let's let this deploy first and then we'll copy these files over. So in our finder command shift dot to expose the hidden files, I'm going to open my env local file and after this is done deploying, we can add these keys to Vercel. Wonderful. So this is deployed, continue to the dashboard and then in this project, the way you set up these environment variables, again, this is a one time thing. You go to settings and then in here it says environment variables and I'll just add exactly the ones that I have in my env file. So next public subabase URL is the key and then the value is what comes after the equal sign. Just be careful that I copy this correctly, that I get every sign. Or alternatively, what is even easier, you can just import the env file, I just drag it onto here like so and import all of this and it will automatically bring in all the environment variables like so. And I can just say save and there they are. So now my Vercel is set up with the environment variables and we can look at our deployment and see if this thing actually works. So if I go to overview here, it shows a preview of the site. This is the main URL for the app NoMachine Vercel app. And then we get some sort of error. So now this gives us a chance to do a final Troubleshooting run in CLAUDE code to push it to GitHub to for it to show up on the Internet. So we're getting this error. Now what do we do? As per usual, we pull up cloud code and I'll say what I did deployed through Vercel. Now I get. And then I'm just going to copy this error and also as per usual, just get used to doing this every time I could copy the console logs. Okay, there's no console log, so we'll keep it as is. And it says this is a common Vercel deployment issue with middleware. Let me help you fix this. And then it does its thing. Okay, it's saying that's likely because it doesn't have the environment variables, but we actually already did that. So let's check again. Environment variables, that should be all good. Okay. And it automatically decided to commit to Git. You could always see that right here and by this little generator with CLAUDE comment under the commit. So I'll just say yes. So it's Higggler the Pigleting right now. I love these sometimes. And then it goes straight from my app into GitHub and then that will automatically start a new deployment here on Vercel. So in case it doesn't start a new deployment, you can always go to the settings of the project here, go to Git, and then this should be enabled. So if it's linked in here, then every new commit will launch a new deployment in here. Ah. And you can see it appear just here. It's going to build the site, which will take a few seconds and then we can check out a new version of it. While it does that, we can Also double check GitHub just for your understanding, because right here you will see we already have free commits. See, this is the new one one minute ago. And yeah, as I said, every time this appears, it will just push it to Vercel. Excellent stuff right there. It finished up and we can kind of preview our app just by clicking the preview. And you'll see there's always two links. There's this one right here, which is just this version of the app. And then there's kind of a main one that you can share around. And also for your understanding, the main one will always go to the production app that is the current version. And then this concrete link will change every time. So if you want to share it with a friend or colleague, you just share this one. And then the newest version is always going to update to that. And if you just want the one to the current version, then you would share this link. Okay. Doesn't matter. In this case, it's the same. I'm going to use my login from before. I still didn't change the text right here, but I think at this point you understand how you do that. And then I'm just going to log in. That works. My boss has Wedding generate boundaries. Let's see if this works. This is the live application right on the web that you could access access tool. It worked. Okay, perfect. Thank you so much for thinking of me. I won't be able to make it. Let's test the image generation on this one. This one, this one. I guess that kind of works. Yeah, there you go. Free images, boundaries right here. Boundary saved to history. I mean, I guess that kind of works. It saves everything to history. But I could further refine that. But there you go. That's the entire application live on the Internet. We did it. I think that with the knowledge that I gave you here, you're really able to build a ton. And I want to round this out with kind of next steps and what to think about next. Okay, so first of all, if you want to redo this again, check out the first link in the description with my little cheat sheet with all the prompts and resources and some agents that I use and mcps that I would recommend. And as we kind of completed the whole process here and hit the entire checklist that I promised you in the beginning. From talking you through the setup, introducing you to agents, talking about mcps, going through the whole debugging cycle, and making sure you have a database integrated and everything hosted on the web. There's really two items that I want to touch on in the end that I didn't go really deep into because they're a bit more intermediate. I would say those are agents and MCPs. So I briefly showed you how to install McP with the context 7McP. Installing MCPs is super straightforward. It always looks like that. And we talked about agents extensively in theory, but then here in practice, I actually want to put them to work. So I'm going to pull up cloth code one more time here and I'm going to say slash agents here. And let's see what we have here. So we have one user agent, which is a flux image generator agent, the general one. And just for the purpose of this demo, we're going to create one in this project. So we went for the setup previously. So I don't need to explain everything. We're just going to say Generate with Claude right here. We want the agent that is a QA tester, which is essentially a quality tester for apps in the development industry. A QA tester that tries to break my app application, and I'll hit Enter. And then, as I've seen my cheat sheet, one of the free MCP servers that I would recommend you begin with is one that is called Playwright. And I could, and I might create an entire video just on this, but this is such a powerful MCP server, it's kind of the go to for browser remote control. And it does literally that. So if you scroll down here on the GitHub, you can go to plot code, and this one line will install that MCP in my folder. So my sub agent is set up. I'll just, just give it all the mcps for now. It's okay. The QA tester can use Sonnet, that's fine. We'll give it a green color. And that's it. That's my agent right there. I'll hit Enter. So when I escape out of this, now I have some basic agent that Claude generated. I will also run this cloud mcp, add Playwright, and that will add the MCP server to my Claude. And here's the interesting thing. Okay, so there's a ton of MCP servers, and most of them are not worth your attention. But in my little cheat sheet, I included the three of them that I use all the time and that I also recommend Playwright being one of them. And the amazing thing about this is it allows Claude code to use the MCP to open up a new tab with your app and then actually use that app. And if something breaks, it knows about it right away. So it can kind of try different things. And if something doesn't work out, the QA tester agent gets all the console logs from that and can deliver a report to Claude code on what doesn't work so that Claude can fix it. And as I added that, it's already telling me, okay, since you added a QA breaker agent and added Playwrights, these are great tools for testing your no Machine app. Let's see if this is available right away. I'm actually not sure if I say MCP now. It's not available yet. Right. You only see the context 7 server that we installed earlier. So I'm just going to close out and open up new version of Claude code. And now the MCP should be active. So if I say slash mcp, still not active. So I'll run the command once more, and I think I need to restart Claude to see that there it is. Playwright. Perfect. So now I can say slash agents. And if I go to my agents, I don't see my QA tester, so I guess I'll just have to recreate them. That's okay. QA tester agent that tries to break my app, it will write instructions that will most likely be fine here. And then I just want to make sure it has access to the playwright mcp. So here, if I go to Advanced, it will show me the full list of all the tools. Again, you don't need to know all of this. Just here under MCP service, maybe I can switch off the context 7 MCP server, because it really does not need that. And then I go up and say, continue. For a QA tester, I think Sonnet will be completely fine. Okay, hit enter. So now I have the agent right here, the QA breaker. Beautiful. So if I go on him, I can say edit agent, open an editor, and then here's the entire agent that was created. And here's the final tip that I wanted to share. Like, if you go in here, this first part, as I mentioned earlier, is for other agents to pick when to activate this one. So this we don't need to edit, but down here we have the system prompt. And if we want this agent to always use playwright, then we should alter this. You're an elite QA engineer and penetration tester specializing in breaking web applications. Your mission is to think like both a malicious user and an edge case explorer. Here we can say proactively using playwright to uncover hidden bugs. So this wording is actually recommended by Anthropic. If you say proactively using and then the name of an MCP server, you're going to see this agent using that MCP server all the time, if not always. And that's one change you can make. And another one in other agents that is super useful. Not for this one, is you could kind of just add a new title in markdown and say something like extra context. And then if you want to give it some specific documentation, you could just paste it in here. You could just throw any extra context that the agent should have down here. So in this case, I don't need that. But this is just an extra tip for building agents. One of the most useful things, you can just take an entire documentation and just paste it into the agent that you know he knows about everything, doesn't need to use Contact 7. He just knows. So if I save and close out of this, then that's it. Then we have our little QA breaker agent. And now you can do a few things. As I showed you before in the drawing, you could tell it fix XYZ and then use the QA breaker agent to test it. And it will first do the fix with Claude and then use the QA breaker agent. Or you could do something like this. Use free QA breaker agents to test the app. Now, I think concretely, with testing the app, this doesn't make the most sense in the world. This is not something I've actually done before. It might make sense in theory. I mean, with a lot of these things, you just have to try and you'll see if it works for you. But as you can see, it's spawning three different agents simultaneously right now that will all be using Playwright to test my application. Now, honestly, I don't even know if I can be using three copies of Playwright at the same time. Probably, but this is where experimentation opens up. You could give API access to these agents, right? You could have an image generation agent, you could have a video generation agent, you could have a whole dev team. You could have a marketing manager, a creative director, then a bunch of agents who have specific APIs to generate images and generate copy. And then you have one agent that has MCP that connects to your own database so it can post blogs for you. And then you can unleash your entire marketing studio by letting them collaborate. I mean, people are experimenting with this stuff, okay? They're turning the prompts they have in chatgpt into these agents, letting them collaborate, letting them build things, do things. People are not just using this for development, but I think by learning the development basics, you'll understand how these things work together, how cloud code works. And yeah, now you can see these agents just like opening up browsers and asking for permissions of, hey, can I take snapshots of the current page, etc. And I have to confirm that multiple times because I have three agents running, so I have to hit enter like six times, okay? And now it's doing its thing. It's signing up with a test email address, etc. I think you see the point. So now we really covered all of it. Set up agents, MCPs, debugging using databases, putting it on the web again. Don't forget to get your little cheat sheet with all the notes from this lecture and my MCP and agent recommendations in there. But that right there was quite the process, and you made it all the way through. We might have never met, but I'm Actually kind of proud of you because I know how much it takes to sit for a long video like this. But as I say, always with all of these AI tools and skills, they stack. Whatever you learned in ChatGPT will apply to editing the agent prompts in here. Whatever you learned in automation, well, you can connect all the automations up to either agents or you can trigger them within your applications. If you follow the weekly show on the channel, AI news you can use while we talk about new apps and APIs and models and all the time, those can inspire you in order to use your prompting skills and vibe coding skills to spawn new agents and use them in parallel, just like I am right here. All of this stacks and creates a smoother transition into a new technological era. For that, most people won't be prepared, but you being here at the end of this video gives me confidence in the fact that you'll be able to adjust to whatever is coming. Because 99.99% of the people don't have the patience and the curiosity to be exploring new skills like this. So with that being said, I hope this was helpful if you're looking to hang out with other people who do this type of stuff. That's literally why we built AI Advantage Community. We have extra spaces for Vibe coding. People are sharing the apps they're building. You could get personalized support from my team on this process. And just a few days ago, I ran an event where I showed two new workflows, both involving agents and the custom app that I built. But all of that kind of builds on what you just consumed here. So make sure you're solid on this, this, and if you want to go further, the advantage community is there for you. And with that being said, that's literally all I have right now. Go and build something and you might just realize how creative, fun and addictive it can be. Have a wonderful day. That's literally why we built AI Advantage Community. We have extra spaces for Vibe coding. People are sharing the apps they're building. You could get personalized support.