Copilot CLI Tutorial #5 - Context Management

All right, then my friends. In this lesson, we're going to be talking about something called context and what that means when you're using the Copilot CLI. So, context is a concept which has pretty much been around to a genetic coding agent since they were first being used. And unless you've barely touched AI coding tools before, you're probably going to be at least slightly familiar with what it means. So, in a nutshell, context refers to the wider frame of reference to a prompt or instruction that we send to the AI model, right? As a comparison, if I just issued a command to you which was, "Can you tidy it?" you probably wouldn't know what you had to tidy, right? But if I added the context of pointing to the thing I wanted you to tidy, then you would know that the thing I'm pointing to is what you should tidy. So, that added context makes it easier for you to understand the prompt, right? The same is true for any prompt we send to AI using a genetic coding tools like Copilot. If I just said to Copilot, "Update the copyright notice," then it's going to have to search for the different places in the application where that is, and it might not catch them all. However, if we added the components where the copyright notice was as context to the prompt, it could easily focus its efforts on just updating those and it wouldn't have to worry about finding them. So, let's try adding a prompt then which also adds a file as context to the prompt so that Copilot can more efficiently focus on the task instead of rooting for where the changes need to be made. So, I'm already in autopilot mode and I'm going to say first of all, in and then I'll type an at sign, which is how we add a file as context to the prompt. And then we can just start typing the file name like word count input. And as we type that, Copilot's going to do a fuzzy search to show us any files which match that file name, and we can just key through those and press tab on the right one. When we do that, it's going to add the whole file path to the components in this prompt, which is now added as context, right? Okay, so now I just want to paste in the rest of the prompt which says, "Save the word count to local storage when submitted. It should save the word count as an object inside an array where each day has its own object. The object should have a date property which should be today's date and a word count property which is the number of words they submitted. If today's date is already present on an object, then don't add a new one. Just replace the word count of the object with today's date." Then I'm going to send this prompt off and let Copilot do his thing. All right, so it looks as though the work is done and it's given us a little summary of what it has done right here. So, let's go to the component and take a look. I'm going to open this word count input right here and close these things to give us a bit more real estate. So, we can see we've got now this interface which is a word entry up here. Um we have the storage key which is how we're storing it in local storage. And you can see for each thing that we save, it has a date and a word count. All right, so we've got this function save word counts which takes in the counts and it creates the new dates. Uh it gets the item and then it creates the entries based on this thing right here. Let's have a look based on this interface word entry. So, it basically looks for the current entries and stores them in this constant. If there's no entries, then we get an empty array. All right, so then we're looking for the existing entry. So, if there's already one today, then we didn't want to create a new one, right? We just wanted to update it. So, that's what we're doing here and then we're setting the item again at the bottom. Down here, we're calling that function save word count right here and then we're resetting the form as normal. So, before we were just logging to the console the word count, I think, but now we uh updating local storage instead. Awesome. So, let's see if this works in the browser. All right, so I've just reloaded the page and I've gone to the application tab and then to the local storage and you can see there's nothing in local storage at the moment. However, let me type in a number now like 500 and hopefully we can see now we've got this word sprint entries key and then over here is the value is an array and as the first object we've got today's date and then the word count. Awesome. Now, let's try adding a different number like 1,000 because remember it shouldn't create a new object, it should just update the current one right here. So, let's press enter again and yet it does the job. Awesome. Okay, so another benefit of adding files as context to a prompt is that we're not just limited to adding code files. We can add text files or even media files like images and that means if we have an image of some kind of design that we'd like to use for a component, we could add that image as context and Copilot could use it when coding to make the component look as close as possible to whatever image we attach. So, I've already added an image file to the public folder and in fact this should be in your public folder too if you're using the course files because I added it to the start project I think. And now what I'm going to do is come to the chat import and type at to add a file as context and then I'm going to start writing the file name which is chart.png. And when I see that down here, I'm just going to hit tab on it which then adds the image as context to this prompt. Then I'm going to type the following. Can you flesh out? Then I'll add another at sign to add another file to context which we can do. We can add multiple files to context and this is going to be the weekly stats file. So, I'll just start typing that out and then I'm going to select it from the search options down here. All right, so then I'm going to paste in the rest of the prompt which says so that it looks like the attached chart image, you should pull the seven most recent days from local storage. If there are days not present, just use zero for those days on the chart for the word count. Put the most recent day at the top and also re-fetch the data whenever the word count input form gets submitted. Then I'm going to hit enter and let Copilot do its thing and hopefully the result is going to look something like the image we added as context. All right then, so I went ahead and I added some more dates into local storage just so we got some more data and you can see that now we have this chart. It doesn't look spot on, but it looks pretty good. It almost matches what the image was that we provided as context. The only thing missing was that line down here, but I'm really not bothered about that. And also let's just make sure the functionality is still working. So I'm just going to add in today's date which we today's number which we currently have set to 200. I'm going to make it 750 instead and then press enter and you can see that now it updates in real time. Awesome. Okay, so now we know how to add context to prompts. I quickly want to talk about the context window which is essentially how much context or information a model can hold at once. And the amount varies from model to model. Some have context windows and some have really large context windows. And the bigger the window, the more context a model can hold essentially. Now the stuff that fills up that context window are any files that we manually add as context, the chat history itself including your prompts and the model's responses, things like tools and skills and MCP servers which we're going to talk about later. They all make up the context as well. So if you're having a really large chat session, then normally the AI model would lose context of all the messages and information because they drop out of the window. However, tools like Copilot add features which combat this and allow you to manage your session context more effectively. So first then, let me show you how to view the current context window of a session which we can do by using the context command. So when I do that, we're going to see this grid diagram right here that shows my current window and how much of it is filled and by what. Also, you can see that I'm using the Sonic model, which has a window size of 160,000 tokens, and I've already used a bunch of those. And those are broken down right here. So, the more prompts you send, and the more tools that get added, and the more responses you get back, the more this window is going to fill up. And when it reaches 80% capacity, Copilot automatically steps in to reduce the use space by compacting the entire session's history into a much smaller summary, which means we can carry on with the same session without the model losing too much information about what's been done so far. You can also manually ask Copilot to compact your session by running the compact command as well, which I'm not going to do now because I've got a lot of free space left. All right, then. So, there's one more thing I want to show you in this lesson, and that is how to resume older sessions. Because you might go away from your code for a little bit, and you might close VS Code, and when you come back, you want to resume that session, right? So, what I'm going to do is do that is first of all, exit out of this current one, and press enter. And then this time I will write Copilot, but we will add on the resume flag using a double dash. And when we press enter this time, we're going to get a list of all the previous sessions that we've had with Copilot. And I've got a lot uh because I've been working with Copilot quite a lot outside of this tutorial series as well. So, we can see this is the one that we were just in, uh but we've got loads more down here, including some remote ones, which we're going to talk about later. And also, you can filter these by local and remote as well. So, these are all the local ones, and these are remote ones. And I'm just pressing left and right on my keypad to go through those. All right. So, if we want to start one up again, we can just press enter. And then we are placed directly back into that session, and we can carry on. Also, if we go back to that screen, I'm going to say Copilot resume again, like so. And when we see the list, we can see these things at the bottom. So, if you've got a lot of sessions like me, you can press a forward slash to start searching for keywords and you can search through them or if I press escape, we can refresh if there were more sessions. We can delete sessions by pressing an X on something. So, I could come down here and just press X on this one and I could delete it. We can sort them using S or we can escape the whole thing by pressing escape. All right, and then we go back into a brand new session. All right then, so I think that's about it for this lesson. In the next lesson, we're going to talk about another feature of Copilot which is plan mode.