Follow Xu's blog
BlogCreate BlogAbout
BlogCreate BlogAbout
Follow Xu's blog

Build with
-View source
created in 2025
• FollowXu's Blog
Model Context Protocol 在vscode中的应用
2025年6月3日AIfollowxu5 min read

摘要: 简要解释MCP的概念,以及如何在vscode中结合Copilot使用MCP服务。

AIMCPvscodeCopilot工具

1 Model Context Protocol

Model Context Protocol (模型上下文协议),后面简称MCP。MCP能够使得各种数据源、工具和软件功能连接到大语言模型中,使得大语言模型能够统一调度资源进行各种操作。我个人认为,MCP就像是一个拓展坞,一端连接笔记本(MCP Client),一端通过拓展坞连接不同接口的外设(MCP Server)。

架构示意图

官方给出以上MCP的架构示意图,可以看到主要有三个主体:Host、Client和Server。

  • Host:接收prompt提交给ai模型;
  • Client:ai模型决策认为需要调用某个功能的时候,Host中的MCP Client会被激活并于相对应的MCP Server建议连接;
  • Server:负责执行具体的功能。

举个例子:我使用vscode中的Copilot进行提问“使用filesystem读取D盘下的readme.md文件”。Copilot收到提问后提交给内嵌的ai模型,然后ai模型分析提问,判断需要使用filesystem功能,因此调用相应的MCP服务执行任务。

2 Host选择

市面上有claude desktop、Cursor和vscode支持MCP。我个人只使用过Cursor和vscode,我更加推荐vscode,因为github学生认证后可以免费使用Copilot pro。

网络上有很多教程展示github学生认证的步骤,跟着教程一般在3-4天内能申请成功。然后vscode右上角打开Copilot,右下角选择Agent和你喜欢的模型(gpt4.1等)。

3 vscode MCP 设置

左下角点击设置,搜索栏中搜索MCP,点击在settings.json中编辑。

步骤

跳转出来的配置文件中能够添加各种MCP 服务。

例如:

{
    "chatgpt.lang": "cn",
    "bitoAI.codeCompletion.setAutoCompletionTriggerLogic": 250,
    "git.useEditorAsCommitInput": false,
    "workbench.colorTheme": "Default Light+",
    "editor.wordWrap": "on",
    "mcp": {
        "inputs": [],
        "servers": {
            "github": {
                "command": "docker",
                "args": [
                    "run",
                    "-i",
                    "--rm",
                    "-e",
                    "GITHUB_PERSONAL_ACCESS_TOKEN",
                    "ghcr.io/github/github-mcp-server"
                ],
                "env": {
                    "GITHUB_PERSONAL_ACCESS_TOKEN": "your_token"
                }
            },            
            "filesystem": {
                "command": "npx",
                "args": [
                "-y",
                "@modelcontextprotocol/server-filesystem",
                "D:\\",
                ]
            },
            "playwright": {
                "command": "npx",
                "args": [
                    "@playwright/mcp@latest",
                    "--browser=msedge"
                ]
            },
            "edgeone-pages-mcp-server": {
                "command": "npx",
                "args": [
                    "edgeone-pages-mcp"
                ]
            },
            "earthdata": {
                "command": "docker",
                "args": [
                    "run",
                    "-i",
                    "--rm",
                    "datalayer/earthdata-mcp-server:latest"
                ]
            },
            "jupyter": {
                "command": "docker",
                "args": [
                    "run",
                    "-i",
                    "--rm",
                    "-e",
                    "SERVER_URL",
                    "-e",
                    "TOKEN",
                    "-e",
                    "NOTEBOOK_PATH",
                    "datalayer/jupyter-mcp-server:latest"
                ],
                "env": {
                    "SERVER_URL": "http://host.docker.internal:8889",
                    "TOKEN": "MY_TOKEN",
                    "NOTEBOOK_PATH": "D:\\notebook.ipynb"
                }
            },
            "jupyter-earth": {
                "command": "docker",
                "args": [
                    "run",
                    "-i",
                    "--rm",
                    "-e",
                    "SERVER_URL",
                    "-e",
                    "TOKEN",
                    "-e",
                    "NOTEBOOK_PATH",
                    "datalayer/jupyter-earth-mcp-server:latest"
                ],
                "env": {
                    "SERVER_URL": "http://host.docker.internal:8889",
                    "TOKEN": "MY_TOKEN",
                    "NOTEBOOK_PATH": "D:\\notebook.ipynb"
                }
            },
            "browsermcp": {
                "command": "npx",
                "args": [
                    "@browsermcp/mcp@latest"
                ]
            },
            "sequentialthinking": {
                "command": "npx",
                "args": [
                    "-y",
                    "@modelcontextprotocol/server-sequential-thinking"
                ]
            },
            "mcp-server-chart": {
                "command": "cmd",
                "args": [
                    "/c",
                    "npx",
                    "-y",
                    "@antv/mcp-server-chart"
                ]
            },
            "arxiv-mcp-server": {
                "command": "uv",
                "args": [
                    "tool",
                    "run",
                    "arxiv-mcp-server",
                    "--storage-path", "D:\\paper_storage",
                ]
            },
        }
    },
    "liveServer.settings.donotShowInfoMsg": true,
}

以上是我的配置文件,其中包含许多MCP服务,也是我比较推荐的几个工具。

3.1 MCP服务资源

我推荐魔搭社区MCP广场、百度MCP广场,可以在其中挑选你喜欢的MCP服务。里面都有详细的安装步骤。

3.2 MCP服务安装

我选一个MCP服务作为安装和使用的示例。

settings.json
"filesystem": {
    "command": "npx",
    "args": [
    "-y",
    "@modelcontextprotocol/server-filesystem",
    "D:\\",
    ]
},
  • filesystem:工具名称;
  • command:npx是运行命令的工具,其中还有python、doker、uv等,很多时候需要你先在本地环境中安装相应的工具。

如command为docker,我们得先下载docker客户端,然后保持doker打开;或者npx,需要下载node.js。

配置完settings.json后,保存后点击启动:

步骤

如果没有错误,就会显示该服务的工具数量。启动成功后你就可以点击停止,一旦ai决定调用该工具,就会再次启动服务。

安装成功后,我们就可以通过自然语言操作挂载在filesystem上的文件目录。

例如向Copilot提问:使用filesystem读取readme.md文件,将其中内容复制后添加到example.txt文件原有内容之后。

返回结果如图: 步骤

至此,我们就成功结合了vscode、copilot、ai模型、MCP服务。

  1. 1 Model Context Protocol
  2. 2 Host选择
  3. 3 vscode MCP 设置
    1. 3.1 MCP服务资源
    2. 3.2 MCP服务安装