在Cline上调用MCP服务之MCP实践篇-EW帮帮网

引言

上一篇《模型上下文协议（Model Context Protocol，MCP）初见概念篇》我们说到什么是模型上下文协议MCP并对其原理有所了解。今天我们就来实践一番。我们以Visual Studio Code上的Cline插件调用MCP为例来直观感受下MCP的调用流程实践，以此来加深对MCP概念的理解。
在这里插入图片描述

一、准备工作

1、安装 Visual Studio Code

Visual Studio Code（简称“VS Code” ）是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代Web和云应用的跨平台源代码编辑器。

就是这么个玩意：在这里插入图片描述
这一步就不赘述了，开发的同学应该都能操作。本文默认大家已经装好了VS Code。

2、安装Cline插件配置支持模型

Cline是一款专注于提升开发者效率的开源 Visual Studio Code 插件‌，深度集成 AI 模型与开发工具链，实现智能代码生成、自动化任务执行及跨模态开发支持。其核心定位是通过 AI 技术简化编码流程，适配复杂开发场景。

点击左侧的拓展，搜索“Cline”，点击安装。
在这里插入图片描述
安装完之后我们点击左侧的插件图标，将看到如下的界面，点击下方按钮。

看到如下界面，填写API Provider。

这里你可以根据自己的实际情况选择使用何种Provider。比如性能更好的claude3.7，廉价实惠的deepseek，或者免费的OpenRouter api 及本地的Ollama方案之类的也行。
在这里插入图片描述
我们就以OpenRouter api 为例,选中后点击获取api key。

账号自己选,小马选的是google账号。

但当然是选免费的呀。

点击授权,会提示打开VS code,同意open后密钥key会自动填入插件。

然后我们在model的地方搜"free"免费模型,选中"deepseek-chat"。
在这里插入图片描述
如下，Cline的整个model支持就配置好了。

我们先简单试一下效果。

我问了"你好",它识别出了只是简单地问候,没有明确的任务需求。细心的小伙伴可能看出来了,下方对话框有两种按钮: “Plan"和"Act”。

Plan：计划模式，Cline会读取项目状态和相关文件收集信息并生成一个详细执行计划，该模式不会执行任何修改操作。
Act：执行模式，用户确认计划后，Cline 将按照计划完成任务，会执行文件创建、修改操作。

二、安装MCP Server并调用MCP Server

我们找到上面的“MCP Servers”，点击后我们在“Marketplace”可以看到很多MCP Server可以安装。
我们以安装“Fetch”插件为例来演示。Fetch此 MCP 服务器提供了获取各种格式的 Web 内容的功能，包括 HTML、JSON、纯文本和 Markdown。

在这里插入图片描述
搜索找到插件，并点击安装。

正常情况下，随着点击安装之后，模型首先会去读取当前MCP服务的git仓库安装文件说明，并一步步执行安装命令，直到安装成功，类似下图。

如果安装成功，如下按钮会亮起绿灯。如果是红灯，则表示MCP接入未成功。
在这里插入图片描述
成功后细心的同学还会发现，有个类似下图的json文件。

这个文件可重要了，它相当于MCP Server在Agent内的注册动作。如果我们不操作安装按钮，直接配置该json文件，也是可以完成MCP Server 接入的哈。那安装过程到底是经历了哪些流程呢？稍后我们再来介绍这块。

小马之所以这么描述“如果成功”那是因为小马在Window安装该插件失败了，亮红灯了。据说很多人在Window安装MCP都各种问题失败。

有的说如果是“uv”或“uvx”等执行命令的报错，可以尝试将命令改为cmd来运行。如下：
在这里插入图片描述
反正小马试了，无果。那么无解了吗？并不是，其实还有本地安装的方法。

三、本地手动安装MCP Server

我们刚刚是想装“Fetch”插件，于是我们直接点击插件的详情或者直接找到插件的git仓库https://github.com/zcaceres/fetch-mcp。
我们可以看到readme介绍了MCP Server的功能以及具备的工具。
在这里插入图片描述
呀，不对，我们是来看安装方法的。

于是看着安装法子，我们得先保证本地有安装好node环境。可以先node -v 检查一下。如果没有版本号输出那就先装一下node（也很简单，官网下一个直接傻瓜式下一步即可）。确保了node环境之后，我们把仓库代码clone下来。然后CMD客户进入代码目录下，执行相关的安装命令。
在这里插入图片描述

什么？有error？小马先不管，任性。直接执行npm start 命令将服务run起来。This will start the Fetch MCP Server running on stdio.

别急，我们还剩最后一步。将配置中{ABSOLUTE PATH TO FILE HERE}改成本地的服务的地址。

{
  "mcpServers": {
    "fetch": {
      "command": "node",
      "args": [
        "{ABSOLUTE PATH TO FILE HERE}/dist/index.js"
      ]
    }
  }
}

如下图，我们可以看到绿灯亮起来了。欧耶！fetch MCP Serve接入成功啦！
在这里插入图片描述
于是小马迫不及待地想验证下了。输入问题之后，小马看到的界面是如下这样子的。

它没反应了。于是排查了后发现大概率是模型的接口调用达到当日上限了，今天不能调了，它没办法思考了。所以这块要注意啦，OpenRouter 免费并不是无限额的。
在这里插入图片描述
但是，基本也就是这个样子了，八九不离十，小马先找了个类似的案例来借助大家理解，等明日上限打开小马再考虑回头补充下效果图示。

这组案例图片，API先是思考了任务，调用了firecrawl MCP Server 爬取网站内容之后使用fetch MCP Server markdown formats 返回结果。

如此也就意味着，我们如果有MCP的仓库，直接可以根据安装说明和json配置任意安装。比如GitHub上专门收集的MCP仓库：https://github.com/punkpeye/awesome-mcp-servers/blob/main/README-zh.md

好了，隔天来补的正版的效果体验图示，如下。
我重新执行了昨天的任务问题，这次正常得到响应。
在这里插入图片描述

它爬取了整个URL的页面返回HTML格式。然后告诉我说它无法直接访问到文章内容，需要我进一步提供文章关键段落内容来分析，但事实上我看抓取到的html内容里已经包含了文章内容。Agent能力问题这里就不深入追究了。
在这里插入图片描述