【MCP 开篇】在 VS Code 上导入MCP

188 阅读6分钟

大家好, 这里是 CodeAgent.

MCP (Model Context Protocol) 作为提升效率工具, 开源更是百花齐放, 在入手开发MCP之前, 我们有必要了解下怎么导入使用已有的的, 先用起来体验下, 也可以方便日常使用.

────── Start ──────

首先我们从 已有的 MCP 开源列表上下载一个, 地址如下:
github.com/modelcontex…
mcp.so/

可以看到有很多开发好的

mcp_导入_1.png

比如我想开发一个知识库或者错题集, 那可以用 mongodb-mcp-server 来作为内容管理和知识查询,

首先可以看到 mcp 格式基本是下面这样:


{
  "mcpServers": {
    "MongoDB": {
      "command": "npx",
      "args": [
        "-y",
        "mongodb-mcp-server",
        "--connectionString",
        "mongodb://localhost:27017/myDatabase"
      ]
    }
  }
}

很简单的配置, 接下来根据上面的 json 串, 看看怎么导入吧.

VS Code Agent 导入

VS Code 在最新版本引入了 Agent 模式, 运行我们自定义mcp, 并在Copilot上使用.

mcp导入2.png

  • 接着搜索 mcp, 下面的选项记得都 勾上Enabled

mcp导入3.png

  • 按 Ctrl + Shift + P, 打开命令面板, 输入 MCP, 然后选择 Add Server

mcp导入4.png

  • 选择安装方式

1. 通过 NPM Package 来安装

mcp导入5.png

为什么选择 npm package 呢?
从 json 中 command 的配置为 npx, 也就代表可以通过 npm 来安装

"MongoDB": {
      "command": "npx",
       ...
}
  • 接着输入 mongodb-mcp-server, 然后回车. 这个是从刚才看到的 json 里拿到的, 也就是这个mcp 服务的名字

mcp导入6.png

  • 选择 Allow

mcp导入7.png

2. 通过 Command (stdio) 来安装

mcp导入图8.png

再看一下 json

"MongoDB": {
      "command": "npx",
      "args": [
        "-y",
        "mongodb-mcp-server",
        ...
      ]
    }

通过 json, 我们可以拼接命令如下, 并直接输入回车

npx -y mongodb-mcp-server
  • 安装之后, 在 mcp 配置文件里可以看到

mcp导入图9.png

这个配置文件在哪呢?打开 Settings 页面, 搜索 mcp, 然后点击 Edit in settings.json, 就可跳到配置文件

mcp导入图10.png

到此配置好了, 接下来测试一下

为了配合 mongodb mcp, 我们需要先安装 mongodb compass, 接着配置测试的数据库, 如下有两个集合 test_2 和 test_collection

mcp导入图11.png

接着需要把左上角的数据库地址更新到json里

mcp导入图12.png

更新之后如下

mcp导入图13.png

可以看到json配置文件有个start按钮, 点击start, 如果启动成功可以看到变成了 Running

mcp导入图14.png

接着打开 Copilot Chat, 有Ask, Edit, Agent,我们选择Agent模式

mcp导入图15.png

点击左下角的小扳手, 可以看到已有的 mcp 服务, 我们把 MongoDB 的勾上

mcp导入图16.png

在聊天框也可以输入 "#" 来看看已有的服务

mcp导入图17.png

最后, 随便问下: "test_db 有几个集合"

可以看到成功返回:

mcp导入图18.png

Roo Code 导入

Roo Code 是 VS Code 上的一个插件

roo_code1.png

安装之后可以在左边侧边栏看到一只小袋鼠, 点开之后来进行配置

我们先点击这个三层图标

roo_code2.png

然后点击 Edit Global MCP

接着会跳转到 mcp_settings.json

是不是很熟悉的感觉. 是的, mcp 配置都是这样的.

那么接下来输入咱们的配置, 还是和 Copilot Agent 时候一样

{
  "mcpServers": {
    "MongoDB": {
        "command": "npx",
        "args": [
          "-y",
          "mongodb-mcp-server",
          "--connectionString",
          "mongodb://localhost:27017/test_db"
        ]
      }
  }
}

接着可以看到这里多了 MongoDB, 最右边小圆点如果是绿的说明成功运行起来了, 如果有问题可以点击刷新按钮重新起服务

roo_code3.png

接着点击配置按钮, 我们稍微配置下需要的模型, 选择很多

配置好之后, 我们还是问一样的问题: "有几个集合", 回答如下, 说明成功了

roo_code4.png

至此, 两种方式导入使用 MCP 已经讲完, 开源的MCP很多, 大家可以有空多看看有哪些有用好玩的, 尝试下.

比如上面这个MongoDB, 可以扩展丰富数据库内容, 记录一些不常遇到的问题, 方便搜索.

────── End ──────

好了, 本文讲了通过 VS Code Agent 和 Roo Code 导入 mcp, 类似工具还有很多,比如 Claude. Caude 可以通过官网 claude.ai/ 获取.

其它 mcp 导入方式大同小异, 都是 json 配置文件, 如果有兴趣的可以多尝试几个.

💬 欢迎评论区留下你的看法, 下一篇来讲讲怎么实现一个MCP

也欢迎关注我的公众号 CodeAgent, 不定期推送文章, 一起学习交流