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 -

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