Copilot CLI Tutorial #9 - Custom Agents

Okay, then my friends. In this lesson, we're going to talk about something called sub-agents or as they're also known within the Copilot ecosystem, custom agents. And we'll also make our own sub-agent as well. So then, what is a sub-agent and why would we want to use them? And first of all, what is an agent in general? Well, in the world of agentic coding, an agent is some kind of program powered by AI models which can use tools to autonomously work by making new files, generating code, editing code, building the application, checking for errors, and all that jazz. So, by definition, Copilot itself right here is a coding agent because it's powered by AI models and it can do all of those different things. Now, a sub-agent is an agent within that program which is specialized in one particular area. And then, the main coding agent, Copilot in this case, can delegate tasks to the sub-agent autonomously when it needs to. For example, Copilot comes fully baked with a few different sub-agents or custom agents as they call them. The first one is the explore agent which is for performing code base analysis. So, that anytime Copilot needs to understand your code base, it's going to invoke this explore sub-agent to do that. The second one is the task agent which specializes in running commands like build commands and then reporting back on those to the main agent. Uh the third one is the general purpose agent which is designed to run more complex multi-step tasks that need a lot of tools and reasoning. Uh we've got a code review agent right here whose specialty is performing code reviews and highlighting any priority issues if it finds them. We've also got a research agent right here for performing research and a rubber duck agent for a second opinion on Copilot's own plans, code, and tests. So, when you're using the Copilot CLI as normal, you'll probably see some of these custom agents being called upon automatically from time to time in the sessions as Copilot works. So then, now we know what sub-agents or custom agents are, let's now answer the question why use them at all. Why can't the main agent do all of these different specialized tasks instead? And technically, it can. But there's a few main benefits of utilizing sub-agents in my opinion, and a lot of other people's opinions as well, which is why they're there. Uh first, they run in their own context window, meaning all the work they do and the reasoning they go through doesn't bloat the main context window of your session, and therefore your context window doesn't fill as quickly. Second, they have highly specific and detailed instructions about how they should carry out the work, whereas the main coding agent doesn't have that added detail, so oftentimes they excel at the task they're designed for. And third, sub-agents can run in parallel with one another, meaning that Copilot can delegate tasks to two or three sub-agents, and they can all run at once. And we don't have to then wait for each one to finish before moving on to the next one. So, by using them, we get a much more efficient process. Now, there's no doubt other benefits as well, but these are the ones that I've noticed the most. Okay then, so now we know why we would use a sub-agent. Let's try making one in this lesson. So, we're going to make a design extractor sub-agent whose job it is is going to be to look at a Figma design, extract some design information, and then implement the design in this particular project and this text stack, taking into consideration how it's all structured. So, how do we make one then? Well, the easiest way is to use the agent command. And when we do that, we can then select the first option, which is to create a new agent. And when we do that, we get two options: to create a project-level agent, live in the .github folder in this repository, and the agent will only then be available for this project, or to create a user-level agent, which is created in the .copilot folder in your home directory. And that agent is then accessible to all projects on your computer. I'm going to select the project option because I just want this agent to be available for this one project. Then we can choose to either create it with Copilot's help or completely on our own. Now, when we choose this second option, we literally have to write the entire agent instructions ourselves, which is fine if you want to do that, especially if the agent you're building requires really specific instructions. But, a lot of the time what I do is I have Copilot help me generate the agents begin with, and then I can just edit the instructions where I need to. And I find that much quicker and easier for me in most cases. So, let's choose that first option. And then on the next screen, we're asked to provide a summary about the agent including what it does and when it should be used. And I'm just going to paste in my summary, which says an agent that extracts design information, e.g., colors, font sizes, shapes, spacing, and other styles from a Figma node or designs using the Figma MCP server. It should use the design information to implement the design in the current project taking into consideration the project stack and architecture. It should be used whenever a user asks for a Figma design or node to be used and provides a link to that node. Then, I'm going to hit enter. And when I do that, Copilot's going to start generating the custom agent for us based on that summary. Okay, so at some point then, when it's done, it's going to tell us the name of the agent and how many characters make up the agent instructions, and then it gives us a few options. We can continue, which then makes the file for this agent and sticks inside the dot GitHub folder in the project. We can review the content if we want to before we commit to making the file. We can try regenerate the agent if we didn't like the content, and we could also quit if we wanted to as well. For now, I'm going to select continue, and then next we need to decide which tools we want to give our agent access to. So, we could allow all tools, or we could come down here and select by category, which is what I'm going to do. And then we can just turn off any tool categories we want to disable for this agent. So, I don't want this agent to have shell access, so I'll hit space to turn that off because it shouldn't need that. I am keeping edit and read file so because I do want it to base its implementation on the current project and it may need to read files to get that context and also it needs to edit files to make whatever component we want as well. And also I'm going to keep the rest of the tools on because I don't mind if they get used. So now I'm going to press enter to continue and when I do that Copilot's going to make that new custom agent file for us inside the .github folder and then inside the agents folder right here. And you can see this file is just a markdown file with this added .agent bit before the .md extension which just identifies this as a custom agent. And if we open the file, we're going to see some front matter at the top before a description, a name, and the allowed tools. And then below that we've got some detailed instructions about how this agent should work. Now, I'm not going to read through all of this now because that would take too long and I'm sure you don't want to sit here and watch me read it as well. So instead, let's try it out if it works. Okay, so like always, I've restarted the Copilot session to make sure it's aware of that new agent and I've also made a commit as well. Next then, I'm going to ask it to create an about page using the Figma design I made. So let's paste in this prompt that says, "Can you make a new about page based on this design in Figma?" And then we'll leave the link. Now you can explicitly ask it to use the custom agent if you wish, but really it should automatically invoke it when needed. However, I have noticed that sometimes it doesn't currently do that. So I'm going to add at the end of this to use the Figma agent to do this. All right? And in fact, I'm going to say right here Figma custom agents. And then in brackets, not the skill because sometimes it gets confused. I've done this in the past where I've made a custom agent, I've said use the agent and then it looks for a skill instead of the agent itself. So, I'm going to press enter now. I'm going to keep my fingers crossed and hope this works. So, first of all, enable all permissions. And then let's see what happens. All right. So, you can see now it has used this Figma design implementer. So, it's launched that implementer agent to build the about page. It's going to fetch the Figma design, study the existing code base patterns, implement the page at this route, and then verify the build passes. Awesome. All right. So, now it said it's completed. It's created the about page and it's given a quick summary of that page. So, let's close this. Just take a very quick look first of all before we preview in a browser. Here it is. Okay. So, we have the base layout has been used. Awesome. Then we have this div to wrap everything. We've got the hero section at the top. Uh the mission, the values. Uh the story. Built by writers, etc. etc. etc. And some styles. Okay. So, let's just preview this now in a browser. All right then. So, here it is. This is the new about page. And I've got to say that looks almost identical to this. All right? So, some of the colors are slightly different because what it's done is changed them to match the golds that we've used. So, it's been clever about that. Instead of this yellow, uh it's changed the font to match the font that we use like for this for the title. Uh but overall, it's a pretty good replica. I really like that. Awesome. So, there we go, my friends. That is how we create a custom agent and use a custom agent.