Transcript for:
Claude Code Project Guide

With CL code, you can build pretty much anything. Whether it's a mobile app, an AI agent, a website, or a complex 3D animation, CL code can do it all. It's the most powerful coding agent ever created. And in this video, I'll show you how to build anything with it, even if you aren't a professional developer. My name is David Andre and I've spent well over 300 hours inside of Cloud Code. I have five developers on my team who use it every day. And together, we spend well over $1,000 a month on Cloud Code. So, I know the tool pretty well. Now to successfully build anything with cloud code, there are four main pillars. Number one is your cloth code setup. This involves your hooks, your commands, your prompts, your sub aents, anything you set up to make your cloud code faster, more powerful, and more reliable. Number two is about having a clear idea. What is it that you're actually trying to do with cloud code? The more clarity you have, the better. Pillar number three is your skill. How good are you at software development? Do you have a good understanding of computer science? All of these technical skills compound on top of each other. And pillar number four is your own prompting and context engineering knowledge. How well can you guide AI tools to do what you want? So these are the four pillars that determine somebody who's failing and building complete slop with cloth code and someone who can use it to build five times, 10 times, 20 times faster than he normally would. So now let me show you how to actually become a 10x Cloud Code developer. Someone who can use this tool to build pretty much anything. So I'm going to open an empty project right here. And the fastest way to open cloud code, command escape. Boom. Just like that, cloud code is open. Now, if you still don't have cloud code installed, just type in cloud code into Google, click on the first link, and run this command in your terminal. This will install cloud code globally on your machine. So, the very first thing you should do before you do anything with cloth code is to create the main markdown file. So, I'm going to create a new file, name it project description.md. So, you can easily reference this one file and any cloth code instance will know this is what the project is about. This is what we need to do. Now, if you remember the four pillars of cloth code success, one of them is a clear description of the project, right? What is the main idea that you're trying to build? So, let's add that into this markdown file. So, here's my idea for this video. Build a simple web-based CRM powered by AI. Basically, cursor but for CRM. But essentially, it's going to have a left side chatbot where you can talk with it and right side CRM where you can do all of your customer data. You know, sheets, contacts, whatever you would do in a CRM. By the way, another benefit of using cursor with Cloudcore is that you have the cursor tab. So whenever you're doing your context engineering, cursor predicts the next word. So this just saves you even more time. All right. So now let me click into cloud code. I'm going to press shift tab to switch the mode to plan mode and I'm going to say read project description. I'm going to tag the file and help me think through what the ideal text tag should be. This should be a quick and dirty prototype. And make sure to end your problems with think hard answer in short. This actually directly impacts the reasoning effort of cloth code agents. Later I'll show you how to automate that so you don't have to type it always. And actually the way to do it is with your own custom cloth code setup. And there's a reason I put it in number one because this is the difference between people who use cloth code casually right and people who use it all day to ship things way faster. I'm talking about production ready code, not some vibe coded slot. Now since I already have my own optimized setup from using cloud code for hundreds of hours, I'm going to utilize that and say create a new cloud folder in our root and inside copy the contents of this cloud folder. So I'm using cloud code to copy over my entire setup from my main repo which again I've spent so much time optimizing for efficiency, for reliability, for consistency. All right, let's approve this command to create the cloth folder. And this is really the main folder where everything from cloud code lives. Boom. There we go. So, we have my hooks, my commands, and my sub aents. By the way, if you want me to make you a custom personalized clo code setup that involves hooks, commands, prompts, sub aents, everything you need to be a top 1% clo code user, then pay attention because during the month of August, we're running a special offer inside of the new society. Anyone who joins the new society will receive their own personalized cloud code setup. All you need to do is tell me what you want to build, what use case or goal you have, and you will get your own cloud code folder with everything inside. Plus, inside of the new society, we do multiple calls a week where you can talk to me or my developers directly. And on top of all of that, we offer unlimited technical support. So, if you get stuck on anything, we will help you out. However, this offer is only available during August. So, if you want me to make your own cloth code setup, make sure to join the new society. It's going to be the first link below the video. Anyways, back to cloth code. Let's see what it cooked up. Again, we were in plan mode here. So, I asked it about the text stack. So, let's see what it suggested, right? And this is one of the most important decisions. So, it says Nex.js JS, Tailwind, Superbase, and then OpenAI for the model and Versel AI SDK. So, this is interesting. This is going to have natural synergy with Nex.js because obviously that's developed by Versell. So, this will simplify the text tag quite a bit. Obviously, if you're building some kernel or operating system, you wouldn't go with this text tag, but I was very clear that we're building a quick and dirty prototype, which is basically an MVP, right? So, we want to use a text stack to support that. If you're building something that once it goes into production needs to work for 30 plus years, then you should probably use a lower level language like C and you should probably think hard about the architecture. But if you're building a side project that you don't know if it's going to continue, you don't know if it's going to work. Use a text tag like this one that allows you to work fast. So actually I'm going to say no. I'm going to say looks good. Document this text tag decision in the core MD file. And this is the core importance using this file to build up the understanding of the project to add core details right and again this is the whole purpose of this main markdown file to build understanding of the project keep extending it and anytime you can tag it anyone whether it's a human developer or an AI agent knows okay this is what the project does these are the core features this is the text tag and here is the time frame here are the resources that the user has so just tagging a single file allows the LLM to understand everything it needs to make meaningful work so if We open up this file a bit more. You can see that cloth code has documented the text stack in a nice and concise way. By the way, a quick pro tip. Every single morning, what you should do is open up the global terminal on your computer and type in cloth update. This will ensure that you have the latest and greatest version of cloth code because this tool keeps evolving nearly every single day. Sometimes they do multiple updates a day. It's pretty impressive what Enthropic is doing. But, you know, just to make sure you have the latest version of cloth code, type in clot update into your root terminal and run it every single morning. Now, one thing you might notice is that when I'm switching between these modes, the model I'm using is changing, right? So, you might be thinking, how are you doing that, David? This is some sort of magic. Actually, it's not. This is a new feature inside of the latest cloth code update. That's why you need to upgrade that automatically switches the model based on the mode, right? So, as I said, shift tab is perhaps the most important keyboard shortcut inside of clo code. Allows you to switch between the three modes. The default mode, the auto accept, and the plan mode. The main two modes are the accept. So, this is the kind of the yolo mode, right? where cloud code just does the edits, doesn't care, you know, works fast. Plan mode is the one you should start with. It's the one where like you need to gain clarity about your project and where you really need to squeeze the maximum performance of the model. So that's why this new option when you type in /model is super useful and it's called Opus plan mode. This means that it uses Opus 4.1, the latest model from Enthropic only in plan mode. Why? Because this consumes your credits way faster, right? So basically what you should be selecting is Opus plan mode. It just simplifies your decision-making. You don't have to worry about it. You have opus in the plan mode. If you switch to auto accept mode, you have sonet 4. Now, if you're wondering, David, how is it showing the model and the git branch and the time? This is actually a status line. This is another new feature. If you type in / status line, you can have cloud code set up custom status lines, right? So, some people want to know how much they spend. You can use like packages like CC usage for that. But whatever you want to see, I think the model is the most important and the branch. But whatever you want to see, whatever you want to have knowledge of, you can set it up as a permanent status line to be shown below your cloth code input field at all times. All right. So once you know your text stack, the next decision should be the codebase structure. So again, I'm going to switch to plan mode and I'm going to speak out my prompt. Help me design the ideal codebase structure for this project. Again, it should be a quick and dirty prototype, aka a simple MVP. Take a deep breath and make sure to ultra think about this like a worldclass engineer would. Boom. There it is. So, we're getting this error and I think that's because we have spaces in my directory. That's a common thing. You know, you shouldn't have spaces in your folder names or file names to avoid errors like this. So, this is where I'm going to show you how you can use cursor plus code together. So, I'm going to tag the file fix settings.json. Boom. And actually, I have a second one settings.local.json. This one should not be in a git ignore. So, right now we haven't set up a git project yet. But the difference is that one you can have personally and one with your team. That way you keep them separate, right? But anyways, I'm going to give a description of the error to cursor. I'm going to say do not do anything else. Just fix this. Now, as far as the model, you can use either GBT 5 or Gemini 2.5 Pro. Both are fine. I mean, this is a pretty simple operation. Personally, I like to use Gemini 2.5 Pro. I think it's very underrated. And I like to use GBD. Okay, I'm going to save this for next video because a lot of you guys have been asking for a dedicated video comparing CL code to GBD5. So, I'm probably going to make a video on that. Most of GP5 versions are complete trash, but there is one that's amazing that I use every single day. So, that should be the next video. So, if you don't want to miss that, make sure to subscribe. Subscribing is completely free. Just go below the video, click subscribe. Takes 2 seconds. Appreciate it. So, this should fix the issue with our cloth code hooks because of the file location. Let me see if this fixed it. I'm going to copy the prompt. I'm going to open new cloth code. Boom. There we go. And I'm going to send it again. And we didn't get the bug. So, that's amazing. So now I'm going to click close others is what I use all the time. Close all the other cloud core instances and then we can close the cursor chat. Anyways now opus 4.1 the most powerful software engineering model is thinking how can we design a simple and clean codebase for this project right and again notice that I haven't rushed into it. This is what a lot of beginners do. They just want to get you know the agent to writing lines of code as possible. That's a huge mistake. The more time you spend up front the faster you can execute after. So if you actually properly plan out the codebase, choose the right text stack, think about what are the primitives, what are the core objects, what are the core features of of this project, you'll be able to move so much faster than if you just, you know, act like a vibe coder and jump right into it. So don't do that. All right, let's see what Opus is suggesting. Okay, so we have a main root project folder. This is what we have. Then app components lib hook store types. Okay, I think this is pretty solid, but we can make it even simpler. So I'm going to say looks good. whoever make it even simpler. And then I'm going to use dash d. If you don't know what dashd is, well, it's because it doesn't mean anything unless you have my custom hook. So this is the hook append default. And anytime I end a prompt with dash d, it appends this, right? So earlier I explained if you add think harder, it increases the reasoning effort of clot code. If you add answer in short, obviously it makes it less verbose. It makes it give concise answers. So this is personally my favorite prompt. And then keep it simple. This is just general, right? So this hook is something that I found myself adding at the end of 90% of prompts I was sending. So I just turned it into hook and all I have to do is do dash d and it gets automatically appended after every single prompt I send into close code forcing it to think hard and give me short answers. And again stuff like this adds up, right? Maybe this doesn't save me multiple hours, but it saves me 20 seconds there, 30 seconds here. And if I do that every single day for months, I gain an unfair advantage over people who do not have any custom hooks. Okay, so here's our simplified codebase. Looks much better. So, I'm going to approve it, which then switches us into auto accept mode, switching the model to Sonet 4. And that's perfectly fine because not only is it five times cheaper, but it's also faster. All right. Next, Cloud Core wants to create an X.js app. So, let's allow that. By the way, you should always read what it wants to do. ESLint. Okay. So, yeah, luckily we we don't have to decide all the details. Cloudc overtook that. But basically, anytime CL tries running sensitive commands such as here, creating a new directory, it gives you three main options. If you want to proceed, yes, yes, and don't ask. So this will actually add it to the settings.json or no. So for this command, since it's a pretty safe command, I can give it the permission to just run it every time without asking, you know, hey David, can I run it? And that's how you build your settings.json, right? You can see all of these commands. I gave it permission to run. Now, while close is cooking, let me explain two more essential commands. /cle. This completely resets the conversation history and frees up the context window. You want to do this when you're switching topics. when you're switching to a completely unrelated part of the codebase or maybe even different project, you want to do slash clear. So to avoid context rot, however, perhaps more often you will use slash compact. Slash compact is another context engineering command that allows you to summarize whatever history you have. So let's say you have 100,000 tokens, it summarizes it maybe to like 5,000 or 10,000. That way you can keep working on the same thing without losing essential context. Now, in theory, you don't have to worry about either of these because cloud code automatically runs autoco compact when it reaches the limit. So, when it reaches the 200,000 tokens, it will autoco compact because obviously it cannot go beyond its context window. But sometimes it it's good to do /compact when you start to notice like okay there's been some unrelated info we want to summarize it so we don't poison the context window with unnecessary stuff. Now, while I was explaining this clo code is already hard at work designing the AI module. So this is the file interactive openi anthropic. We have the database. So we're using superbasejs. We have the some of the types here. It's set up shad cn. So that's for components for UI. And we already have the nextjs project setup. So it's right here. Yeah, cloth core is doing a lot here. And the reason that it can execute fast is because we gave it a clear description of what project we want to do. We decided the text tag and we decided the codebase architecture. And by the way, that's something we should add to our MD file. So, what I'm going to do is I'm going to copy this and just add it there. Boom. At the bottom of the file, right below the text tag. And what we should do is we should actually wrap the text tag inside of XML tags. Boom. Boom. Boom. I'm just pressing tab. This is the power of cursor. And then I'm going to paste in the simplified MV structure. And I'm going to highlight it all and format it nicely with inline editor. Clean up the formatting. Do not change anything. Boom. So, this will nicely format it so that it fits the structure of the markdown. There we go. We can accept this. And now save. Okay, let's see what cursor tab is suggesting. Hopefully adding the XML tags here. File structure. Boom. Boom. Let's wrap it. Anyways, let's see where clo is at. It's been doing a lot. So the project structure looks complete. Basically, it did like 80% of the things. We just need to provide it with the stuff it cannot do itself and then decide on the database tables. All right. So type in enthropic console into Google. Click on the first link. Then login with your enthropic account on the left. Click on API keys. Then again API keys. If you don't have any, don't worry. Just go top right click on create key. Let me select the vector workspace. I'm going to name it cloud code demo. Add. Copy this key. Now, do not share your API keys with anybody. I'm going to delete mine before uploading this video. Let me jump back into cursor. I'm going to tell cloud code to create the env file in the right location and prefill the enthropic API key. So, obviously, we need to paste in the actual value, right? But this will just save a bit of time so I don't have to type out everything. Okay, there it is on the right. So, we will use infropic. Let me replace this. Boom. Okay, now so these are superbased stuff, but I'm going to say let's not use open AI for now. Let's switch all of our AI functionality to only use anthropic API. And I'm going switch to plot mode. The fewer lines of code changed, the better. I'm going to do my dash d hook which is again think hard answer in short keep it simple in the meantime I'm going to switch back to the browser open perplexity I'm going to say give me the latest documentation about how to use the enthropic API and actually let's see so we need the javascript setup I think and typescript okay yeah in javascript or typescript I'm going to do the deep research mode So while this is um we can we can accept cloth coding this. I'll say be detailed and thorough tell me everything I need to know about getting AI chat completions with the enthropic API. Okay, let's run that. That's going to be a deep research on this. It's going to check like 30, 40, 50 different sources to give us the latest docs. Because the problem of using clot code or any AI tool, the LLMs, the large language models, they have a knowledge cut off, right? They only know information up to a certain date because they have to be trained. If you train a model, you have to feed it the data. But that means you cannot feed it everything. So here, for example, it was showing GBD3.5 Turbo, right? It's terrible. Like you would never use this model. It's like ancient. Same with cloth free hiku. So there's the problem of use using the models without web search. So combination of cloth code and perplexity is really OP. And by the way that's why we built perplexity into vectal. So inside of vectal you have perplexity pro built in. Just as a side note but yeah using these two tools together is really OP. Especially when you're doing something with latest documentation or packages or libraries that might be updated. You absolutely always should do a perplexity research. Copy the output just like this. Boom. Copy. I'm going to say docs, paste it in, you know, again wrapping it in XML text docs and I'll say above are the official anthropic docs. Are we following these talks properly or are we using the Verscel AI SDK? If that's the case, I'm I'm going to do another web search. Wait, actually, I should probably check. Oh, yeah. So, we are using the Versel SDK. So these uh enthropic docs might not be exactly relevant. Let's see. In the meantime, I can run the same query. So let me just run the same query. Boom. Let me copy this new. I'm going to say enthropic models through the versel AI SDK which will be obviously JavaScript script. AI chat completions with enthropic models through VCEL AI SDK. So while uh CLCO is responding, we're going to run this. Let's go to the bottom. Let's see what's happening. Okay. So I'm going to ask, so the dogs the dogs I pasted are not really relevant or are they answer okay boom hard answer is short. I just want a clear response. Sometimes it does this like it creates a plan when it shouldn't. Like here I don't want any plan. That is the downside cloth code. In the meantime, perplexity DB research is generating the versel SDK docs not directly relevant. Okay, so that's fine. I'm just going to correct that with the latest with the latest documentation of this one. So I'm going to say boom, paste it in. Your task is to deeply in investigate our code, figure out whether we are following the docs properly. And I'm going to do answer in short dash u dash u is another hook. Let me show you this is the ultra think. So this is the most powerful version of thinking of reasoning effort for cloth code is to say ultra think. So what this does anytime I end my prompt with d-u it appends this use the maximum amount of ultra think take all the time you need. It's much better if you do too much research and thinking than not enough. So you'll notice boom you can see how much cloud code is thinking if I use that hook. So that's really good for squeezing the maximum performance out of cloud code. All right. So it is running to check if you're using the latest dogs correctly. Now maybe I can show you how to create your own commands. Right. So in the doc folder you have the commands subfolder. And in here you can have see a bunch of different background files and all of them are pretty simple. For example we can do like create PR create a pull request and it's basically a prompt. This is a set of instructions you want cloud code to follow. The only you know tricky thing is the arguments. So this is the stuff you provide after command. So if I do slashcreate PR here I can provide the arguments after right. So here I put it as a branch but honestly it doesn't matter. This is this could be like a custom prompt. It cloud code is smart enough to follow it and then it follows these steps. This is for the repetitive actions you might do. Right? You can see the the commands I have. Explain pull request, create PR, file review, header comments, push to GitHub, refactor security. And honestly, I want to add way more. Like this is just it's just the beginning. Like my cloud code setup is literally improving every single week. And that's another benefit of being in the new society because I'm always sharing the latest and greatest practices. Anyways, let's see the out outcome here. So, we're using we're using multiple issues, right? I'll say good. Now let's fix all of these issues like a senior developer would. The fewer lines of code changed the better. Do not do anything else dashd. Yeah. So this is the issue if you just use cloud code without any grounding in reality. Right? You need to make sure bar cloud code has a web search but it's not as good as perplexity. So you need to make sure anytime you're implementing something that you go with the latest documentation to not run into any issues, right? So all you need to do is to create your own commands. It's literally simple. You create a new markdown file right here. Boom. New file. Maybe this could be like a folder restructure or whatever whatever type of workflow or process or set of actions you find yourself doing or you know set of prompts, series of prompts you find yourself sending to clot code. Just create a new markdown file. Boom. and MMD and put in the instructions in here and then you can just do /fold structure and it will call that file into cloud code following the instructions and if you put the arguments dollar sign arguments you can insert any custom variables after the main command you know so /file review boom and this would be the path to that file and whatever you find yourself repeating there's no need to do that you can just create a new command for it and that's an entire workflow list of steps that cloud code will execute speeding you up even more. All right, so it seems like cloud core has fixed all of the issues we had. So we did put in the env key so I'm going to ask great work. I did update the env file by adding the actual enthropic API key. What remains for me to test our app? Maybe we need the superb base stuff as well, but maybe we can do that with like SQL light or something. All right, I'm going to reject this plan. I'm going to say let's go with a simpler way. Can we just use SQL light for this? Again, it's a quick and dirty prototype. So, I could set up superbase, but honestly, for this, I don't think we even need a Postgress. Let's see. And this is why it helps having some knowledge of just basic technical knowledge, right? different database types, different frameworks, different programming languages. Let's see. Okay, so seems like cloud code agrees. This would actually simplify things a lot. Yeah. So that's good. So since we're using these two packages, I'm going to do another perplexity search for them. Boom. Give me the latest documentation for using these packages or libraries, whatever. And we're going to say specifically how to integrate them into a full stack AI web app in JavaScript and TypeScript. Be detailed. Boom. That's running. So we need to uninstall superb package. Let's confirm that. So this is npm uninstall is probably something you should not add to your allow list because it's a risky package, you know. So you really want to be careful how you curate your cloud folder, your cloth setup. If you add the wrong commands to your allow list, maybe you can do f go faster, but then cloud code uninstalls serious important dependency and again you waste an hour. So this is why setting up your cloth code correctly is essential. And even though I have hundreds of hours in it, I still improve my setup every single week because you never you can never have enough, you know, automations or enough commands or enough hooks or enough prompt templates. you always find yourself like the moment you see like okay I've used this prompt already four times in the past boom turn it into a hook or turn it into a command turn into a sub agent anytime you find yourself repeating the same workflow same list of steps it's time to automate that to templatize that and allowing you to move even faster and especially if you have a team right because then you can share prompts one person finds a really sick prompt and shares with everybody else one person creates a nice hook shares it with others That's how you can compete with big companies. You become an AI first team. If you're an AI first developer, you can absolutely outco compete anybody, even people who have way more years of experience. So let's see. We have uh successfully switched to SQL light, remove superbase, added SQL light, rewrote. Okay, so now I'm just going to double check this. And this is why sometimes going slow is the move, you know, doing extra deep research to double check this. So I'm going to say dogs. Boom. Here are the latest dogs for the packages we are using. Take a deep breath and double check the implementation and tell me are we following the official documentation or not? Are there any serious issues or is it basically correct and we should not overthink this. Think hard answer in short. Boom. Switch to plan mode. Shift tab. And now we're using Opus 4.1 to ensure that everything's correct. See like you can see all the sources at the bottom of the perplexity search here. Did 31. Okay. Implementation is basically correct. Nice. And by the way, the most important part of my prompt is this. Are there any serious issues? Right? Because you can ask the models and they will always find something that could be more, you know, written more cleanly or documented better whatever. But then I say we should not overthink this. So this is like really important prompt engineering how to actually find serious problems you know security flaws or l circular dependencies or loops or bad time complexity whatever something serious that is not just you know spelling issue or suboptimal code whatever you get the point so this prompt is really important steal this and use it a lot okay so then I'm going to press the up arrow a few times I'm going to yeah this I wanted to use the same prompt to see like okay is there anything else missing We've switched to SQL light to simplifies our database greatly. Can we test the app? Is there something critical we have to do? Or is just we need to just run npm rundev. So we need to probably locate the CRM. Okay, CRM app. So let's do that. Let's open a new terminal. And again, we can use cloud code to run it. But it's good to understand the basics of a terminal. So we need to do ls here. We can see all of the things in the root. Obviously, we want to go into the CRM app folder. So we're going to do cd CRM- app. We're here and then we can do npm rundef from here. There we go. We're on low close 3000. So let me open that up. And the next thing. Okay. So we have error. That's that's fine. For front end debugging, I'm going to show you really OPM MCP that all of you need to have. MCP server is actually crazy. So before we debug this, let me open the global terminal. And all you need to do is run this command to install the playright mcp cloud mcp at playright npx at playrightmcp at latest. Playright is a open-source framework from Microsoft for testing front end to end to end tests. Basically interacting with websites programmatically. So we already have the this MCP server. So we can close the terminal and we can test actually inside of cloud code by doing /mcp. We don't have it. Hm. Okay. So maybe I need to install it locally here. Boom. So we do have it now. Let me open new clot again. I should use the command escape uh keyboard shortcut /mcp. Okay, we have right. Amazing. So we we will switch to this new window, but whatever. First off, we need to debug this, right? So module not found. You should actually start learning the skill of reading error traces, right? Because it it can be u kind of lazy just copying stuff and pasting into LLM and say like, okay, explain this error, right? So I I can just paste this in and I can do four dashes and they do the dash e. That's another hook I have for explaining error traces. This one is more advanced. And again this is why you should join the society because during August we will give you all the hooks, all the commands, all the sub aents for your specific use case. So maybe you want to build a SAS, maybe you want to build a agency, whatever you want to do with cloud code or just want to become better developers, speed yourself up. Just tell me what what's your use case, what's your goal and we will design a custom cloth code setup for you including all the hooks, including the prompts, including the commands, sub aents, settings.json, everything you need to become a cloth code power user. So this hook anytime I end with dash e appends this, right? And we have multiple techniques. We have think harder. So that's like the third level. You have think. If you say think, that's like a low reasoning effort. If you say think hard, that's a medium reasoning effort. If you say think harder, that's high reasoning effort. And if you say ultra think, that's the highest for a cloth code. So, uh you can see do not jump to conclusions. This is so that it doesn't say, "Oh, you're right or I see the issue now." Stuff like this terrible habit. Hopefully, Enthropic fixes this. That's one of the worst parts about cloud models to be honest. So, yeah, this uh this prompt is quite optimized after a lot of testing. Anyways, uh here, let's see the explanation. module not found. Okay. Okay. AI package doesn't export react path. So here's the plan. I'm going to accept that and we're going to slowly switch to this new window where we have the MCP for playright. We might need it. We might not need it. But this is very OP for debugging for front end. Now we have a different build error. So I'm going to use this. I'm going to again switch to plan mode to use opus. I'm going to paste this in. Do four dashes and just dash E. See how f much faster I can work with somebody compared to somebody who doesn't have my hook who has to say like okay explain this error to me what does it say how can we fix it properly no I have this hook so all I do is dash e two characters and I have a optimized prompt so let's see first uh okay so that should fix this this error and then uh let's let's have this clo code so you need to this like a skill developing uh understanding where you should switch to new cloud code right so Here we already were chatting for quite a bit. You can see we have lots of messages and a lot of it is redundant because we were just implementing the fundamental or not redundant, deprecated, outdated, irrelevant. We were implementing the basics of our codebase, right? So now we're going to be more focused on like fixing specific bugs or polishing the UI, stuff like that. So anytime you kind of switch the type of work you're doing, you should switch your cloth code. Now you could use /clear to reset the context window. Absolutely. The problem is that sometimes the terminal bugs and you still see the older messages which can be quite annoying. If you're working on the same thing, you should do /compact and continue in the same conversation. Actually, we can probably run /compact here because um even though we're not near the limit, we're probably like 60 70% I would say. We still want to compress a lot of that unnecessary info to avoid context rot. And I you can even do / compact and give it a instruction after it, right? So maybe next we're going to do UI changes, remove everything else. So then it would focus on that in the compacting conversation summary. Anyways, what is going on here? What is going on? So fs uh uh let me see getting build error module not found. What I don't like is that it's doing way too many changes here. Maybe it will fix it. Let's see. Oh, there we go. App is running. This is huge. All right, so let's see what's going on. We did see the UI for a brief second. I mean, what what are you doing here? I'm going to say Typescript error. Okay, so it ran nprmble. Oh no. So I will say revert the changes you did after npm run build. So one thing we haven't done here is create a global cloud MD file. So I'm going to do that right now. I'm going to say create a cloud MD file in the root folder. Boom. So again we can have multiple cloud codes running. So our app used to work. The problem is that there's a nextjs bug. So this is something you will learn as you go. So anyways uh here let me kill this terminal. This is our from the terminal. So I'm going to do Ctrl C to interrupt it. I'm going to clear and npm rundef again. If you do npm run build, it will mess up the server. So you need to just restart it. That's a bug index.js. It's nothing to do with our app. Let's see what we have. So we have Okay, we can ignore this. We have a simple UI. Okay, so let me open the cloth MD. So this is a this is going to be instructions about the project, right? And the reason we should have done this earlier is because you can control how clo behaves. So here I can say npm run build never ever run npm run build unless the user asks you to do so. Okay. And here again it started by basically saying similar stuff we have in the project description but the difference is that this file is basically cloud code looks at this file every time. Right. So every time you use cloud code, it looks at cloud.md. This is the main system prompt. So you want to keep building this over time and keep extending it. And by the way, as a bonus, I'm just going to throw this into your cloud code setup if you join the new society. We'll also create a cloud. MD file optimized and specialized for you. All right, so let's see what happens. I'm going to say the server is running. The server is running. I can see the front end tell me how to test it. I'm going to do dash d. Boom. Let's see what's happening. So try ask. Okay, we already have some prompts. Show me all leads. Create new contacts. So I'm going to create a new contact as a prompt. Let's see what's happening. We have contacts. We have task. Leads. Contact tasks. Ask me about CRM data. So since we don't have any CRM data, we need to make sure the AI can create CRM data. All right. So this text field is bad because it's light gray on white. So we can barely see it. But that's a small UI change. I'm going to say we need to first of all, we should probably check the terminal. There's no errors. Okay. I'm going to say we need to make the AI agent in our app work. When I say create new contact, right now this right now my CRM is empty. So investigate how the AI behaves to create new contacts. And I'm going to say ultraink basically dash invoking our hook. So we have three different categories leads, contacts, tasks. And if you're like, "Okay, David, but I haven't built a CRM. I don't know how a good CRM should look like." Well, guess what? Neither do I. So, what we do is we launch a deep research and say, "I am building an AI powered CRM. It should be a full stack CRM with all of the main features. However, I will have a AI agent on the left just like inside of Cursor that helps me interact with all of the UI elements inside of the CRM. Your task is to find what are the essential features, what are the core functionalities of a CRM app. What is all the things we have to do? What are the main problems people using CRM are solving and how can we build them into a simple, clean and powerful AI powered CRM app. Give me a detailed spec. So basically you research, right? What is the target avatar like? How does the typical user use a CRM? What problem are they solving with a CRM? What are the core features? What is something that should be in V2? This is very important. If you're building something, what is a V1 feature and what is a V2 feature? You will realize a lot of the stuff you want to add is actually a V2 feature and should not be in the MVP. So again, anytime you're building some project, you need to educate yourself. This is even more important than educating the AI, right? A lot of people talk about context engineering, which is like creating and managing context for the AI agents. But even more important is you yourself like as the human understanding what you are building. What is part of the scope? What isn't part of the scope? What is the V1 feature? What is the V2 feature? Like what what does the target avatar look like? The typical user of a CRM. What are they using it for? Right? How are they using it? Are they using it on a phone or or a computer? This is all the things you have to deeply understand as the human as the founder. And that's why AI, as Bellagi says, by the way, shout out to Belagi. Watch my podcast. AI is going to make smart people get smarter, but it's also will make dumb people get dumber. People who ask Google stupid ass questions are going to ask it to chbd and they're going to outsource their thinking. And those people are lost. Those people are completely lost. If you outsource their thinking to AI and you ask even the simplest questions like what's the next feature I should add? No, you need to make that decision yourself. You need to be in charge of the product, not cloth code, not JBD. However, if you use it in a clever way like learning documentation or you know figuring out what what's the best database type for this type of application or how does a typical customer use my type of product, right? Okay. Essential CRM features contact management. So, this is what we need to do. This is what we need to copy this block. I'm going to add it to our project description MD file. Boom. Essential CRM features. I'm going to do a header here. Features features wrap. Amazing. Cursor is saving me massive time. Let's see what's happening here. Uh, we don't want to make uh, okay, so whatever. We're going to allow clo code to do a web search. Even though it's not going to be like a deep research, it's still fine. The problem is clear. They're creating enthropy client chatter than trying to call AI client or function. Oh, we're using bad model. Okay. Oh, no, no, no, no, no. We want to use uh, we want to use um, sonnet or opus. So, let's create a new chat here. I'm going to say what is the official API name of cloth for set in the anthropic API when using it via versel AI SDK and then I'm going to use /ws. This is actually a shortcut I have inside of perplexity that inserts browse the web answer and any short and yeah because we do not want to use the haiku that's that's very outdated. So okay it's just this. Okay, I'm going to copy that. I'm going to interrupt. I'm gonna say boom. That is the official model name. Use that. I think we're just using an outdated model. That might be one issue. But we will add debug look statements because we will get this running, right? I want to start adding contacts and I want to make sure we have these core features. So actually what I can do right here is I can go into the other cloud code the the first one the old one and say read project description and tell me whether we have the main CRM features implemented or not answer in short and dash u to ultra think let's go back to our new one let's see what's happening yeah we need to change from enthropic okay okay looks good plot for sonet should be that one again we're going to add a bunch of debug statement so we can see like in the console right here what is going on and we will use actually playright as well to debug the front end we had this one I think we put it in the older cloud code so we probably just we should create a new file so okay I'm going to say create a new u /docs folder where we will put the most important documentation for our app okay start by creating just one file named pursel- sdk or celldk.mmd. So we will start building internal documentation and this is important for things that you need to reference often or things that other developers should know and if you find yourself you know copying something multiple times again just create a markdown file for it and you can easily tag that file. So let's see. Okay, we created the docs folder inside right here. It's empty. It will create the versal docs. We will just replace it with the the proxy research DB research output. That way we can tag it any cloud code instance. Right. So here, boom. It already put it there, but I'm going to just replace it with these sources. And it's already 300 lines of up to documentation. So the beauty of that is I can go here. I'm going to say, okay, it's created a new app. Why did you start a server? So, okay, I'm going to give you a tip. If you do hashtag, you can add to memory. I'm going say do not start any servers unless the user says so. I mean, actually, it's kind of fine because then cloud code can debug it faster. Whatever. We're going to use 3001. It's fine. I'm going to I'm going to instead cancel it out. I'll say read purseld and investigate whether we are following the latest documentation properly dashd. I'm going to turn this into plan mode and you can see the one bash running here. This is showing that we have something running. So we have the front end running and that allows cloud code to debug it faster. So let me say create a new contact. Uh this is very bad UI. I'll fix it. create new contact u about a real estate developer whatever send happening so the it got refreshed but we didn't get the AI response so let me open the console honestly we should probably just uh you use the playright mcp to save ourselves some time here because we're debugging this manual way and it's kind of slow okay we have some conflicting output so net okay whatever I'm going Ask it. I want to use plot for set through the versel AI SDK. What is the proper API name of this model/WS? We need to we need to double check this like this is we might just open this up to be honest. So let's open up one of these docs. Read it here. It says it's this one full one. Okay. So yes, this should be good. 25514. So that is the correct one. So that's good. Let's see what the other cloud code suggested here on these issues with sales pipeline activated tracking based report. That's fine. We don't need these. We just need to get the we need to get the main um main output working. Like right now the AI is not generating stuff. And actually while this guy is not doing anything I can activate this clo say update the UI of the chat so that there is proper contrast when typing some characters. Right now it's light gray on white and overall improve the UI of the left side of our app. Don't over engineer it. The fewer lines of code the better. Boom. So we can have one cloud code improving the UI. The other one is fixing the AI functionality. And then I'm going to switch to plan more here and say how create new contact. How can I test the create new contact functionality of our app? I want the LLM I want AI to properly save this into our DB and for me to start using the CRM. So the refresh might be too fast, but even if we reload, we still have no contacts. So then we will have to debug what's happening to that data, right? So let's accept some of these front end changes, UI changes. Let's see what's happening here, though. So open the app chat panel, type something command. Okay, so let's let's test this prompt. Let's see if we even get AI response. That should be the first thing. And we we have the nice contrast now. Beautiful. So we fix that issue. We're not getting AI response at all. That's the problem. I'm going to say no. I'm going to say use the playright MCP to debug the front end. Right now, we are not getting an AI response at all. So, when debugging, you want to isolate the bug instead of trying to oneshot fix it with AI. You want to get closer to figuring out what it is. Right? So, a lot of the times adding debug statements is the move. So, I'm going to say when I send a prompt like boom, nothing happens. The AI does not respond and the CRM does not save the contact. Okay. And then I'm going to switch to plan mode and say your task is to figure out the optimal three places where we can add a concise debug log statements so that we can get closer towards fixing the issue. We don't want to try to fix it in one go. We just want to proceed like a senior developer would strategically isolating the problem by adding debug statements in the most important pieces of code so that we can know when things break down. Take a deep breath and analyze the entire front end and suggest the best three or four places for us to insert the debug log into. And I'm going to do answer in a short and dash u to ultra think this. Let's go back to here. So we need to approve the playright. I'm going to actually add it to our allowed list of commands. So it's going to open playright. Boom. There it is. And now AI is going to interact interact with u our website. Right? So can put this on the side. We can approve some of these commands. Actually let me switch to auto accept mode. So let's see how um let's see how cloud code is going to debug this again. I have my hands lifted up. It's all cloud code. Well, I just need to approve these commands, right? So it wants to click. Boom. So it's it send a message. Nothing happened, right? Okay. List network request. So it's getting some info. Oh, there's error. Interesting. Issue found. Front end test reveals a problem. No API call. Oo, that's really bad. Okay, here's the plan how to debug this. So by adding the playright MCP, you can have cloth code literally interacting with the front end, testing it, sending the prompts itself, clicking buttons, interacting with the UI and finding and debugging it itself. It's really like the next level of AI and you see like all that you need to do is add a single single line for the playright MCP actually oper. Let's see if u I mean since this is a play instance uh close code should find it easily. Navigate to URL. Boom. It should notice this error. Let's see. There is import path. Okay, it fixed the import path. There we go. So, this is beautiful. We're watching an AI agent literally debugging front end in front of our eyes. It type in the prompt. I'm not typing, guys. It's doing it itself. It type text player text. Click it. Click it. And let's see what happened. So now it's listing out the requests, reading all shell output. Okay, we have another error. Let's see. I see the issue. Error shows the file. This is just allowing you to debug way faster. And again, if you're a professional front end engineer, maybe you would do it yourself faster, right? Maybe you wouldn't even run into these issues. But for all people who are like junior developers or no not even developers people who just like you know maybe you're an entrepreneur you want to build a internal software for your team you can use cloud code to build anything I mean I really believe that you can do stuff that otherwise would not be possible this is the biggest power right you have like senior developers hating on AI oh it's running slob it's not following best practices sure maybe that is the case but you have also millions of people who would not be able to build software who now can and you can use these tools to also debug it to also run tests to make your app more secure. It's all about the intentionality, right? If you're a dumbass, you can only use these tools to build quick MVPs and not add any security, not you know improve your UI, not improve the customer experience, not add observability, track your endpoints, not add any tests. That's your problem. That's because you're not a clever individual. If you are a clever individual, you can use these tools to obscure yourself to educate yourself. So let's see what's happening. Uh test endpoint cd curl command. Okay, looks looks good. So yeah, if you are an intelligent person, you can use these tools to upskill yourself way faster and achieve things that otherwise you simply could not or at least achieve them way faster, right? So running some curl commands to test specific parts of the code. Here's the streaming response. All right, so now it's going to run another test. Navigate URL. There we go. It's going to write the prompt. There it is. As you can see, the text was automatically inserted there. Going to click the send button. Reading shell output. We might need to interrupt it here. It's running for a while. Still no API request front. It's not working. Let me Okay, so I'm going to say take a deep breath and investigate. Actually, we should probably add these. Okay. So, say add them. We should add these debug lock statements to see whether we're even I mean this is this is not going to help it because u seems like the issue is that we're not hitting the API investigate why are we not making the API chat request where exactly is the issue and what is the next small step we should take to get closer to solving this think like a senior developer would We don't want to like oneshot fix it. We want to get closer. So here we added some console logs. That's going to be valuable either way. That's fine. But the issue is that we're not even hitting the API. We need to get a response from Enthropic. And then we can parse that response to add some contacts one step at a time. Okay. So playright evaluate JavaScript. Okay. Let's see. Interesting playright tool right here. Console. Let's see what's happening. Is anything happening here? Again you this is like very important to have some logic skills right to okay so and close code is also confident that it found the issue if you have a logical skills you can proceed like okay how should we debug this okay first let's make sure the button is working is it sending to enthropic API okay it is are we getting response okay are we parsing correctly what are we doing with that parse data you can move way faster if you have the ability to think logically and again that that's like the core of being a programmer it's not about memorizing syntax, right? A lot of the people who have been programming for years, the reason why they resist AI because they just memorized a ton of syntax and they created a personal attachment to that and they didn't want to let it go. However, the skill set is changing. What is going on? This is uh this is going in circles for my taste. say also add three more debug log statements right after clicking the send button. We need to know whether we are even hitting the enthropic API via Versell SDK. And I'm going to also say add colorful emojis at the start of each debug statement so that we can easily see them. Yeah, I don't like this. This is going in circles. It's going uh in a lot of circles. Okay, it says it found the issue, but it said that multiple times already. So, let's change the approach. Let's um go our own way. So, let's go one step at a time. New CL code. Move this one to the side. The old one is still pretty good. We're just adding it for debug logs. That's fine. Can close some of these. We're going to use the new one to actually get this up and running. So let's see which of the servers do we have running right here. I'm going to kill this. I'm going to restart this. So again, l CD CRM app npm rundev. Okay. So I'm going to ask a very dumb question here. Uh, is npm rundev all that I need to do to launch our app or do I have to start another server? Okay, it's a simple question and this is benefit of using AI. You can ask many dumb questions without feeling any shame. You know, if you if you had like a imagine learning a new language, right? And you buy a tutor or like learning programming and you pay a human tutor, human teacher to do lessons, programming lessons. Maybe you ask a question once, twice, maybe three times, but then you don't want to seem stupid, right? There's the social dynamic. There's the inter human personal dynamic that makes it weird. With AI, that's not the case. You can ask 20 times, 30 times and um without any shame you know and the AI will happily respond explain it differently. So yeah here this is all we need. So we have our server running here. Let's watch out for errors and we also have the front end console. We need to check we're running on 3,000. Okay. So we were on the different one. Close some of these. Okay. Create a new contact named John. Send. We have we seen some error. Let's open the console here. Hey, why is it reset? Okay, that's very sketchy. That's very That's very bad for debugging. The whole console resets when I send something. Right now, the whole front end console resets the moment I send any prompt into the chat window. Investigate why that's happening and think hard about how to fix it. The problem is this. We cannot really debug if we don't see the logs, right? So let's see what should be the first step in us debugging this issue. Give me step by step. Sometimes it can finish with the playright but here it ran into some loops. So it's valuable to also have some script. So okay we have it. We have it pro to console tab clear console. So we have the console it's clear. I mean it's clearing itself right. So that's that. Send a message. So let's again click this send. H the problem is that when I click send the app reloads and the console resets. This makes debugging very difficult. Okay, we have we should have this uh so here. Okay, this one wants to play player MCP say do not use the MCP server explain instead investigate the codebase to figure out why this is happening and how we can fix it. A - D. What I'm going to do is I'm going to open up cursor on the side with Gemini Gemini um with 5 Pro. And again, this is the reason why this is valuable is that okay, I'm back. Is that you can have multiple powerful AI agents working together, right? So, I'm going to describe the same issue. Boom. Say do not do anything yet. Just answer. Just uh analyze the files. answering short sometimes using a model from different company can be all all that's needed to solve it right so obviously cloth code is enthropic sometimes using a Google model like Gemini 2.5 pro is is going to give you a fresh perspective sometimes open AI model sometimes XAI model on issue form is okay page reload okay is the Gemini actually reasoning or is it stuck right let's see so now console shouldn't reset so I'm going to say hey Hello. Okay, console did not reset. That's massive progress. I'm going to take a screenshot of this. I'm going to save it to documents. And what you can do is you can drag in files into cloud code. Hold shift. Boom. I'll say good. Now the console does not reset. However, we still run into errors. I'm going to do dash E to explain it. Plan mode to get opus the latest model. Okay, so it found the same thing basically. Um, that's fine. Let's put it aside so it wants to read. I'm going to add this working directory so you can read screenshots faster. Here, uh, I don't really like the that, you know, we haven't got success with that MCP. Sometimes like it can debug it really fast. Sometimes sometimes you need to get your hands dirty is what I'm trying to say. And you shouldn't be afraid of it, right? No matter what bug happens, what error happens, you should not be afraid. You should not take it personally. You're going to solve it. So let's see. Input is undefined. So we have a handle submit is not a functional submit. Okay. Let's see. Show debug log. Right. Okay. So I agree with that. Add the debug log. You can close this for a bit. If you want to have success with cloud code, again going back to the four pillars, you need to be willing to improve your skill. You can get very far by having the right setup and you know clear description of the project and even if you're really good at prompting and context engineering. Pillar number three you cannot skip. Pillar number three is u something that takes time to develop right your technical skill set. How good are you at understanding front end back end APIs your your tech stack the programming languages you're using right and this is really the main thing people want to skip. They want to shortcut it. And obviously if you already have some programming background you can move faster with these tools. But if you don't the beauty is that you can use these tools to develop your skills way faster. So that is the real beauty and that is where the real challen like real not challenge arbitrage real opportunity is using these tools to upskill yourself way faster. So do not be afraid to get your hands dirty to really like learn okay what is happening how do we debug this? How would a senior developer go about debugging this step by step? Try to improve yourself. The more you improve yourself, the faster you can work with cloth code. That is really the secret. Know when people ask me, "Oh, David, what's what's the secret?" Right? You've built a successful AI startup that's doing $9,000 in mind recurring revenue. What is the secret of using AI to build a SAS? The secret is improving yourself, willing to get your hands dirt day, and upskilling yourself every single day with these AI tools. So, let's analyze what we have. Use chat. Okay, so it just added more console logging. So, we're going to go back and we're going to proceed. Let's reload the app. Boom. I'm going to say, "Hey, let's see what happens. Input value undefined." So, again, let's screenshot this whole thing. Save to documents. Boom. Okay. We'll say here's what happens. Now I'm going to do dash E. Switch to plan mode to get Opus maximum power. Let's see what's going on here. Here. Okay, I'm going to I'm going to kill this cloth code and I'm going to kill this one as well. Let's clean this up. We don't need some of these. So we have this setup. I'll launch a new one. You don't have to worry about this ID disconnect by the way. So what? Okay. Use chatter returned. Okay. Okay. missing input handle input hook is working by returning completely different properties than our code expects. We might have a version mismatch. Okay, so I'm going to say run npm list command safe. We can have cloth code run it. And I'm actually glad that we're running into errors. If it ran on the first try, it would have been boring, right? It might give you the wrong expectations and then I a lot of people complain, okay, but for David, he didn't run into any issues. You know what I was building, I didn't ran into errors. So the fact that we are having to do some debugging shows you that you know it's not uh it's not a problem. So we have version 2012 likely new version. Okay. Tell me what to search on perplexity to to correct the docs for this. Do not do anything. Just answer ak react. Okay. Okay, we might have some uh version mismatches. The reason for that is because we ran some perplexity searches, but for some of them it might not be search for. Okay, boom. I'm going to search this up. Let's try to understand more source, right? So, use chat returned these things. So, the hook is working, but it's returning different things. So, our code is probably not familiar with the new documentation. Okay, we check the version. We don't know if this is latest version but this is going to be revealed but we can also do another search say what is the latest version of of this what is the latest version of package WS boom major changes okay so we are using latest version but this is going to be important I'm going to do results. Paste in the search results. I'll say give me a tlddr explanation of the search results. So this is the beauty of using you know perplexity to check 20 different sources. Imagine that doing that manually would take you 30 minutes. V5 bar code is written for V4. Okay. Say great find. Let's briefly document this. in I'm going to say project description MD just add a very short section about the versions we are using this is how you need to do context engineering you need to build your understanding anytime you fix an error anytime you have some issues and you you know find like there's a version mismatch whatever just build on your context files write it down so in the future you yourself know and the AI agent knows as well okay so I want cloud code to document this there we package versions. Let's see where are we? There we are. So, it added this section and this is how you build your internal documentation, right? Instead of just guessing and running into the same errors, you write it down. You document the most important things and then you proceed. So, I say good work. Now, implement the fix. So we probably know this is I'm very confident this will fix the issue because uh there's a major version mismatch and again the the AI agent wrote it for V4 because it's uh in the outdated training data right that's why you need to use web search use tools like perplexity vectal we have perplexity pro builtin to search this up and to double check that you're using the latest documentation And actually what we can do since we're doing a lot of web search, we can create a sub agent for it. So this is another major thing inside of cloud code is using sub aents. So when you type in / agents, we have the attack plan architect, but I'm going to create a new agent. I'm going to put it into the project. I'm going to generate with cloth and I'm going to say this is an expert web researcher that always checks 10 plus different sources to confirm we are using the latest documentation the correct package versions or simply following the best the latest best practices. Okay. Enter. Now cloud code is going to create a new sub agent that it can delegate to. So anytime so if you don't want to switch into perplexity and just want to stay inside of cloud code just build your own sub agent right that is a expert web researcher that knows how to look for dogs and if you want to really do it properly you can figure out you know what a expert researcher looks like. So I'm going to say how does an expert programming researcher use the web? How does a senior developer use web search to solve bugs faster to find the correct documentation to learn that he's following the latest best practices? How do 10x engineers use web search tools like Google or like Perplexity, like Stack Overflow to analyze the web to get the latest information? How do they write their search queries? teach me everything about this domain and how senior developers and professional 10x engineers browse the web. So now we will use deep research. This is kind of meta, right? Meta prompting. We're using deep research to figure out, okay, how do expert programmers and senior developers actually browse the web? And we're going to use this instructions to improve our sub agent. Okay, so we want to give it all the tools. Yes. Uh for the model, we probably want to use um set actually. So let's inherit from parent. What color do we want to use? Blue is good for the researcher. Okay. So this is going to be the prompt. That's fine. Let's create a new agent. And it's already created. Okay. There we go. So we have the web research validator. Look at this. Look at this. So that's really good. Really good already, but we're going to improve it with this deep research. Right. So this checked 52 sources. And I'm going to copy this. I'm going to say your task is to improve and I'm going to tag the agent. Improve the system prompt of our if I tag it, it's going to delegate to it. That's the problem actually. Okay, I can tag the file web search validator web research validator validator sub agent by improving the prompt engineering based on this info. I'm do you know info boom paste in the proxity do not do anything else just greatly improve the system prompt of this sub agent like a world class prompt engineer would boom so now we're building specialized sub aents for different types of actions you might do right so the let me explain how the difference is between hooks, between commands and between sub agents, right? And I guess the easiest way to do that is to jump back into traw and let me explain this to you, right? So inside of cloud code, we have sub aents, we have hooks, we have commands. The purpose of sub agents is for specialized AI tasks, right? For example, the web search, you need to do it, you need to have it do multiple actions automatically. Hooks, the purpose of hooks is deterministic automation, right? You can see my hooks at the on prompt submit. So that is deterministic. Anytime I do dash d it repents my default classic prompt. The purpose of commands is shortcuts. Maybe a better way to describe it is like sets of actions are repetitive but that don't require like a whole sub agent for it. You want the main agent to execute it. The difference is that commands are way faster than sub aents. Sub agents are actually kind of slow. So the the beauty of that is like delegation, right? When you need a separate context window and you don't want to flood it for the main agent, just create a sub agent, have the main cloud code agent delegate to that and continue your conversation. Commands are way faster, sub agents are slower, but sometimes that's fine because you need a sub agent to do more work, right? So, let's approve some of these changes. Boom. You can see it's massively rewritten the prompt. And yeah, it looks good. Looks good. Seems like it has been changed. I don't know what is it's kind of confused that it's in plan mode. Okay, I don't know what it's going to do right now. Yeah, it's done. So, it doesn't need to do anything else. So, now if we create a new clot code, we can actually use the sub agent, right? And you can tag him. So, this is a web. There's this Asian web research validator. Boom. And he can do web search on specific topics. Let's see what our main cloud code did. Okay, so it fixed it. Let's while we're creating a sub aent, let's double check our app is working. Okay. So now it's uh return doing the print statement after every character type. That's not really optimal. Oh wait, we're making serious progress here. We still got some error, but we can see our message here. I mean, it's we cannot really see the text, but we can see something. It's saved there. Chat error server error use chat return messages. Okay, so I'm going to screenshot this part and let's continue debugging this. Boom. This is our main clone. Move it to the left. You can terminate this one. By the way, anytime you like make changes to your sub agents, commands, hooks, you need to you need to create a new CL code because it will not have knowledge of that. That's a small pro tip. Boom. Okay, we are making progress. However, we still have errors. explain what is happening now dash e boom and in the meantime we can probably set up a quick GitHub repo to actually connect this because we we haven't initialized it here okay so we let's see what happening server 500 process fixed backend API is crashing oh we do have errors okay so let me copy that so I'm going to scroll down so I'm going to say terminal paste it in terminal. Okay, I should I should not I'm reset. You can reset by pressing escape, by the way. That's how you reset your prompt. I should not copy the whole terminal. I should just copy like the latest outputs. Uh maybe from here. Okay, here. I love this bug here. The clo the classic cloth code glitch. Here's the terminal output. give me a tlddr explanation e in the meantime like okay if you've never set up GitHub right what you can do is say your task is to help me connect our project here locally to a new GitHub repo tell me step by step how to do this okay so on my second I can maybe drag it so you can see it I've created a new empty repo named AICM. I made it public and we're going to connect our project locally to a GitHub repository so we can properly do comets and we can do version control, right? Initialize new. Okay. Okay. Okay. So, let's do one step at a time and let's do it ourselves actually or actually we can call code do it. So, let me switch to accept. Do the first step yourself. Do not do anything else. So get in it. I don't know if it ran it because I can see main branch at the bottom. So maybe it ran it before. We need to do a proper get ignore. We are not going to commit or push anything. Next up, create a proper ignore that um excludes all of the envo files and anything else sensitive in our codebase. Do not do anything else. Just create this safe and secure uit ignore file. Ultra thing you don't want to commit your environment variables. I mean we can see those are already not committed but we still want to create a very proper get ignore. What's happening here? Just like okay doesn't exist anymore. Okay. So this doesn't exist anymore. So I'm going to launch a new cloud code and I'm going to launch the researcher on that. I'm going to give this as a back context. going to do back context. Boom. Slashback context use. And then I'm going to tag the researcher. Uh uh uh agent agent web research validator. There we go. Agent web research validator to figure out the proper way to solve this dashd. So let's let me show you how sub agents work. Right? So it's going to delegate to the sub agent. Boom. There we go. This is how it looks, right? When it it's a the color that we chosen. So now it's blue. And yeah, basically the sub agent will do its thing. So this is a web research agent and it will figure out what to do. What is the issue? I mean the issue is uh again version mismatch. We're using a function that doesn't exist anymore in V5. So I think Versel AI SDK massively changed stuff in the V5 which is not in the training data of these models. Okay. Yeah. See, even even the 2024, that's very bad. It's like searching stuff as 2024 even though it's August of 2025. Yikes. Okay. So, let's approve this. Get ignore. So, as you can see, I'm running three different cloud codes doing different things, but we're still on track. We're still building the same project. So, this is where like your own skill set as a human, you have to be locked in. You you cannot get distracted, right? You cannot get overwhelmed. If you do get overwhelmed, stick with one clot code. Okay, we have the get ignore in the root. Okay, so I'm say good. What is the next stepd plan mode repository? Okay, so we need to copy the repository URL. There we go. Code. Let's copy that. And I'm going to make this public repost. You can just take this. Here's the URL. What is the next step? Okay. So, I'm going to do don't ask anything for web search commands because uh those are safe. I don't want it to be like asking me every single web search. Okay, so we need to add the remote origin. Let's approve that. So cloud code is going to run this command. Get the remote ad origin. Boom. It's like ready for the next step. You know what is the next step? Okay, this guy is still doing web search. What I can do is I can do I can do this. We're going to double check it with perplexity. Boom. Let's separate this deep research on that. So, we need to stage all files and do a comet. I agree with that. You need to enjoy your first comet. You're not like a legendary legendary step in any project really. There we go. Wait, wait. Is this only doing you also stage? Wait, that's a problem unit. So this has it own G repository. Explain that note a bit more. What are the implications of that and should we remove that separate get in it from CRM app? I want everything to be a mono repo. Yeah. So I guess before when we running cloud code, it initialized a separate repo inside of the CRM app. Okay, let's delete that git file. Okay, I'm going say run a quick get status to confirm all is good. We don't want to delete any actual files. Sometimes you have to be careful when deleting like the cached representations of files that are not uh committed. Let's see what the web search guy did. So fetch content. Okay. Well, I mean, yeah, that's kind of your job, researcher. Sometimes it's faster to do um Rox research, right? So, let's see. V5 method has changed to Okay. So, I'm going to copy this. Get status. Okay. Let's go back here. I'm going to say results. Boom. Above are the latest web search results about this issue. Give me a TLDDR and and think hard about what the next step should be in terms of us fixing this issue. Think harder answer in short. Boom. Okay. Good. Do the push. We need to push it. So now if we go to our GitHub. So we have nothing here. But when it pushes. Okay. So we need to set main branch as main. Yes, proceed. Oh, we have some issues. Let's see what what's the issue. Oh, yeah, because we initiated with some default files on GitHub. So, now if we reload, we should have our own folder structure in here and we can do proper commits and I can now do a triple check to ensure no sensitive files such as env or env.local local are being tracked by it. Never hurts to double check. Okay. So, we'll say good. Now, execute this fix also. We should create a license. Give it like MIT license. Okay. Let's approve this. So, you can see I'm managing like multiple cloud codes without any issues and that counts with skill. Say good. Now, does our project have a license right now? Oh, let's research that. Fixed. So, this should be fixed. Let me check it. Okay, let's see what happens in our app. Reload. Send a message. Hey, invalid prompt. It must be a model message. So, we're probably breaking some types. I don't know. We will We will find it out. We'll find out what's the issue. Here is what the console returns. Now, also we should give it the terminal, right? And here is the backend terminal. Command J to open the terminal right here. Explain what is going on. Dash E. The project does not have a license. Okay. Okay. And we'll say in that case create a new one and make it the most um open source and permissive license. I think MIT license will be good. I mean you guys can take this project and continue upon it. Okay, let's agree with that and then we can use actually my push to GitHub command to push it. Push. I'm going to push to GitHub and we're going to push this license to GitHub and we will see that inside of GitHub this will appear on the right somewhere here. So it's going to stage the files. You can see can actually not show this repo. Close repository. We just want to see the main one. So now if we reload, let me see. There we go. MIT license on the top right. Amazing. Yeah, there's a lot of issues with the V5 change of the personal SDK. So, what I'm going to do is I'm going to do a new research. Tell me everything I need need to know about V5 of the Versel AI SDK. I'm facing a lot of different errors because my app is in V4. So, please list out all of the main differences. Be detailed. Okay, maybe we should have used the official entropic API just because I'm more familiar with that one, but it is what it is. We're going to create a new doc file. I'll say let's start by creating a new MD file in our docs folder folder. Name it v5 versel SDK.mmd. We need to document all this We're getting we're getting way too many errors for the simplicity of this and seems like the really root issue here is that again the outdated cont not the context undated training data outdated training data of the AI models. So they have a knowledge cut off in 2024 and they don't know about this V5 version. So, I'm just going to add this. Boom. Refresh it completely. And I'm going to say we can actually push that to GitHub as well. I update that file myself. Let's push that to GitHub. Okay. And close this. I say now read V5 and tell me how to properly fix the last error we were facing. Answer in short ultra think. So now we can actually do a cute command. Boom. If you hit enter, you can send the next message in advance. But the problem is that you cannot do it if there's like a bug cloud code bug. If you if I did it like after this part right when it did get add and it staged all the files it would not work because then it's running other terminal commands. You need to do it when it's running the last terminal command which sometimes you don't know if it's going to do more but you kind of need to fill it out. Okay. So we need to convert UI message to model message. Okay. Now execute this fix like a 10x engineer would see like with cloth code and perplexity these combos are matched. you you can actually build anything like anytime you get stuck you just do a perplexity deep research boom you learn all of the info you learn all the greatest latest practices and you also keep improving your cloud code setup right so this is like the the beauty of having your own sub agents your own commands your own hooks you keep improving it you keep customizing it for yourself and every week literally like every day almost you just are faster so this compounds like crazy not only do you compound your own skill set the AI tools are getting better and your own like workflows, your own promps, your own commands, sub agents, hooks are getting better. So you have like three different things compounding at the same time and that's where you just become unstoppable. So people who are on the cutting edge of AI right now and who stay on the cutting edge in 6 months and 12 months it'll be like unrecognizable with people who are just like flirting with AI, you know, they understand it's it's important. They understand like it's going to, you know, be a big thing, but like they're not all it. So, if you're watching this, the best decision you can make, be all in about AI. Be at the cutting edge. Do whatever it takes because uh you are going to save so much time. You're going to automate all of the boring in your life. You're going to give massive leverage to every single hour of work you do. What is going on here? We're getting some route, multiple errors. Okay, that's not good at all. I'm going to interrupt that. I'm going to copy this. I'm going to switch to a new cloth code. Why is this guy so stuck? Okay, whatever. I'm going to reset this guy. Clear. Say problem. Problem read V5 and propose a simple and targeted fix. Okay. Ultra. So this might be corrupted. So I'm going to do compact here. This is like too long. You know this cloth channel. Even here we can do SL compact. So, we're going to compact these two conversations. And let's proceed right here. We need to get this working. Like, this is crazy. And again, a lot of this is because I chose a text stack I'm not familiar with. I'm not using the Versale SDK uh for my startup. I'm just going straight to source. But yeah, I thought this would save us time and actually didn't because there's a massive version change in Versa SDK when they move to V5, which the models are not aware of. So yeah, we should have done even more research at the start. Okay, these are being compacted. Let's see what's happening. Okay, so the main problem is that V5 introduced different message formats for front end and back end. Front end users use chat. Back end expects model message. Well, that's um unfortunate. Okay, it should be simple here. I I say I want to do like create a new claw.md file in CRM app and make it specialized to Nex.js. You can have actually multiple nested cloud MD files and different folders in your codebase and anytime cloud code is working in those it's going to like insert those into the main system prompt. So this is really where context engineering gets crazy. We have a root one, right? So, we have cloth MD on the root level, but you can have a cloth MD file in actually wait, we have one already there. Uh, we have one there. I thought it's at the root level, but it's in this folder. So, we should probably have one in like the components folder or something. Whatever. But you get the point. You can have multiple nested cloud MD files in different folders. So, like, you know, when working with the docs, you should behave this way. When working with the components, you should behave this way. When working with the API, you should behave this way. And if you have like, okay, let's let's create one here. I think that's a good load. MD. Boom. Update load MD. Write this one. So that it has proper instructions and knowledge about the entire API folder. Keep the system prompt concise. Okay. So fix applied. Let's see. Is our app working? Let me send a message. Hey require schema. I'll put schema. We're having we're progressing because we're having different errors, but we're still running into errors. Might be again a No, it's not a back. Okay, that's interesting. We're probably Well, okay. Stream message was created. Wait, wait. Let's see what's happening. We're making progress, though. I feel like we're probably one or two errors away. Fix it. Look at the screenshot to understand the front end console. Um, copy this latest back and stuff. Here is the back end output. Explain to me what is going on. Dash E. So, yeah, let's approve this. We're going to create a dedicated Oh, continue. We're going to create a dedicated um cloud MD folder right here. So it's empty right now and not folder prompt file MD file. It's empty right now but in a few seconds we should see. So yeah, first it understood the entire API folder. Now it's going to have it in here. So anytime code is working in this API folder, it's going to have good knowledge and good understanding of it and what needs to be done. Amazing. And I'm going to do slash push to GitHub. Prepare this. Boom. We're going to push this to GitHub. Let's go here. Our fixed work. New error. Okay. Since this is another V5 issue, give me write a single concise single paragraph about the info we need um from search on the web to get the latest docs. format this like an expert in researcher. Actually we can use the we can use the system that we have read web search validator to understand how to format this single paragraph. Do not do anything else. Just give me the search query. Since we already know how the latest practice is, we can just utilize that. Boom. Boom. Let me clean this up. Okay, there we go. We have a detail search query. So, let's run that. I mean, look, it probably knows the fix, but a lot of times it doesn't hurt to check with the web. I'm going to paste it in results. I say first off um add a more add a concise summary of these search results into V5. We're going to keep building this um this markdown file and then think hard about the proper fix to the error we are facing. So first we need to improve our contact engineering and then I'm interested in making the fix. That's how you like reduce errors in the future, right? You build up your internal documentation. You understand what's happening. You create files that are reusable that you can tag. That is like the long-term play. Short-term play would just be pasting the perplexity results and say fix this, right? Maybe that works, but it's it's a hit or miss and you're not really improving your codebase. Okay, let's approve this plan. See that this gets pushed to GitHub. It did. That's good. No unstaged changes. Okay, so it updated the maron file with the most essential info. So now basically the this file is becoming more and more powerful. Anytime we tag in the future, it will have more info about the V4 V5 differences. So any error we check, any error we run into, we can quickly check is it a V5 migration issue? If it is will get solved because we have the documentation in that file. So basically we're just speeding we're making our own code base more powerful and more well doumented. So we don't have to do the same deep researches all over. We can just do one deep research, create proper documentation about it and then uh never have to do it again. All right. So seems like it's it's done. Let's see if my theory about being one or two rows away is correct. I'm going to clear up the terminal as well. Restart this npm rundev. Boom. Reload the app. Actually local host. There we go. Open the console right here. Hey, send. Okay, wait. No error. Are we getting AI response? Oh my god. Okay, so we we don't there's an issue with the text rendering, but I think we have a response somewhere. Look at this. It did streaming. So, wait, wait, wait. This is crazy. This is crazy. We might be here. I'm going to copy the whole back end. Okay. I'm going to do back end. This is like printing the use chat for every single token. That's kind of annoying. Whatever. Look at the screenshot. Looks like we are getting the token stream. However, our UI is So, we are not properly rendering the user message nor the AI message. Investigate how the why the why am I typing this? Investigate why the text isn't being displayed in the message bubbles properly and think hard about what the issue is and think about how a senior developer would fix it. The fewer lines of code the better with the ultra thing right here. So this is a issue maybe the same issue as with the user message not being rendered in the bubble. I think we are getting the tokens from infropic API. Maybe this is another like UI message v5s. Oh, it's doing web search. No, no, no. Do not do web search. Instead, tell me how to search this app on the web. Follow uh search prompt answer in short. Look, this web search is not that good inside of cloud code. It's not it doesn't compare to perplexity research. I'm going to be honest. So that's why it's it's better to just do it yourself. Let's see again what the issue is. Back end is working panel. Yeah, we're not rendering the tokens. Okay, so it it probably found the issue already, but we will confirm that the results of this. Here are the web results. Give me a TLDDR explanation of what they're saying and continue with your investigation of this issue. Sometimes like it has a tendency to overthink. So here probably should be pretty simple. It's another V5 issue. And actually I'm going to document that as well. So this CL code I'm going to do V5. Paste this in V5. Read this U web search result and think hard about which um permission we don't already have in the V5 versel markdown file. Start by reading the MD file for V5 versus SDK and then think about which of these uh new search results we don't have there and what should we add there so that our documentation is more complete. Think hard answer in short. So one cloud code is thinking about how to fix this. Another one is improving our docs. Okay. So another V5 issue that's crazy. Yeah. Yeah. So this was a basically a bad I don't want to say it was a bad like text tag decision but u maybe we should have done more research especially given the fact that you know it depends what is in the knowledge cut off and what isn't if it's something is in the training data of these AI models they're much better right like they have a really good knowledge of Python 3 that's been around for years but this this versal SDK has been updated recently okay so let's see this this is a bug again it scrolls pulls you all the way up. Okay, let's approve this so it's improving our dogs doesn't affect the functionality. Switch to our app. Oh, wait, wait, wait, wait a second. We've gotten the response. I need to need to do again. Hello. No, it was just working. What do you mean it was just working? What went wrong? What went wrong? That's crazy. One second. Hey, uncaught in promise. What? I I just saw the message. I I think you guys saw it as well, so I'm not going crazy. But wait, hopefully this close code didn't change anything. Oh, no. It Okay, it's the MD file. That's fine. That's absolutely fine. It was just working. I saw the output message but now we are getting error again. Read the screenshot e opus plan mode. Okay, this this is good. We can push this to GitHub. This documentation changed. It's fine. So this file is growing. It's already what almost 300. It's fine. Okay. I'm going to add this so it doesn't have to ask every time that it's been pushed to GitHub. Okay, I'm going to do a follow-up search on this. I don't trust this normal search in the V REL AI SDK in V5. Tell me how send message works completely. Everything about it. Okay, I want to know everything about send message. Here's the official dogs. Implement a clean and minimal fix. more info about V5. Add this into the MD file as well. Be concise. Okay, so we're extending this. What's happening here? Okay, so let's let's test again. Hey. Okay, message sticks. There we go. It's being reasoned. Amazing. Okay, create a new contact in our CRM. We don't have to print this This is very inefficient. On every single character I type in, it's doing a print. Name john do email example [email protected]. Oh, there it is. Look at this. Contact. There we go. So now it created a contact and it knew that it needed the email as well. So not only see like I told you we were like one or two eds away. So I could feel it. This is hundreds. I think I have like well over thousand hours if we combine cursor and cloth code building with AI. So I can feel when we're close and yeah we fixed the streaming and the it was already working. So now it can save contacts in our CRM. Obviously there's a lot more we can do to build upon this to finish it. It's not like a one-hour project. This will be a multi-day project to make it really good. But we have the basis right? This is the basis of AI powered CRM. So what I'm going to do, I'm going to do push to GitHub stage all files and push this fix to GitHub. Boom. Beautiful. So again, you guys can take this, you can fork it, you can build upon it. But yeah, maybe it's good that I chose the Versela SDK so that we see the issues with u clo and how you can fix them, right? and how I work with perplexity to get the list documentation of the deep research and how I'm building my own sub agents or commands or hooks, how I'm using them, how I'm adding stuff to settings.json to speed up my workflow with the safe commands and stuff like that. Yeah, there's a lot there's a lot you can do to improve your cloud code workflow and to become a 10x cloud code developer. So again, if you want me to make you a custom cloth code setup for any use case or goal you want to do, right? You want to build a size, you want to build a startup, you want to build an agency, you want to build internal AI agents to automate stuff, doesn't matter. Whatever you want to do, if you join the new society during the month of August, you will receive a custom cloth code setup with sub agents, commands, hooks, prompts, the main cloth MD context file, and the settings JSON. basically everything you need to be a top 1% cloud code user. So again, new society is going to be the first link below video. Make sure to join. This offer is only available during August. With that being said, thank you guys for watching. Hopefully you found this video helpful and I wish you a wonderful productive week. See you.