How To Build Anything With No Coding Knowledge

So today I have the pleasure of teaching you everything I know about claw 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 from 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 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 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 Versell, but also functional by showing you how to fix issues when they arise 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 completely changed my life. And now I see it all around me like people don't have the ability to kind of assert themsel 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 a image generation API to generate respective images for you. and it's behind a payw wall 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 toz. Okay, so let's get into building what we'll call the no machine. Yeah, I actually kind of like that word. But in order for us to build the no machine, we actually have to get set up 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 a weekly basis for free. 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 a channel which helps you get set up with cloth 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 cloth 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 it includes some examples too. So in just a few minutes you'll be ready to go with clot 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 clot code installed on your computer. You will need an enthropic account for the API key from Enropic. You will need a file. ai account for the image generation API key. From there you will need a Verscella 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 a 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 clot code. About the cost of these, GitHub and GitHub CLI are completely free. Both supper and Verscell are going to be more than sufficient on the free plan. I mean, I've been literally running our website

on the free Versell plan for a few months and I didn't even hit the limits. So, that is free for both Enthropic and the Fala 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 clot code is free, but the most efficient way to use it is on the paid entropic plans. I recommend the $20 one 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 5:00 a. m. mornings and just having two free cloud codes open, working on different projects simultaneously. I only recommend upgrading once you start hitting those limits regularly, though. So, start with the $20 one and avoid paying through the API for cla 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 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 Chat GPT or Claude to assist you through the process. So if you're trying to create a Versell 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 chat chip 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 this entire process and set it up with no prior knowledge. We have nontechnical 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 cloud 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 rightclick the no machine. And here on Mac, this is the quickest way to get the clot code. new terminal at folder down here and then you just type clot. As I have it installed already, it will open up clot 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 no machine is created in a brand new folder and clot 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 cuz 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 to 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 /init. And if you say /init in here, it will look at my codebase. And right now it has no information. It has nothing, right? It is just the name of the folder, the no machine. But this will set up the project for success with claude code. And you 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 clot. md 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 cloud 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 free 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 created the cloud MD file. We can kind of have a quick look at this. This file provides guidance to clot 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, clot 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 cloud 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, clot 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 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 no 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 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 we 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 no machine. I want to create a web app that uses the enthropic API to turn a 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 three 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 now I'm just going to name the different models that I plan on using the file. AI AI flux realism API and ropic opus 4. 1 API for the response generation and a sappa basease 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 the 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 cloth code that's not a native feature is this is a 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 cloud code because I just press two buttons and I can dictate just like I would in chatbt 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 text stack front end next. js14 with app router TypeScript tailwind and 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 zero one out and then ask for chippity explain next. js 14 to me like I'm 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. NextJ is like a pro toolkit that makes React easier and more powerful. Okay. And it explains more back to building this thing. So authentication will be with supperase APIs will be enthropic cloud and file AI flux realism. The database will be supperase and will deploy on versel. 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 do you need to

approve the edits or do you want to change something about the plan and 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 may sound complex, but luckily this is the most common problem and there's a fantastic tool that you can activate as a MCP and cloud code 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 7. And I'm just going to hit enter and we're going to see this work. What context 7 is a 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, context 7. 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 Versel, right? And they updated their documentation 6 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 cloud 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 clot code. This is somewhere down here. We'll do this later. Installing clot code. And if you run this line once and restart clot code, this right here, it will add a MCP server that you can then invoke inside of clot 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. Ah, and it says no MCP servers configured. So what I'm going to do is I'm going to just close this conversation with cloud 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 it successfully. So we can just close this terminal and open up clot 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's one that continues your last conversation where it left off. It's /resume. Okay, so I'm going to say /resume and then it's this one from 1 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 nexjs sapper basease typescript tailwind versel and now clot 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. NextJS app browser authentication. Here's a best practice on how to actually do it. This is something it didn't have before. Amazing. Sappa based documentation said this is how authentication is best done today, not a year ago, not two weeks ago, today. Also checked out the entropic integrations and the documentation from Enthropic 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 peopleleaser 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 free 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 claw code. It even has some example image prompts. Amazing. And I'm actually going to copy this entire message and tell claw 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 commandV. 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 agentic 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, 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, my guess would be 5 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 claw 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 clot code basically does in the background, you can think of it as uh agentic system that will spawn a agent 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 chat GPT 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 enterprisegrade 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 20123, 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 chat GPT, but let's use five chat GPS 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 chatb if you're watching this video like probably have account and you've probably been using it for a while. And the way chatb works is well you give chatpt a prompt and chatt 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 Chachi 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 Chachi is not just getting the prompt, but then also they started adding in tools, right? There's the code interpreter. There's the image generation function. Chachidi 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. Then it gives you a response plus a 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 clot code and how does just clot code differ from using custom sub aents in cloud code which I want to explain now. Well the base promise stays the same, right? Just instead of chatt we have cloud 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 chat GPT 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 one so as we talked about the clot 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 northstar of the project in mind, not just the task you're working on. Beyond that, it spawns these different sub aents 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 not just claude code giving you a result. It's claude code talking to claude code 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 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 claw. md and the to-do or more like the plan in that case that it had at that point cuz it had the entire chat history too. But it was also considering the context from the context 7 MCP. And all of a sudden that's a lot of information. 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 5 minutes. Sometimes I had it run for an hour or two with some of the sub agents that we're about to explain next here on its own. You never get a 2-hour waiting time in chat. 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 aent setup. I'm just going to say claude and then as I'm in here, I'm going to say / agents. And as you can see, I have multiple agents in here. So I have a QA software tester, a AIAS backend engineer, I have a versatile deployment fixer, a code reviewer, front-end webdev, 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 Enropic 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 clothd file. Okay. Going to hit enter. It's going to use clots to generate the agent setup file. And there we go. We proceeded to step four 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. Going to deselect this one and this one. Can hide 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 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 Haiku, though. And then I'll give it a color. Uh, 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 overexlaining this, let's just look at the agent who's right here. Devoc updator. 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 devd docs updater markdown file but for our little visualization here let's just write agent because what really happens 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 clot code, what you can now do is not just that you have all of this context that you're communicating to clot 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 clot 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 through the to-do list, but once you're done, I want you to spawn this devdoc updator and use specifically that agent to update all of my documents. So then clot 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 chat GPT 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 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. " 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 cannot just do in chat GPT. 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 resave 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 claw and def 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 cloud 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 back end with the back end engineer then I want you to use the testing agent to test the entire app and then in the end use the devdocs 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 3 hours later you come back and the whole thing happened. Now in practice you might have to confirm a few commands in between but that's how it works. But at this point, I do want to talk about when to use these agents cuz 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 CHP 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 one 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 and 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 fault 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 cuz 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 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 clot 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 MCP. 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 the 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 7 MCP 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 cloth 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 chat 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 chatpt 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 clot code, you get a whole lot more context as we discussed with the cloud MD file and all these extra agent prompts etc. And also the work process is different. That's clot code talking with clot code creating a plan talking with 20 more instances of clot 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 clot 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 clot 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 researcher 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 blog writing agent. And then the blog writing agent does one thing. It writes the blog for you, which you then get as a result. And that's beautiful. You can change this together. In ChachiPD, 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 reprompt 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 chatt 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 three 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 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 no 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 nextjs web application with the following features. This is the things we talked about. Perfect. Technical implementation. This is the stack it plan 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 chatpt. 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 supper. com. Set up the database schema provided in cloud. md. get API keys for entropic and file AI and configure environment variables in env. local deploy to versel. So let me explain this to you if you've never encountered this before. So sepase 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 sapperabase. 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 Sapperabase right here and going to my dashboard. I'll go into my pre-existing organization. And at this point, let me just review this. Create a supperase project at sapperabase. com. So I'm on supper. 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 byclick 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 CtrlV and it will paste this image in here. And I can say the green new project button question mark. And I can talk to this as if I would talk to chatbt. 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 new project. And ah okay, I'm at a point where I only have two projects live and I use supper base 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, gonna 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 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. 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 your next supper 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. Eenv file. Now this file is hidden by default and on a Mac you want to hit commandshift dot to show hidden files. So here it is. 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 thev. 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 supper URL and anon key and the supperase service ro key. Okay, let's see if we can get those from this site. So, if you're on 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 clot 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 commandshift 5, you can change the settings of how these screenshots are made. And usually what you want is go to the options and then save to clipboard instead of the desktop or the documents folder cuz 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 chatbt, cloud code, any other app. Just a really good little tip to make 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 suppon key I paste it in here with command v. Then the supperase service ro 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 ro key. Then we're missing one, right? The next public supper URL. You'll need to go back to the main project setting to get your project URL. Look for something like your project ID. appabase. 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 Sappa base 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. 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 supper 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 uh SQL schema. And the good thing is clot code will write these for you. So it'll tell you we'll need to go to the SQL editor in your subbase 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 set up. 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 the database setup for now. So there's any troubles, we'll return to this and we can run new schemas, but it's all connected. We can close this 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 entropic API key and the file API key. So in the case of entropic you need to go to the empropic console and you need some dollars on your account and here I can create a new key say default and say no machine add a new key copy this key paste it right after where it says enthropic API key and then I need a file API key which is really simple when you have accountant 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 API key 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, localhost 303, 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. Ooh, the color is not great on here. This is all stuff we can adjust in a second. Create a email and a password. Check email to continue signin process. So, my guess is this will not work cuz 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 signin process, but there is no email.

And then sometimes you run into things like this. It's like, okay, it overthought 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 Sappa. It requires email confirmation. Let's disable this for development so you can test the app immediately. Go to 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 supper, 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 localhost 3000, but the server it's running on is 300 free. So, let's just see. This might just work actually at this point. Let's see. eagerpilm@gmail. 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 a 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 rightclick 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. But you'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 insufficient credits on your anthropic API account. Aha. Is that true though? If I look at my enthropic 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. Um, 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 entropic 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 going to refresh the page. Describe the boundary scenario. Invitation to a 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 credits, but with the way it implemented the API. So, I'm just going to say this, use context 7 to verify the enfor 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 2,000 lines of anthropic documentation and the implementation looks correct. So, 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. 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, inspect, 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 figure outable 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 overengineer your apps from the beginning. Rather create the simplest version possible. make sure that works reliably and then add on top of 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 cloud 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 3000 free and it ran a new server on the port 3000. So that essentially mean it's the same URL but just 3000 instead of 3000 free. 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 clot code does something. Say 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 did I 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 clot 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 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 combobulating. 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. Ooh, 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 null, 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 have an amazing celebration. Now, let's generate the image along with that. Oh, and it errored out. That's okay, though. Oh, we really got far here. And we have the error here in the console. So, we kind of just copy that and tell clot code. Okay, that worked, but the image generation failed. Console. Then 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 no to one invitation doesn't make you a bad friend. It makes you a good friends 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. Uh, 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 flag sticking out. Laundry work Netflix calling. Oh, that's actually so cute. That's a great image to send along with that message, you know. 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 mean, 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 save. 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 need three. 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 three 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 jazzer sizing. 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 enthropic API. It's storing everything in our database. If I go over to our supper base, 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. Uh, 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 word 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 no 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 clot will respect that in every message it sends afterwards. Okay, but now at this point while it's implementing this fix to the safe 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 a online hard drive for all your code and then they link it up to Verscell 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 repositories 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 the 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 CHPT 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 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 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 Versell, it's just looking at your GitHub and every time you add a new version of the app, it just hosts 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 Versell, 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 no 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 cuz every time 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. So 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 should see all the code appear 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 clot 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 Verscell one time so that every time there's a new commit, a new version of the site gets actually hosted on the internet cuz in GitHub we just store it. It's not a live website that you could now access. So in Verscell, I'm just going to go into my account and said add new project and then here import Git repository. As I logged into Verscell, 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 nom 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 Verscell. We also need to transfer these environment variables. Remember the env file where we were adding the empropic API key, file API 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, commandshift dot to expose the hidden files. I'm going to open myv. local file. And after this is done deploying, we can add these keys to versel. 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 onetime 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 myv file. So next public supper 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 Verscell 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. No machine. verell. app. And then we get some sort of error. So now this gives us a chance to do a final troubleshooting run in cloud 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 clot code and I'll say what I did. deployed through Verscell. 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 logs so we'll keep it as is. And it says this is a common versell 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. Yeah, 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 higglypiging 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 Verscell. So in case it doesn't start a new deployment, we 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 the 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 minute ago. And yeah, as I said, every time this appears, it will just push it to Verscell. Excellent stuff. Ah, 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. Oh, 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 a wedding. Generate boundaries. Let's see if this works. This is the live application right on the web that you could access to. 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. 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 7 MCP. 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 clot code one more time here. And I'm going to say / agents here. And let's see what we have here. So we have one user agent which is a flux image generator agent a general one and just for the purpose of this demo we're going to create one in this project. So we went through 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 application. And I'll hit enter. And then as you'll see in my cheat sheet one of the free MCP servers that I would recommend you begin with is one that is called Playright. 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 clot code and this one line will install that MCP in my folder. So my sub agent is set up. I'll 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 at playright and that will add the MCP server to my cloud. 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 playright being one of them. And the amazing thing about this is it allows clawed 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 Playright, 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. Nah, 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 clot code. And now the MCP should be active. So if I say /mcp, ah, 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. Play right. Perfect. So now I can say / agents. And if I go to my agents, I don't see my QA tester. So I guess I'll just have to recreate him. That's okay. QA tester agent that tries to break my app. It will write instructions that will most likely be fine here. there. And then I just want to make sure it has access to the Playright 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 cuz it really does not need that. And then I go up and say continue. For the QA tester, I think set 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 you want this agent to always use playright, 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 playright to uncover hidden bugs. So this wording is actually recommended by Enthropic. If you say proactively using and then a name of a 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 can 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 context 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 Playright to test my application. Now, honestly, I don't even know if I can be using three copies of Playright at the same time. Probably, but this is where experimentation opens up. You could give API access to these agents, right? You could have a image generation agent. video whole dev team. You could have a marketing manager, a creative director. Then a bunch of agents with 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 promps they have in chat GPT 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 cloth code works. And yeah, now you can see these agents just like opening up browsers and asking for permissions of, hey, can I take uh snapshots of the current page, etc. And I have to like confirm that multiple times cuz 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. Setup 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 chat GPT 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. Well, we talk about new apps and APIs and models 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 cuz 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. 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.