04 Vscode

Consuming a server from GitHub Copilot Agent mode

Visual Studio Code and GitHub Copilot can act as a client and consume an MCP Server.

Why would we want to do that you might ask?

Well, that means whatever features the MCP Server has can now be used from within your IDE.

Imagine you adding for example GitHub's MCP server, this would allow for controlling GitHub via prompts over typing specific commands in the terminal.

Or imagine anything in general that could improve your developer experience all controlled by natural language.

Now you start to see the win right?

Overview

This lesson covers how to use Visual Studio Code and GitHub Copilot's Agent mode as a client for your MCP Server.

Learning Objectives

By the end of this lesson, you will be able to:

Usage

You can control your MCP server in two different ways:

To add an MCP server to your user profile, use the --add-mcp command line option, and provide the JSON server configuration in the form {\"name\":\"server-name\",\"command\":...}.

```

code --add-mcp "{\"name\":\"my-server\",\"command\": \"uvx\",\"args\": [\"mcp-server-fetch\"]}"

```

Screenshots

Let's talk more about how we use the visual interface in the next sections.

Approach

Here's how we need to approach this at high level:

Great, now that we understand the flow, let's try use an MCP Server through Visual Studio Code through an exercise.

Exercise: Consuming a server

In this exercise, we will configure Visual Studio Code to find your MCP server so that it can be used from GitHub Copilot Chat interface.

-0- Prestep, enable MCP Server discovery

You may need to enable discovery of MCP Servers.

1. Go to File -> Preferences -> Settings in Visual Studio Code.

1. Search for "MCP" and enable chat.mcp.discovery.enabled in the settings.json file.

-1- Create config file

Start by creating a config file in your project root, you will need a file called MCP.json and to place it in a folder called .vscode. It should look like so:

.vscode

|-- mcp.json

Next, let's see how we can add a server entry.

-2- Configure a server

Add the following content to *mcp.json*:

{

    "inputs": [],

    "servers": {

       "hello-mcp": {

           "command": "node",

           "args": [

               "build/index.js"

           ]

       }

    }

}

Here's a simple example above how to start a server written in Node.js, for other runtimes point out the proper command for starting the server using command and args.

-3- Start the server

Now that you've added an entry, let's start the server:

1. Locate your entry in *mcp.json* and make sure you find the "play" icon:

!Starting server in Visual Studio Code

1.

Click the "play" icon, you should see the tools icon in the GitHub Copilot Chat increase the number of available tools.

If you click said tools icon, you will see a list of registered tools.

You can check/uncheck each tool depending if you want GitHub Copilot to use them as context:

!Starting server in Visual Studio Code

1. To run a tool, type a prompt that you know will match the description of one of your tools, for example a prompt like so "add 22 to 1":

!Running a tool from GitHub Copilot

You should see a response saying 23.

Assignment

Try adding a server entry to your *mcp.json* file and make sure you can start/stop the server. Make sure you can also communicate with the tools on your server via GitHub Copilot Chat interface.

Solution

Key Takeaways

The takeaways from this chapter is the following:

Samples

Additional Resources

What's Next