WEBVTT 00:00:00.000 --> 00:00:05.200 Cloud Code powered by the new Cloud four models produces the best AI code I've seen yet. 00:00:05.440 --> 00:00:16.935 But it does run-in the terminal, which means it can be a bit intimidating at first. There's also a few quirks. So in this video, I'll show you the top 10 essential tips you need to know to get the most of Cloud Code. Let's go. 00:00:18.935 --> 00:00:29.600 So I'm logged in to Cloud Code. And if you ever done software development before, you're gonna know that a little bit of planning goes a long way. And Cloud is a secret way to do this. So if you go shift tab, 00:00:29.840 --> 00:00:33.040 you see in the bottom there, it's gonna switch to auto edits, edit on. 00:00:33.600 --> 00:00:36.480 Do it one more time, and that's gonna go to planning mode on. 00:00:36.800 --> 00:00:40.560 And what this mode does is it's not gonna update your code at all. It's just gonna do planning. 00:00:41.505 --> 00:00:50.065 So let's put in your plan to build a Shopify application that enhances merchants product descriptions with AI. And in the planning mode, it's gonna start doing some web searches usually, 00:00:50.545 --> 00:00:58.560 which is great because then your latest information on whatever you're trying to plan to build. Know it does it much more in the planning mode than it does in normal mode, 00:00:59.040 --> 00:01:08.000 so that's a really good reason to use it. Then at the end, it gives you a report once in planning mode. So it's gonna tell you the project structure and technology stack to use, what it recommends, 00:01:08.345 --> 00:01:16.505 core features of this application, implementation steps, all that kind of good stuff. And then at the end of this game, we'd like to proceed. You can actually start building it, 00:01:16.905 --> 00:01:18.745 or you can say no, keep planning, 00:01:19.065 --> 00:01:21.785 and you get it right from there, staying in planning mode. 00:01:22.320 --> 00:01:30.080 This is also great for adding a new feature to an application. And then when you're ready to leave, just shift tab again, and you go back to back to normal mode. 00:01:32.160 --> 00:01:51.255 You can actually add images directly in the Clog code. It's a really powerful feature, but there's a bit of a trick to it. So let's take this application I have built here, and say we wanna get Clog code to analyze it and maybe add a feature. So I could just go take a screenshot of it, and now I have a copy to my clipboard. And then in Clog code, you'd think on a Mac would just be your normal command v. 00:01:52.740 --> 00:01:54.340 Click on that, nothing happens. 00:01:54.660 --> 00:01:58.020 The trick is you actually have to do a control v, 00:01:58.260 --> 00:02:00.180 which is counterintuitive. 00:02:01.220 --> 00:02:21.285 When I do that, now image one comes up. So it doesn't give you a preview or anything, but when you see, like, image number one, that's the image you just copied from your clipboard. I haven't tried it on Windows yet. It might be the same kind of trick. Maybe it's the Windows key or something, but watch out for that. But once you do get it in here, it's very powerful. It's just, like, do an analysis of this application's UI, and then what enhancements would you recommend? 00:02:21.765 --> 00:02:27.590 And I find this very useful for just looking at bugs in a UI or just adding a feature, adding a button somewhere. 00:02:28.070 --> 00:02:32.390 It actually is very good at reading the image. And there we go. It gives us some functionality enhancements. 00:02:32.790 --> 00:02:44.195 These are a couple of things I actually thinking about into the application, so it's good that it picked this up, like directions integration and store hours, stuff like that. Definitely check out how Cloud Code can read images. It does a really good job. 00:02:46.995 --> 00:02:52.150 One really powerful command that I think is a bit misunderstood and overlooked is the init command. 00:02:52.710 --> 00:02:58.710 So if you're in your project and you go to init, what it's gonna do is look through all the files in that project 00:02:59.110 --> 00:03:03.590 and write a claud dot m d file or markdown file. And it'll give you a comprehensive 00:03:03.955 --> 00:03:07.075 look at your whole project. It'll give you coding standards, 00:03:07.475 --> 00:03:23.600 technologies used, etcetera. And then we see it create the claw dot m d file in this directory. And then, like I said, it gives you the core components, data flow, all that kind of good stuff. And I've been doing software development for a long time. This is some of the best kinda lightweight documentation you can get, especially for a smaller code base. 00:03:23.920 --> 00:03:27.360 But the really interesting thing is it takes this Claude dot MD file, 00:03:27.680 --> 00:03:38.235 and every time you do a new chat or start a new session with Claude code, it puts this into the context. So if you put this project in the side for, say, six months, came back to Cloud Code later, 00:03:38.475 --> 00:03:42.075 it would actually bring in all this and remember all this as context, 00:03:42.395 --> 00:03:49.860 which is a nice head start. But, also, you can add on to this yourself. So if there's things you want Cloud Code to know when it launches up for this project, 00:03:50.100 --> 00:03:53.220 this is the place to do it. This is kinda like cursor rules, basically. 00:03:55.380 --> 00:03:57.220 If you're used to doing your coding in a code editor, 00:03:57.715 --> 00:04:02.835 one thing that will really help is if you integrate a code editor with Cloud Code, so you're not always in the terminal. 00:04:03.075 --> 00:04:09.875 It's really easy to do once you install Cloud Code and it detects you have an IDE, it actually automatically installs it. There's also an IDE command you can run, 00:04:10.990 --> 00:04:20.110 and that'll tell you what IDs you have and connect to it from there. Once you have it connected, it's gonna tell you what file you're in. And then it has two way communication. So if I highlight some code, 00:04:20.910 --> 00:04:27.085 it's gonna say 12 lines selected. So it's just targeting that code to make changes on. It also lets you visually see the differences between 00:04:27.245 --> 00:04:28.685 a code change you're making. 00:04:31.005 --> 00:04:38.365 So once you have Cloud Code hooked up with your IDE, in this case, have Cursor, the next tip is to actually keep Cloud Code 00:04:38.660 --> 00:04:54.260 and Cursor or Versus Code, whatever you're using for your IDE, in a separate window. It's gonna make it such a nice experience to code in. As to do that, all you have to do is just when you have Cloud Code up, you can just right click on that terminal and say move into new window. Now you just move that to your second monitor and really do some vibe coding. 00:04:56.675 --> 00:05:06.515 As well as using the built in commands in Cloud Code, you can actually create your own and they can do whatever you want and they're very useful. So to do that, we'll create a new directory. So you do do a make directory 00:05:06.675 --> 00:05:14.250 under dot Cloud and then you call it commands. And then you create the commands by just simply creating markdown files. That's what I'm gonna call doc dot m d. 00:05:14.970 --> 00:05:22.090 And then inside of it, you can put your arguments. So I'm gonna say create clear thorough documentation for the arguments. That's gonna be the files we pass in. 00:05:22.735 --> 00:05:25.215 Then include a description, usage examples, 00:05:25.535 --> 00:05:29.695 and important notes for developers. And once that's created, you can just do slash project 00:05:29.775 --> 00:05:43.790 colon and then the name of the command, so in this case doc. And then passing your arguments, so we'll pass in store locator dot html. So now it's reading that input parameters. You can make many arguments for whatever you think you can make up in terms of a command that's useful to you. 00:05:44.110 --> 00:05:45.470 So it's gonna read through that. 00:05:46.590 --> 00:05:52.315 And then it just gives you what you asked for basically in the prompt. So this case is a really nice piece of documentation 00:05:52.315 --> 00:05:58.235 describing this particular file. I mean, the sky's the limit what we can do with these custom commands, so they're gonna save you a lot of time. 00:06:00.555 --> 00:06:04.350 Cloud Code actually has some keywords that tell it how much to think, 00:06:04.670 --> 00:06:09.550 and they all have the word of think in them. So if you say think, it's actually gonna reason more, 00:06:09.790 --> 00:06:12.190 spend more time, chew more tokens, 00:06:12.430 --> 00:06:22.865 all the way up to ultra think, which if it sees that word, it's really gonna grind away and try to give you the very best answer. Let's try out let's just say UltraThink, the best way to package this Shopify application, 00:06:23.105 --> 00:06:41.110 then merchants can deploy it. And then it came back with the answer. But you'll notice in this case, the gray text is all the thinking tokens it used along the way. Definitely very useful to know in certain situations. If you're into AI software development like me, make sure you subscribe to my newsletter, the AI unleash news. It's the first link in the description, and I hope to see you there. 00:06:43.270 --> 00:06:46.230 I think most people know that if cloud's going in the wrong direction, 00:06:47.145 --> 00:06:51.625 like, it's not really following the prompt or you can just see right away it's kinda doing the wrong thing. 00:06:51.945 --> 00:06:55.945 If you just hit the escape key in the middle, then anytime you're gonna interrupt it. 00:06:56.505 --> 00:07:00.105 But what you can also do, which is very useful, is if you hit the escape key twice, 00:07:00.900 --> 00:07:03.460 it's gonna give you all the previous messages you had. 00:07:03.860 --> 00:07:07.380 And then you can go back to the one they interrupted, say. 00:07:07.700 --> 00:07:23.735 And it's gonna clear the history and go back to that prompt, which is a nice clearing way basically to fork the conversation, get it back on track to what you actually want it to be. One thing to keep in mind though is if you do do auto edits and it and they were accepted already, and then you just press escape key and then you go back, it's not gonna 00:07:24.135 --> 00:07:26.215 revoke those and go back to this breakpoint, 00:07:26.615 --> 00:07:28.535 but it will take the conversation to this point. 00:07:31.370 --> 00:07:36.090 Cloud Code can look at websites and do web searches. It just doesn't do it very often, I've noticed. 00:07:36.570 --> 00:07:40.170 Except for that is when you go into planning mode. But say you're just doing coding. 00:07:40.330 --> 00:07:49.545 You can actually put in URLs and it will go and look at them. So I'm say make this application conform to these style guides. Then I'm gonna paste in the Shopify application design guidelines. 00:07:49.625 --> 00:07:56.345 And now it's gonna go out and actually fetch all the content from that website. So this is a great way to just bring in documentation, the latest documentation 00:07:57.280 --> 00:08:08.480 you have into Cloud Code. But now you see it's gone out to that website, come back with very specific things to do to make it conform with the style guidelines. So, for example, updating the typography to match the Shopify 00:08:08.480 --> 00:08:13.325 admin interface. So it's really got all the great information we need here. Now it's gonna update the code. 00:08:15.565 --> 00:08:34.710 Alright. We're down to the last one and I find this one so useful. I use it all the time. You can actually run Claude code in headless mode, which means it doesn't actually load up the UI or anything. So check it out. You can just say clod in any terminal. You say clod dash p for headless. That's the headless mode switch. Let's ask the question, what is the capital of Slovakia? 00:08:34.870 --> 00:08:37.910 It's just going to return the response to me in the command line. 00:08:38.310 --> 00:08:42.155 So what this means, we can use it all kinds of different places, pipe it to different files, 00:08:42.715 --> 00:08:44.315 use it to look at images, 00:08:44.555 --> 00:09:31.630 all kinds of useful functionality just by using the claw dash p command. So check out this much more useful example. If I run an NPM audit, which is gonna tell me all the vulnerabilities with all the packers I have in my application, then take the results of that, pass them to Claude, so I can do the Claude dash p again for the headless mode, and then ask it to prioritize these security vulnerabilities and describe them what's critical fixes needed, and then pipe all that to vulnerabilities dot m d, which will a markdown file which will have all that information. Now it generated this vulnerabilities file, which gives me all the critical things I need to do, like, right away. For example, this one is a Next. J s authorization bypass vulnerability. So I have to get that figured out right away. And then it lists the high priority and low priority from there. So I'm sure your head's spinning all the different places you could use Clog code in headless mode. It's such a powerful tool that add any script, 00:09:32.030 --> 00:09:45.015 any kind of workflow. I hope you learned a thing or two. Clock code is great, and I'm do lots of videos on it coming up, as well as everything else around AI software development. So if you're into that, make sure you subscribe to the channel. And I hope you have an amazing day. I'll talk to you in the next one.