Posted in:

GitHub Copilot is continuing to evolve very rapidly, with the recent launch of "agent mode", and the ability to connect to "Model Context Protocol" servers which gives you access to a vast array of tools, essentially allowing your agent to access any data, and perform any actions you like.

In this post, I'll walk you through the steps to configure Visual Studio Code to connect to an MCP Server and make use of it in agent mode.

For our demo scenario, we'll use the Playwright MCP server which exposes the capabilities of the Playwright end-to-end browser automation testing tool. This essentially gives your "agent" the ability to open a web browser and perform actions in there, which obviously opens up a lot of possibilities.

Configure the MCP Server in VS Code

First of all, we do need to have node installed as we need the npx tool to run the Playwright server.

Next, we need to configure Visual Studio Code to access the Playwright MCP Server. The README docs provide several ways to do this, the easiest being to just click on the "Install Server" button.

Installing it will change your settings.json file to add something like this. Note that I needed to add the --browser msedge args as I don't have Chrome installed on my PC, which is the default browser for Playwright.

"mcp": {
    "servers": {
        "playwright": {
            "command": "npx",
            "args": [
                "-y",
                "@playwright/mcp@latest",
                "--browser",
                "msedge"
            ]
        }
    }
},

You also do need to ensure that the the MCP server starts correctly. In theory VS Code should do this automatically, but you can use the "MCP: List Servers" command in VS Code to pick your server and explicitly start, stop or restart it.

Selecting agent mode and enabling tools

To try it out, you simply open the GitHub Copilot Chat window, and in the drop-down in the prompt box, select "Agent" mode. The prompt box will now include a button to let you select the tools that you want to allow the agent to use.

Agent mode prompt

The Playwright MCP server actually offers multiple tool actions such as navigating, clicking, typing, etc. So if you want to, you can restrict the agent to only be allowed to call specific tools.

Playwright tool selection

Trying it out

Next, we simply need to ask the agent to do something that requires the use of the tool. For example, I prompted it with "visit the hacker news home page and find all articles relating to audio or music"

If the AI model decides it wants to run a tool, it will pause, asking you for permission. This is good from a security perspective, although I can imagine people quickly getting tired of granting permission at a granular level, and just enabling their agents to do whatever they think is best.

In this example, it's likely to ask to run the browser_navigate command to go to the Hacker News homepage. In my case, it found two articles and decided to run browser_navigate again on both of them so it could read these articles and summarise them.

Of course, the agent might not do exactly what you wanted. I found that with this particular prompt, sometimes it assumed I wanted it to create an application that fetched the Hacker News homepage and printed out the titles of the articles about audio.

So don't forget the retry button at the bottom of each response. You can always ask the model to try again (or try again with a different model) if you're not happy with the initial response.

Retry button

What else can I do with MCP?

The great thing about MCP is that it is extremely flexible. Already, hundreds of servers have been created (you can find a good list here). An obvious use-case would be to give the LLM access to data stored in various locations - such as your company's internal documentation.

And you can also use them to trigger actions in other systems, whether that's posting an update onto a Slack channel, or by calling your own internal API to perform a custom business process.

Already it seems like MCP has been accepted as the defacto standard to grant AI agents access to a wide variety of tools, and the ease with which an MCP server can be built means that just about any kind of integration you can think of is achievable.

I suspect the next challenges in this area will be ensuring that the LLM is good at picking the right tool for the job (especially if you have many dozens of MCP servers, each with multiple commands), and providing adequate security mechanisms so that these tools (whether deliberately or not) don't cause significant damage (e.g. leaking sensitive data, spending all your money in the cloud, deleting all your stuff, etc).

Want to learn more about how to refactor and optimize code with GitHub Copilot? Be sure to check out my Pluralsight course Refactor and Optimize Code with GitHub Copilot