Extending Copilot Agent Capabilities: VS Code MCP Configuration Details

AI hands-on tutorials7mos agoupdate AI Sharing Circle

27.8K 00

VS Code 1.99 introduces Model Context Protocol support.

Visual Studio Code ( VS Code The Model Context Protocol (MCP) was formally introduced in version 1.99. MCP) support. MCP is an open standard designed to provide a unified interface that allows AI models to interact with external tools and services.

MCP was introduced primarily to enhance the GitHub Copilot The MCP server can be configured in Agent mode. With this protocol, developers can configure the MCP server to plug customized tools and services into the VS Code in AI workflows, greatly expanding the potential of AI assistants to perform a wider range of more dynamic tasks, such as querying real-time data, manipulating local files, or invoking specific APIThe

Prerequisites: Enable Agent mode and environment dependencies

VS Code 1.99 will MCP Integrated with GitHub Copilot in the Agent mode. Therefore, to use the MCP function, Agent mode must first be enabled. This can be done with the VS Code The drop-down menu at the top of the Chat view does this.

Another thing to keep in mind, and MCP A common feedback that is being faced is that running MCP The server may require pre-installation of Node.js, Docker or other dependencies. This is because many MCP Server implementations (especially for executing scripts or containerized tools) rely on these external environments. While this adds complexity to the initial setup, it also provides the flexibility to connect a variety of powerful customization tools.

Configuring the MCP Server

exist VS Code Middle.MCP The core configuration is located in the Workspace's .vscode/mcp.json within the file. By means of this JSON file, you can define one or more MCP servers, Agent mode will use the tools provided by these servers.

Step 1: Create an MCP profile

Open your project folder on VS Code Center.
In the project root directory, find or create a file named .vscode of the folder.
exist .vscode folder, create a file named mcp.json of the document.
Add the following basic configuration template to the mcp.json Documentation:
```
{
"servers": {
"example-server": {
"type": "stdio",
"command": "node",
"args": ["path/to/your/script.js"]
}
}
}
```
In this configuration:
- servers: An object that defines all the MCP servers, each key is a unique server name (e.g. "example-server").
- type: Specifies the type of communication for the server. Common types include:
  - stdio: The server is connected to the server via Standard Input/Output (SIO). VS Code communication, typically used to run local scripts or executables.
  - sse: The server communicates using Server-Sent Events, which are commonly used for connecting to remote services or services that need to push updates on a continuous basis.
- command cap (a poem) args: Defines the commands and their parameters needed to start this server. In this example, it will use the Node.js to run a specified JavaScript Documentation.

Step 2: Add Server-Specific Configuration

You can manually edit the mcp.json file to add a server, or you can use the VS Code The convenient way provided by the Command Panel:

Open command panel (shortcut) Ctrl+Shift+P maybe Cmd+Shift+P).
Type and run MCP: Add Server Command.
option Workspace Settings(math.) genus VS Code will automatically open or create .vscode/mcp.json file and may provide intelligent prompts (IntelliSense) to help you with the configuration.

The following is a configuration named fetch example of a server that uses the uvx command to run mcp-server-fetch A tool designed to retrieve the content of a web page at a specified URL:

{
"servers": {
"fetch": {
"type": "stdio",
"command": "uvx",
"args": ["mcp-server-fetch"]
}
}
}

Step 3: Secure handling of sensitive information

Hardcoding in the configuration file API Keys or other sensitive credentials are not secure.MCP The use of Input Variables is supported to handle this situation. When VS Code The user is prompted for input when starting a server that requires these variables.

{
"inputs": [
{
"type": "promptString",
"id": "api-key",
"description": "Your API Key",
"password": true
}
],
"servers": {
"perplexity": {
"type": "stdio",
"command": "docker",
"args": ["run", "-i", "--rm", "-e", "PERPLEXITY_API_KEY", "mcp/perplexity-ask"],
"env": {
"PERPLEXITY_API_KEY": "${input:api-key}"
}
}
}
}

In this example:

inputs Arrays define variables that require user input. Here a ID because of api-key of the password type entered.
password: true Ensure that the content is hidden as you type.
In the server configuration of the env Part.${input:api-key} The syntax references a previously defined input variable.VS Code will be responsible for securely storing and passing this value to the server process's environment variable PERPLEXITY_API_KEYThe

Using and Managing MCP Tools

Enabling Agent Mode and Discovering Tools

When you have properly configured the .vscode/mcp.json file and save it, then switch to the GitHub Copilot Agent Mode (selected via the drop-down menu at the top of the Chat view) Agent). the Agent mode automatically detects and loads the servers defined in the configuration file and the tools they provide.

invocation tool

Once servers and tools are recognized by the Agent schema, you can invoke them in the Chat view, either through natural language or specific commands. For example:

If you configured the fetch server that can be entered:@workspace /fetch https://bytenote.net to get the content of the page.
If you configure a time-query capable MCP server, try asking:@workspace What's the time in Saigon?

The Agent parses your request, determines whether it needs to invoke an external tool, and communicates with the appropriate MCP server interaction to get the results.

Managing Server Status

Sometimes you need to view the status of a configured server or to manage it (start, stop, view logs, etc.).

Open the command panel (Ctrl+Shift+P maybe Cmd+Shift+P).
Type and run MCP: List Servers Command.
This opens up a view listing all of the files in the mcp.json The server and its current state (e.g. Started, Stopped).
You can click on a server in the list to perform actions such as starting, stopping, or restarting it, and view its output logs, which is useful for debugging server configurations.

Advanced Configuration Example

Configuring multiple servers

mcp.json The file can define multiple servers, each providing different functionality.

{
"inputs": [
{
"type": "promptString",
"id": "perplexity-key",
"description": "Perplexity API Key",
"password": true
}
],
"servers": {
"Perplexity": {
"type": "stdio",
"command": "docker",
"args": ["run", "-i", "--rm", "-e", "PERPLEXITY_API_KEY", "mcp/perplexity-ask"],
"env": {
"PERPLEXITY_API_KEY": "${input:perplexity-key}"
}
},
"Fetch": {
"type": "stdio",
"command": "uvx",
"args": ["mcp-server-fetch"]
},
"RemoteServer": {
"type": "sse",
"url": "http://api.example.com/sse",
"headers": {
"VERSION": "1.2"
}
}
}
}

This configuration defines three servers:

Perplexity: Use Docker Running a tool that might be used to perform complex searches or quizzes requires the API Key.
Fetch: Use uvx Run a local tool for crawling web content.
RemoteServer: Connect to a remote SSE A service endpoint that may be used to receive real-time notifications or data streams. Note sse Type required url parameter and can contain custom headersThe

Using predefined variables

MCP The configuration supports a number of predefined variables for easy referencing of contextual information.

{
"servers": {
"filesystem": {
"type": "stdio",
"command": "npx",
"args": ["@modelcontextprotocol/server-filesystem", "${workspaceFolder}"]
}
}
}

In this example, the${workspaceFolder} is a predefined variable that will be replaced with the current VS Code The root directory path of the open workspace. This is useful for tools that need access to project files.

pass (a bill or inspection etc) MCP(math.) genusVS Code opens the door for developers to integrate AI assistants more deeply into their daily development workflow with the power of external tools. While the initial configuration may involve some environment setup, the customization and capability expansion that comes with it is considerable.