How to Use MCP Servers in Visual Studio Code

If you've been on the internet at all in the past couple of weeks, you may have seen this new concept called MCP. In this article, I'm going to show you how to use MCP servers in Visual Studio Code. And we're going to talk a little bit about what MCP is because it's a little bit confusing.

Prerequisites

First of all, you need to have VS Code Insiders at the time of this writing. At some point in the future, this will just be part of Visual Studio Code. And then you can add an MCP server just by going to the command pallet and typing MCP and clicking "add server".

Before you do that, you'll probably want to turn on, again at least at the time of this recording, the setting. If you just search for MCP, you will find "Enable discovery of model context protocol servers on this machine." Okay, so that sets you up to go in Visual Studio Code.

What is MCP?

Let's talk a minute about what MCP actually is. It does stand for Model Context Protocol, and this is the problem that it solves.

Let's say we have something like Visual Studio Code here. And then let's say we have something that we want GitHub Copilot and Visual Studio Code to know about. It could be anything; let's say it's a database, but it could be any piece of context.

The only way for Visual Studio Code to know about the database is for you to write some sort of integration between the two, and usually, this is done with an extension in Visual Studio Code. That can still be done. But what MCP does is it defines a protocol by which a client like Visual Studio Code can talk to the database.

So what is an MCP server? You can imagine it as sort of sitting in the middle. This is the MCP server. And what's confusing about this is that they're called "servers," but they're actually running on your machine. You install this thing on your machine. And all this is, is a simple program that Visual Studio Code knows how to talk to. Visual Studio Code understands this MCP API, and then this MCP server turns around and talks to the database and then returns that information back to Visual Studio Code.

That's an oversimplification. There's a lot of detail inside the MCP protocol in terms of tools and other things. But at a very simple level, this is how it works. And so you have VS Code (the client), you install the MCP server on your machine, and you can then use it from within GitHub Copilot in Visual Studio Code to talk to different things that you didn't have access to before.

So again, a little confusing. It will help if we see this in context.

Building a Game with an MCP Server

Let's start to build something here. I'm going to open up GitHub Copilot. And what we want to do is build a game. We're going to build a game called "Fly." The game is literally, we're going to play as a fly.

Now, you'll see there's this new button in Visual Studio Code that says "Select tools." And if you click on this, you see all these tools that you can use, like you can search your codebase or you can look at the terminal command, terminal last selection. And so what MCP servers do is they add additional tools to this list once you install them.

So where do you get them? You can at this point just kind of Google "MCP server." I like this one, mcp.so. It seems to be laid out really well. And one of the ones we're going to use today is Perplexity.

What is Perplexity?

If you don't know what Perplexity is, let's talk about that real quick. Perplexity is a search engine that is powered by AI. So you ask it a question, it goes out and does the search for you, and then it comes back.

For example, yesterday I was at the store and needed a Torx bit to get the seat belt off so I could replace a part on our minivan. So I asked it, "what size Torx bit do I need?" and it went through and looked at different sources and then came back and told me that I need a T50 Torx bit. This is super powerful.

This would be helpful with GitHub Copilot because when you're working with something and it's clear that the model doesn't have the latest information, we can ask Perplexity to search the web and give us the latest information to Copilot so that it can do something.

Installing the Perplexity MCP Server

Let's look at this in action. The first thing we need to do is actually install this Perplexity MCP server. Let's go over to the content to see how to install it. You can see that there are sort of two different ways. You can do it as an npm or npx package here or as a Docker container. It doesn't matter; they both do the same thing. It's just how do you want to run it on your machine.

In this case, I'm going to choose the Docker container. We could just copy and paste this into Visual Studio Code settings, but we have a UI for doing that. So let's come back here and let's add our MCP server. We're going to add a Docker image and paste the image name in. We want to allow it, this is the name, and then we're going to add it to our user settings.

When we do that, you'll see that we get settings that look almost identical to this:

{
    "mcp.servers": [
        {
            "name": "Perplexity",
            "image": "ghcr.io/perplexity-ai/mcp-server-perplexity:latest"
        }
    ]
}

It's kind of important here to look at the details. We're missing some arguments. We need the Perplexity API key. Admittedly, this is a bit rough at the moment. As MCP servers get more popular, this whole experience will likely get a whole lot better. We need our Perplexity API key.

{
    "mcp.servers": [
        {
            "name": "Perplexity",
            "image": "ghcr.io/perplexity-ai/mcp-server-perplexity:latest",
            "args": [
                "--perplexity-api-key",
                "YOUR_API_KEY"
            ]
        }
    ]
}

I've pasted in my Perplexity API key and closed the settings so that that's not exposed.

Using the Perplexity MCP Server

So how do you use this thing? Let's come over here to the sidebar, and then you'll only see these tools in agent mode. You can see now it says "10 of 11." It said 10 before. If we click on this, you'll see now that we have this Perplexity MCP server that we can use. And it says "Ask Perplexity."

Let's just click this. When we do this, this is going to start the Perplexity server sort of in the background. Remember, it's a server, but it's running on my machine. It's just a Docker container running a program that's talking to Perplexity so that Copilot doesn't have to know anything about the Perplexity API.

Now that we've done this, let's give it a prompt. Let's see how far we can get here. Let's try this:

Create a game using the Phaser game engine. The game should be called Fly. The point of the game is to control a fly as it moves through a house avoiding obstacles. The goal is to get from one side of the house to the other, and then you win the game.

All right. So it's going to go off and start working here. And let's see what the agent actually does. It's going to go because it knows what Phaser is. It's going to go right here and say, "I'm going to create a Phaser-based game called Fly," and then it's going to start adding all of the items to it.

But this isn't exactly what I want. I want it to use Perplexity. So how do we do that? I'm going to stop this and undo everything here. Let's get rid of this stuff. Let's start over.

There's a couple of different ways. One of them is that you can just come down and reference the tool directly and say @perplexity ask. In my experience, there's something wrong with this at the moment. I usually get an error when I do this.

So instead, what you can do is you can just kind of tell the AI. Because this isn't working (that's got to be a bug that will be fixed), you can just say, "Use Perplexity." The AI should be able to go ahead and pick this up now. It's smart enough to know to use tools. And that's part of the point of MCP servers: you have a bunch of them installed, and then Copilot just uses the tools that it needs.

It's going to run Perplexity ask here. You can see it's doing that. And let's see what Perplexity returns that Copilot can actually use here. What I'm hoping it'll do is look at the Phaser docs, which have changed quite a bit since the training date for the model.

Let's scroll back up while this is working and see what it actually did. It actually asked Perplexity, "What are the key components and best practices for creating a 2D game in Phaser where a family moves through a house avoiding obstacles?" And I said "fly," right? Well, we're going to get a family game, apparently.

And then this is the response from Perplexity here. It's even providing code back to Copilot. Not that Copilot needs that, but then you can see these are all of the different things that Perplexity used to get this information. It looks like it used phaser-editor2d.com, Wikipedia, a Phaser discourse group, YouTube videos, phaser.io itself, a particular news article, it's looking for collision detection, and it's looking at the GitHub repo for Phaser. So this is all context that Copilot may or may not have, depending on the training date of the model.

So let's go down here and see what's actually happening. Okay, we need to run a terminal command. We're running more commands here. So it's setting up the application.

All right, so Copilot's been cooking for a while here. And I'll scroll back up and sort of show you what it's been doing. First of all, I said it should be a fly, not a family, just to get the record straight there. And then it went down and it's been doing a lot of things. It's been pulling in, trying to resolve errors. Then it kind of said we were ready, and this is what we got, which is not anything.

So what we want to do here is repair this. Fix errors. And so what I want to do is just get these errors fixed. I'm literally just going to say, "fix the problems," because you can pass the whole problems in like this. And let's actually see what it does here. I don't know that it will use Perplexity here, but let's see if it just does on its own. It's kind of up to the AI to decide which tools it needs to use and which ones it doesn't, depending on what you tell it.

All right, so we've been cooking for a while again. Let's save all of our files. And it says that we're ready to run. I don't know if that's true. I see an error, but let's give it a try. Let's see here. How do we run this game? Let's go to the package.json. Looks like it's npm start. I wonder if I have to npm run build first. And then let's start it up and see what actually happens.

All right, so we have another error. So we just pass it back in again. We've still got an error. So let's just pass it back in. And we can actually just take and drag and drop the problems here and just say "fix."

All right. So it's done again. Let's go ahead and keep all of the changes here, which is a good idea when using agent mode. It's just been really busy doing all kinds of things, fixing errors, properly adding the Phaser import. It didn't use Perplexity again, hasn't used it again. But again, the more tools you have, the more things Copilot can use if it needs to.

So let's actually see what we've got here. Start game. "Use arrow keys to fly." I mean, it's a 2D game, and it's using shapes. But there you go. And if you hit something, you start over. And if you get to the other side, do you win? "Freedom." There you go.

Summary

So that's a very brief introduction to how to use MCP servers today in Visual Studio Code. Remember: * You do need Insiders, and you know you've got Insiders if the icon's green. * You do need to go to settings, just search for MCP, and you're just going to enable discovery of model context protocol. * And then if you're looking for MCP servers, you can go to the one I use, which is mcp.so. And there's a bunch of them in there, including things like databases, all kinds of stuff.

That's how you use MCP servers today in Visual Studio Code. And I hope that it's a little less confusing for you, and you can use them to do all kinds of amazing things with AI. It's definitely the future.