Copilot CLI Tutorial #8 - MCP Servers

All right, my friends. In this lesson, we're going to be taking a look at how to connect to MCP servers in the Copilot CLI to enable Copilot to interact with external services and data sources. But, first of all, for those unfamiliar with MCP, what exactly is an MCP server? Well, first of all, MCP stands for Model Context Protocol, and it basically defines a standard way for language models to communicate with external sources. Think about it. We have Copilot, right, which uses an AI model to reason and make decisions about our code and to generate new code. But, if we used an external service like GitHub or database or design tool like Figma or whatever else, then the AI model or Copilot itself has no way to communicate at the moment with those external sources. And it might be that we want it to have access to them to do things like make pull requests on our behalf on GitHub or to inspect database metadata or to pull designs from Figma before coding any feature, et cetera. So, this is where MCP servers come into play. Now, currently, we have Copilot, right, which is known in the MCP ecosystem as an MCP client. And it's through Copilot we send prompts to AI models, which then works alongside Copilot and the tools it provides to generate code and make changes locally in our project. For example, the AI model might want to create a new file, and it does so by using the tool or telling Copilot to use the tool called the create tool to do it. Now, the moment we want to give Copilot and the AI model access to an external source like Figma, for example, we need to connect Copilot to an MCP server for that source. So, in this example, we need to connect to a Figma MCP server. And that Figma server would then expose additional tools and information about that external source. For example, I think the Figma server exposes a tool called get screenshot, which then, when invoked by Copilot, allows it to take a screenshot of a design file, plus there's a bunch of other tools in the server too for different things. But the main point is that by adding an MCP server to co-pilot, we're providing the AI model with additional tools that it can choose to invoke or tell co-pilot to invoke to interact with those external sources. So, that's a very brief simplified overview of what an MCP server is and why they're useful. Now, let's try using one. Okay, so first of all, co-pilot actually comes with a couple of MCP servers already baked in and you can see those by using the slash command {forward slash} MCP. So, this command's going to show you all the MCP servers you've already added, including these ones which are pre-installed. A read-only GitHub server which allows co-pilot to do things like search and fetch issues, PRs and comments and so on and we'll see that in action in a moment. And also this IDE one which is more to do with how co-pilot interacts with and is integrated with your IDE. So, let's escape out of this screen and try using the GitHub server to list some issues currently on the remote repo which I've already added before this video. So, I'm just going to type now, can you list the issues from the remote repo? And then I can just hit enter. And by the way, for this to work, you will need to have already set up your remote repo URL in this local one. Now, if you want to learn more about that and Git and GitHub in general, I do have a whole Git and GitHub masterclass available which I will leave a link to down below the video. Anyway, co-pilot's now going to use a tool from the GitHub MCP server to find those issues and then list them right here for us. And if we look above this table, you're going to also see that co-pilot used the GitHub MCP server to do that. Awesome. Okay, so that's one example. Now, let's try another one. This time I'm going to add a new MCP server to Co-pilot and it's going to be the Figma server, which allows Co-pilot to access design information from Figma design files. So, this would be a really good server to use if you want to have Co-pilot code a page or UI component based on a design from a Figma file. The first thing I'm going to do then is head to the Figma docs for the MCP server to see how to set it up. So, when it comes to using the Figma server with the Co-pilot CLI, there's actually no step-to-step installation guide at the time of recording this, but it's still really easy to set up. All you need is the server URL and the connection type, and we can get both of these here on the Figma MCP server guide. You'll also need a Figma account as well because we'll be authenticating with our Figma account as part of the MCP setup. So, for now, just copy this server URL, which is this long thing here, and remember we'll be using HTTP for the connection type. All right. So, now we can add this MCP server by using the MCP command again, but this time we're going to add on the add token at the end and then press enter. When we do that, we can see a screen like this where we've got to fill in different fields. We can tap between them using the tab key. Shift tab goes back. So, first of all, we need to give this a name. So, we're going to call this Figma server like so. And then next, the server type. We're using HTTP for the server type, so I'm going to press three for this. And then after that, we need the server URL, which we just copied, so I'm going to paste that in. Then we can add HTTP headers if we need to for things like authorization. Uh we don't need to in this case, so let's tab to the next one. And this time, we want to specify which tools from this Figma server, this MCP server, that we want to use. Now, if you know the specific names of the tools that you'll need, you can use them here. You can write them and comma-separate them. Or if you want access to all the tools, just leave it as an asterisk. Then, we can press enter to add this server. Oh, no, we don't. We press control and S, sorry, to save it. So, control S. And then it's going to save it, but it's asking us for authentication. So, it says right here, press enter to authenticate. So, do that. And then you should see a screen like this. So, we just need to agree down here and allow access. And when we do that, we can head back to the code. So, once you've done that, you're going to see down here that authentication with Figma was successful, and we can just hit enter to continue. And when we do that, it's going to show us the MCP server listed right here. Okay, so we can start asking Copilot now to take a look at our designs and extract information about it. But in order to do that, we need to tell it exactly which design or which node on the design to look at. All right, so this is a very simple design that I've set up in Figma for some kind of about page. And we can grab nodes from this, or the entire page, and we can provide that to Copilot and say, "Look, I want you to grab this node. I want you to look at it, get all the design details from it, and implement that design in our application." So, to grab a node or the link to a node, the first thing you need to do is make sure that dev mode is selected down here. So, click on this, and then you can select any of these things. So, for example, I could select the entire design, like so, and I could get a link to this by clicking on this right here. If I wanted to grab just a single component like, I don't know, um one of these icons, I can grab that and get the link to that. Or you can select them from here as well. So, I could grab all this section and grab the link for that. I'm going to stick to the entire about page, make sure I click on that to copy the link to that node, and then I can use that in VS Code. All right, then. So, back in the Copilot session, I'm just going to say, "Can you see the following Figma design and tell me about it." So, I don't want it to implement anything just yet. Then, I'm going to paste in the design node that we just copied from Figma and I will press enter. And you can see already it's using the Figma server, the MCP server. And now it's given us a summary of the Figma design. So, it's detected it's an about page and it contains a header, our mission, our values, simplicity, progress, community, then the next section which is our story, built by writers for writers, join our community. Then, it's got some brief design notes down here, dark navy background, and it's picked up the hash codes for those, gold accent, and the inter font consistent with the existing Word Print design system, and it matches issue one in the GitHub issues that we pulled down before. So, it's kind of recognized that issue and it's kind of matched the two together. It's also asked me if we want to implement the design right here now as well. Okay, so I'm not actually going to ask Copilot to implement the design in this lesson. We're going to save that for later, but you could do that right now if you wanted to. You could just ask it to go ahead and make a new about page based on that design and it will do it. However, before we do that, I want to talk about something else in the Copilot CLI and that is sub-agents.