Copilot CLI Tutorial #3 - Code Changes

Okay then, so now we've got the Copilot CLI set up and we've been through a few of the built-in commands. Now I want to start actually making some code changes with it. To begin with, we're just going to start with a really simple task just so we can see the process in action without being bogged down with tons of different edits. And you can see down here by the way that I've switched my model back to Sonic 4.6, which is what I currently use for most tasks. So currently in the header component, if we open it, we have a site title. And now beneath that title, I want to add a small tagline and that's something I'm going to let Copilot now do on its own. And I know this is a really simple task that would most likely just be as easy or if not easier for us to do, but I wanted to start small, keep things simple, and then later we're going to be asking Copilot to do more complex tasks. So then, I'm going to come to the chat import and paste in the following prompt says, "Can you add a small tagline beneath the site title? You can choose what it says, but make it italic, make sure it sits below the title, and give it a small amount of space above it." Then I'm going to hit enter. Now when I do that, Copilot's going to start working on this task by exploring the code base until it finds the header component that I mentioned and within that the site title. Then it's going to hopefully make the change using the model we've got selected. All right, so at some point during this process, Copilot is going to ask us for permission to make the change to the file. We also get a diff of the changes it wants to make as well where the old stuff is in red and the new stuff is in green. And this is the default behavior of Copilot, right? Whenever it needs to change a file, make a file, or delete a file, or run a command, or a script, or even just search the internet for documentation or some resource or other, it's going to ask us for permission to do that thing first of all. So right here we've got three options we can choose from. Yes, uh yes and approve all file operations to the uh for the rest of the session, and no and then tell Copilot what to do differently. We can also press escape to cancel the whole thing and go back to the chat. So if we just choose yes, then it's going to approve this one file action, but the next time Copilot wants to edit or make or delete another file, it's going to ask us again. If we select the second option, then for the rest of this chat session, Copilot won't ask us for any file permissions again, and it's going to freely make edits or make new files, and even delete files when we ask it to do a task that includes those kind of actions. For now, I'm just going to select the top option and let Copilot carry on just this once with the changes it wants to make. And again, right here, I'm just going to select yes because it wants to make a change to the CSS file. All right, so let's just take a little look at what it's done then. I'm going to open this header file, and we can see this new tagline right here. It says, "Write more, think less, just sprint." All right, and it's also got a class of tagline. It also added some CSS down here, I think. Yep. So, we've got the CSS rules down here. Now, I don't think there's any need to view this in a browser because it was a really, really simple change, and everything, to be honest, looks all right to me. It did the job well. All right, so that was a simple change, right? But most of the time, you're probably going to be working on more extensive changes, uh like making new components, or even multiple components that work together. So, now we'll move on and ask Copilot to do something which is a little bit more involved, and it's going to involve a few more steps. Now, before we start this next task, I want to show you a component which I've already prepped for it inside the components folder called word count input. And notice, this time, it's not an Astro component. Instead, it's a React component which we're using as a client island in this application so that we can have some front-end interactivity uh and state, and that's why it has this .tsx extension. Now, if this is going over your head and you want to learn more about Astro, I've recently just uploaded a whole crash course about it to the channel. So, I will leave a link to that down below. Anyway, this component is completely empty at the moment, but we nest it into the index page of the application. Now, ultimately, I want this component to allow users to enter their daily word count, hit enter, and then that figure gets stored in local storage. So, we're going to start that feature now by pasting in the following prompt. Let's build out the React Island component, so it's an input with a label above it asking how many words the user has written today. Uh submitting the form in brackets hitting enter should fire a callback to just log the number to the console for now, and then clear the input field afterwards. Keep the styles consistent with the rest of the site. Use a CSS module to style the components. Now, if I was to hit enter now, then Copilot would figure out the changes it needed to make and then ask for permission to make those changes. And that could be multiple times if it needed to use different tools to finish the job. Also, it might write code that fails at build time or leads to other errors, and then we'd have to have a back and forth with Copilot to fix the problems. So, instead, whenever you're giving Copilot a task with a wider scope, you could choose to have that task carried out in something called autopilot mode. And you can activate autopilot mode by holding shift and then pressing tab twice. Pressing tab once takes you into plan mode, twice takes you into the autopilot mode. And you can always tell you're in autopilot mode by the green borders around the chat input. Anyway, in autopilot mode, Copilot is going to iterate on the task until it's fully completed, including running the build command and testing if the app runs correctly. So, if I hit enter now, then because this is the first time I'm using autopilot in this session, it's going to ask me once to give it permission to make changes and use tools autonomously, which for the most part I'd recommend selecting. Otherwise, you'll have to keep granting permissions manually as it works on the task, and it kind of defeats the point of autopilot in my opinion. So, let's allow it now and let it do its thing. And I'm going to speed the video up now until it's finished, but once it's done, I'll come back and we'll go through the code together. All right, then. So, you can see it's done all that, and it also built the Astro project just to make sure it built correctly, which it does. All right. So, it says down here as well, it's created this file, this module word count import.module.css file for the styling, and then it's updated this right here as well, this component. So, let's go and take a look at that first of all. If we open this component, we can see it's now filled out a lot of this stuff, and it's actually using this old form event thing right here, which is deprecated. But, I'm going to keep it as is because I know that still works. And yeah, that looks all right. So, we have a submit handler right here, which is going to log out the number of words we have written today after we enter the form and press enter. Okay, so that's done. I'm going to also look at the CSS file right here. Okay, yeah. So, quite a lot of CSS there. Now, I want to preview this in a browser. Okay, so that actually looks okay. We've got the label above the input right here, and if we type in a number, let's just say 500, and press enter, it says words written today 500. Awesome. Also, this is the change we made before, the tagline, and it says it's just beneath the title, and that looks pretty good, too. Okay, then. So, now we've seen how to make changes, use autopilot mode, and also grant permissions to Copilot when it's working on those changes. There's just a couple more things I want to show you before we finish this lesson. The first one is how to clear all permissions you've allowed so far for the current session, for example, file edits, web searches, etc. And to do that, all we need to do is run the command reset allowed tools, and that revokes them all, which means the next time Copilot tries to make changes, it's going to again ask you for permission. The last thing I want to show you is how to enter into bash mode, where we can execute regular terminal commands like Git commands, for example. And to do that, we just need to type an exclamation mark. When we do that, we should see the chat window turn yellow, and it says down here that we're in shell mode. So, now, if I was happy with these changes, I could run maybe a git add command followed by a dot add all the changes and when I hit enter it runs that command and then it takes me out of shell mode. So, to run another command, I could just type an exclamation mark again. Then I could type git commit, then maybe use the M flag to add a commit message and then in quotes something like create word input. And then I could just hit enter. All right? So, now we've seen how to make changes plus a couple of different modes as well. In the next lesson, we're going to talk about custom instructions.