Transcription
Did you know you can supercharge your VS Code and GitHub Copilot experience with MCP integrations? Today I'm going to show you in this video how you can use them, how to install them, and how you can get the best of them with some top tips. My name's Liam Hampton. I'm a senior cloud advocate on the VS Code advocacy team here at Microsoft. Let's jump into it.
Okay, so now we're over in VS Code. I have got a little application I've been building over the past few weeks. It's a simple meal planner. You know, you can just go along, add a few meals for the days of the week. But there's a bit of a problem in it. When I click on the calendar, it doesn't seem to work. So, I need to go and create that module. But I need to create an issue first because, you know, it's not top of my list and there's a few things that I want to do first. So, the way I'm going to do this to keep context inside VS Code is I'm going to install the GitHub MCP server.
Now, the way I do that is I go over to the extensions tab over here. We can see I've got a number of MCPs installed. Now to install a new one, I'm going to click on the globe which is at the top here. Just click on that one to browse some of the MCP servers that are available which are recognized by the VS Code on the Visual Studio Code website. You can see we've got GitHub, we've got Figma, Playright, Hugging Face, a whole bunch of them actually. There's quite a few on here. You can browse through and have a little look for some yourself. I just want the GitHub MCP server. So I'm going to install GitHub or the MCP server for GitHub. It's going to take me back into Visual Studio Code and then I'm going to click on install. That is all I need to do. It's a very simple process.
Then it's going to ask me because it's automatically tried to start the server how I want to authenticate. Now I'm going to click allow because this is going to authenticate using the OAuth sequence which is used for the remote server and I'm going to click allow. So I'm going to do Liam Hampton which is my GitHub handle and straight away I have authenticated with the GitHub MCP server.
Now, if I was to run this locally, I could use a PAT, so a personal access token, and I would store it very securely inside Visual Studio Code into the um into the configuration JSON, which I can show you now actually. So, if we click on the cog and then click on show configuration, you can see here that I've got the remote server, which is just using the URL, whereas I'm actually got a perplexity server which is running locally, but I'm also using an API key. And as you can see, this key here is stored very securely inside the VS Code. So I digress. Let's go back to what we're actually doing. So let's close this down.
And I can see here that I want to create an issue on the repository. So if we go to the extension in GitHub, I can see that I don't have any issues yet. But let's go ahead and create it with GitHub Copilot. So I'm going to open up Copilot by clicking the icon at the top. This is going to open a new chat. And I'm just going to enter a prompt that says create a new issue on the repository for creating a calendar on the homepage of the application.
Now I want to make sure that I have got the MCP server selected. So I can click on the little tool picker which has a little icon on it or a little triangle because I have over 128 tools selected. Now we have got rid of the limit. So there's no limit now. Uh, it's just going to sort of impact the performance if you have more than 128 selected. But we can go down here and we can see that I've got the GitHub MCP server selected here. Now if I want to make sure that is also running. Now obviously I can go into the command palette. So I can do Command Shift and P and MCP list servers. We can see here I've got all of my MCP servers that I have installed and GitHub is down the bottom and it says it is running.
So let's go to the chat and enter this prompt. Now it might take a moment because it might need to optimize some of the tools, but it's also going to work through it. Oh, there we are. That's pretty quick, actually. And it says I'm going to create a new issue for the meal planner repository by adding a calendar to the homepage. So, we're just going to give this a second to run through and do what it's doing. As you can see here, it has realized or recognized it needs to call the MCP server for GitHub. It's basically sent off what we can sort of see as a payload for an API request to some extent. This also keeps the user in the loop. So, if I click on the drop-down list here, I can say allowing this session, allowing this workspace, or always allow. I'm just going to click continue. I'm not going to allow it to do anything in the session or workspace. There's only one issue for me here.
So, as we can see, it's gone ahead and created a new issue, issue number six. And if I go over to my sort of work pane over here, and click on refresh, we should see this issue pop up in a second. There we are. There it is. So, I can close down the chat, give myself a bit more space, and go and open up the issue that it's created on the repository for me. Here we go. It's even giving it a few labels, written out exactly what we need for it, and it's telling it, you know, these are the related files, so on and so forth. So, it's given a lot of context and it's gone off and done that itself.
Okay, so that was a really good way to show you how you can use ready-made MCP servers which are readily available for you and recognized by the Visual Studio Code team. Uh, but what if I want to actually go and create my own and use my own MCP server? Well, I've created an MCP server for LeetCode. Now, this goes off against the daily challenge. It helps me authenticate, do a whole bunch of things with a number of different tools within it. So, I'm going to show you how I use my own MCP server, how I've built that, and then install it into VS Code so I can utilize it for my own benefits as I'm going. So, this is a good way to customize your workflow to your needs if you have your own MCP server. Let's jump in.
Okay, so we're back over into VS Code now. Uh, but this time I'm in my LeetCode MCP server. So, this is one that I've built and it's got a number of tools available to me. I've got the get LeetCode daily challenge. I've got the get user profile. I've got set authentication, clear authentication, and get the authentication status. So, I've got a number of tools which I can call within this MCP server, but I'm just going to be focusing on this one here, get LeetCode daily challenge. That's a fun one. I really love to code, so I use this most days when I just fancy a little bit of a challenge.
Now, you may be wondering how you build this or how you then use this and install it into VS Code. Because if I go over to my extensions tab on the left hand side, you can see I don't actually have it installed yet. It's not really easy to see where it's to be used from. So what I have to do is I need to build the binary. So I've built the binary. So I've called it LeetCode MCP server. I mean I've got two in this folder at the moment, but we're just going to be focusing on the server one.
Now the way I want to install this is I'm going to do this myself. I'm going to open up the command palette. So Command, Shift, and P. I'm then going to type for MCP. And as you can see, you got add server, list server, show installed servers. I'm going to click on add server. For this one, it's just a standard input output. So, I'm going to do a command, which is the top one. I'm then going to point to where the binary is stored on my system. So, if I just paste in my path here to the binary, which is just into this folder, and then click enter. I'm going to give it a name. So, I'm just going to say LeetCode MCP server. Hit enter. And this is then going to ask me whether I want it globally available or in my workspace. I just want it in this workspace for now. So, I'm going to hit workspace. Then I'm going to click trust. I mean, I made it. I kind of trust myself, but just be careful with this one. MCP servers can be pretty dangerous if you're installing them just from anywhere.
You can see it's opened up or created a new file for me called MCP.json in this VS Code directory. And you can see it's running. So, it's already running over here. And if I go into my extensions, I can see that I've got my LeetCode MCP server installed.
Okay. So, now I want to open up Copilot and I want to ask it what today's daily challenge is and it will go off and hopefully call the LeetCode MCP server. So, what is today's daily challenge? Ask that question. It should be smart enough to recognize I want to call LeetCode, of which it does. It says, you know what, Liam, do you are you sure you want to run this tool of getting the LeetCode daily challenge? I'm going to click yes. I want to click continue. Then it's going to go off make this request for me and it's come back with the problem. As we can see here, it's a medium difficulty and there's the problem summary and what's expected of you to then complete that. That's up to you then as a developer to then work on that. But this just keeps it all in one context. And this is how I personally use my own MCP server to develop and have a bit of fun inside my workflow.
Okay, so just to round up, here are my two top tips for using MCP servers inside VS Code alongside GitHub Copilot. Number one, VS Code has the ability to run multiple tools in parallel, side by side, and within the same prompt. With GitHub Copilot, it can call multiple tools. A good way to use this is to actually have an own tool set for them. So group your toolings into a tool set. So for Python development, you could have a few tools which are specific to Python development and Go development or JavaScript development. Whatever it is that you are developing in, you can have a tool set specific for that and just call that single tool set rather than individually picking the tools from the tool picker itself.
And number two is if you want to share these tools across or share servers across a team or across a workspace, use an MCP.json file in the root of your directory and then you can share that and it will be pretty consistent across the team. So that is MCP in a nutshell for you. If you found this useful, please give us a follow and if you want to go check some of this out, go to code.visualstudio.com/mcp. Until next time. See you.