YouTip

MCP (Model Context Protocol) is an open standard that provides a unified interface, allowing AI models (such as Copilot Chat) to discover and call external tools, enabling various operations like reading files, calling APIs, and executing tasks. In VS Code, the MCP client (Copilot) completes tasks through the tools provided by the MCP server, while the server side can be deployed locally or remotely. !(#) The image above is the MCP architecture diagram: * MCP is the core, connecting to clients (MCP clients) on one side, like programs written with client.py; and on the other side, connecting to remote services (like the colorful app icons in the image) and local data sources (like the blue smiley face icons) through servers (MCP server). * Clients can also connect to MCP hosts, like Claude and ChatGPT, allowing MCP to invoke their capabilities and bring everything together to work~ It's like building a "collaboration network" for different tools, allowing MCP to connect to remote and local resources, and also leverage the power of external large models. Before using VS Code MCP services, make sure you have installed the latest version of Visual Studio Code. Then you also need to install the relevant VS Code AI extensions. We can use Microsoft's GitHub Copilot, and log in to an account (including Free, Business, or Enterprise plans). Starting from VS Code version 1.102, MCP support in VS Code is fully available, and you can check in the settings whether it is enabled. !(#) * * * ## Configuring MCP Servers There are multiple ways to add MCP servers in VS Code: * Direct installation: Visit the curated MCP server list at [https://code.visualstudio.com/mcp](https://code.visualstudio.com/mcp), and select "Install" on any MCP server to automatically add it to your VS Code instance. * Workspace settings: Add a .vscode/mcp.json file in the workspace to configure MCP servers for that workspace and share the configuration with team members. * User settings: Specify servers in the user configuration (via "MCP: Open User Configuration") to enable the MCP server in all workspaces and sync it via "Settings Sync". * Auto-discovery: Enable the auto-discovery feature (chat.mcp.discovery.enabled) to discover MCP servers defined in other tools (such as the Claude desktop app). In this section, we will use the workspace settings method. ### Example The following is a simple "Hello World" example of an MCP application in VS Code. First, we create a Python file named test.py with the following code: ## test.py file code import sys import json # Read MCP initialization request _ = json.load(sys.stdin) # Output MCP response (standard JSON) json.dump({ "type": "text", "text": "Hello World from MCP!" },sys.stdout) Next, we create an MCP server configuration that returns "Hello World". Create a .vscode/mcp.json file in your workspace folder (create the .vscode directory if it doesn't exist), and fill in the following configuration (simulating a simple local MCP server): ## .vscode/mcp.json file code { "servers":{ "HelloWorldServer":{ "type":"stdio", "command":"python3", "args":["test.py"] } } } !(#) After saving the file, open the VS Code Command Palette (Ctrl+Shift+P) and run the "MCP: Show Installed Servers" command: !(#) You will see the configured "HelloWorldServer": !(#) Start the server, and it will immediately return the "Hello World from MCP!" message. We can type "Execute HelloWorldServer" in the AI chat window to see the output result: !(#) Open .vscode/mcp.json, and there is an "Add Server..." icon in the bottom right corner. We can use it to add more services, including execution commands or remote HTTP services: !(#)