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

大家好, 这里是 CodeAgent.

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

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

首先我们从已有的 MCP 开源列表上下载一个, 地址如下:

可以看到有很多开发好的

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

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

json 复制代码

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

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

VS Code Agent 导入

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

首先我们从官网 code.visualstudio.com/download 下载... Visual Studio Code, 并安装, 我这里用的是 windows版本
打开 Settings 页面, 搜索 Agent, 确保勾选上下面选项

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

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

选择安装方式

通过 NPM Package 来安装

为什么选择 npm package 呢?

从 json 中 command 的配置为 npx, 也就代表可以通过 npm 来安装

json 复制代码

"MongoDB": {
      "command": "npx",
       ...
}

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

选择 Allow

通过 Command (stdio) 来安装

再看一下 json

json 复制代码

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

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

vbscript 复制代码

npx -y mongodb-mcp-server

安装之后, 在 mcp 配置文件里可以看到

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

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

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

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

更新之后如下

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

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

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

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

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

可以看到成功返回:

Roo Code 导入

Roo Code 是 VS Code 上的一个插件

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

我们先点击这个三层图标

然后点击 Edit Global MCP

接着会跳转到 mcp_settings.json

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

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

json 复制代码

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

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

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

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

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

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

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

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

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

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

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