VS Code + Cline + 魔搭MCP Server 实现抓取网页内容。

MCP的诞生，可以说是为AI带来一波新的活力。

‌MCP（Model Context Protocol）‌是由Anthropic公司在2024年11月推出的一种开放标准协议，旨在为大型语言模型（LLM）提供一种开放、标准化的方式，以便与外部数据源。

简单来说，就是让我们应用调用大模型，大模型要调用外部数据都变得通用。只要大模型遵守了MCP规范，AI应用就可以快速接入。只要你的数据源遵守MCP规范，也很方便AI应用、或者大模型调用。

更多详细内容，大家可以看看官方的文档：

https://modelcontextprotocol.io/introduction

从上图，我们知道MCP分为3个节点：LLM、MCP Client、MCP Server。

下面我们来体验下MCP的实际使用效果。

我们这里选择的是：阿里QWen、Vs Code的Cline插件、阿里魔搭社区的MCP Server。

这里大家可以根据自己的喜好选择。

一、安装Cline

1.1 打开VS Code开发工具

在扩展选项卡，搜索Cline，并安装Cline。

安装成功后，我们就可以在右边看到Cline的图标。

二、Cline配置LLM

2.1 切换至Cline，并点击 配置 的图标，进入配置页面。

2.2 大模型，我这边使用的是阿里的QWen，首先我们先进入：阿里云百炼

https://bailian.console.aliyun.com/?tab=model#/model-market

任意选择一个模型，查看API配置说明。

在API文档介绍里，我们就可以看到大模型Url： https://dashscope.aliyuncs.com/compatible-mode/v1

2.3  创建API-Key

在页面的左小角，点击：API-Key，进入API Key管理页面。

创建我的API-Key

创建完成，我们就可以获得API Key了。

2.4 选择模型的版本

Qwen提供了很多版本的大模型，并且为我们提供了免费token，大家可以根据自己需求选择。

切换至模型页面，任意选择一个模型，进入模型详情介绍。

在模型列表，右边我们就可以看到哪些模型为我们提供了免费token，左边就是模型的版本编码。

2.5 Cline配置大模型

根据上面的内容，最终我们配置如下，配置后点击保存就行。

2.6 环境变量配置

正常情况下，这样就配置完成了。如果出现以下错误情况，那是说明找不到 powershell 命令。

我们只需为系统环境变量path，添加如下配置就行：

%SYSTEMROOT%\System32\WindowsPowerShell\v1.0\

2.7 测试大模型

配置后，我们可以自行测试下，看是否配置成功。

三、配置MCP Server

===

3.1 MCP Servers页面

进入MCP Servers页面，我们可以看到Cline，为我们集成很多公开的MCP Server，大家可以根据需求自行安装就行。

3.2 添加远程的MCP Server

Remote Servers => Edit Configuration，在 右边的编辑框 添加我们的Server配置。

魔搭社区，为我们提供了很多远程Server，魔搭地址：https://www.modelscope.cn/mcp

进入Server详情页面，我们可以看到Server提供了哪些工具列表，以及模型配置信息。

这边选择的是Fetch网页内容抓取的Server，大家可以根据需求选择其他Server。

四、测试效果

===

根据上面的配置，一个完整MCP配置就完成了。

根据工具的提示，向大模型发送相应内容，大模型就会解析你的内容，去调用对应的Server。

上面是Cline，和你确认是否要抓取这个链接，我们直接点击： Approve 就行。

页面内容太多，Cline和我们确认是否继续抓取。我们继续点击： Approve 就行。

下面就抓取成功了，并用markdown的格式输出。 另外Cline 还会继续问你  是否要把内容保存至本地文件，可以根据自己需求，选择保存、或者拒绝。

另外需要注意的是：

工具的提示是非常重要的，大模型是根据 工具提示和我们发送的内容 ，进行智能解析的，来判断是否会调用Server。

- End -

文章首发于公众号【编程乐趣】，欢迎大家关注。