Setting up the MCP server in Visual Studio Code

So now we want to discover how to install, how to add and set up an MCP server in VS Code. So we're going to look at the different steps. So the requirements in order to set it up is first to have VS Code installed and then an access to GitHub Copilot. So you need a subscription to access Copilot. Then we can, from the chat Copilot interface, integrate the MCP server and then interact with this system. And of course, you have access to this public MCP registry to look up examples of MCP servers that you can easily connect to your co-pilots to combine to other capabilities, like the one with Notion that we are about to test. So you have different ways to install an MCP server. So let's look at it. So first, let's go through the steps, which is the prerequisite. So that's already done normally. Then let's see how to add the MCP server. So you can do it directly from the MCP server registry. Let's go back. You can actually look up here and then go to Install, then go here, and open your VS Code to then go through the steps. Let's go back. We can also open the extension view from the code editor. So I'm going to show you how, and then look it up, and then install it. Other options to add an MCP server, you also need to configure your workspace with an MCP JSON file so that as well it's going to be explained from Visual Studio Code. So let's go through this step. It's very easy. It's an easy process to just make your GitHub Copilot even more powerful and capable of more tasks and operations to help you out. So directly within your code editor. So here you have in the corresponding exercise files this readme file to also assist you with this step. So what we're going to do is open from here. I'm going to do Shift Command and X to open my extensions. Here it goes. So you're going to see the list of MCP servers that are already installed on my machine. What I'm going to do is, here you have Notion. This one was already added to my machine. But I'm going to show you the steps to actually install it, as if it was never done. Let's say that it's not even existing. But what you're going to do is, you're have the list of extensions and whenever you want to look up just mcp server so you go to this little icon to filter filter extensions and then select mcp servers and then from here you can look it up so you can just scroll and look at it or you can just start typing the one that you want to access and we're going to look at notion that's the one i'd like to install in this video so let's Let's click Install. Then you may need to restart your Visual Studio Code, but let's go through the different steps to install it. You're going to need to also configure VS Code with this MCP server, so you need to add an MCP JSON file. And you've got the same instructions, actually, when you go in the MCP registry. And here you're going to find instructions as to how to first set it up, then configure. You can do that also from Notion because you also need a token, a secret key to connect. We're going to take this and here you need to provide with a token. So I'm going to take this part, the whole thing, and we're going to add a new file within our project. So let's go here. It's going to be within the VS Code, where you can see settings.json. So let's create a new file. We're going to call it mcp.json. There we go. And let's paste this code. All right, so now if we want to use it, it's not going to be automatic. So let's actually go back. And we want to try something like we have a readme file. Let's say that I'd like to create a documentation using Notion. So that's something which is very interesting in a collaborative setting with other developers in a team. You want to share documentations and all the technical resources to share within the team. So let's go to GitHub Copilot and start typing. I want to create a documentation from the readme file. All right. Okay, so let's be specific. I want to create it with Notion, with Notion. All right, so it's gonna start thinking All right, so we're gonna be prompted to do some other steps because it's not done automatically So we're gonna create allow to allow to connect to the MCP server Which is Notion Here we go. So then it says that a new Notion page has been created with the contents of your readme file. So let's See if you want to import the rest of the readme and additional file. Just let me know I'm going to say yes, and I'm going to say take me to the page. So depending on the interaction that you have with your copilot, you may have it done automatically, but sometimes you have to go through the different steps. It's like a conversation. All right, so now it is allowing me to go to the page. Your documentation from the README has been already imported into Notion. So let's open it. And sometimes you may also be prompted to authenticate with Notion, and request it to also create a token because you need a secret key so this is something which is already set up on my machine but you may be prompted to go through the steps before you can actually open this page this external page we're going to be taken into the Notion website so it's been opened in a different page here in my browser so i'm just going to take you i'm going to copy and paste this link so you can actually see it here you go you see that it's been done just right now using my readme file, so it's been done automatically into MyNotion, and this is my profile, so this is my username here. All right, so this is one example that I'm showing you, but of course you can use some other examples. You can go through the list of this MZP registry to find the MZP server that could be the best suitable for your need and your use case, and then add it to your copilot and what you do is to interact as usual so within the conversation you can ask whatever task you'd like and then you're going to be then connected to the MCP server to complete one task. So the MCP model context protocol is interesting to extend the GitHub co-pilot's chats capabilities in order to leverage the capabilities of your code editor combined with co-pilots. So this is an easy way to combine AI models with tools, external systems, APIs, and other applications.