VS Code + Cline + 魔搭MCP Server 实现抓取网页内容。
MCP的诞生，可以说是为AI带来一波新的活力。MCP（Model Context Protocol）是由Anthropic公司在2024年11月推出的一种开放标准协议，旨在为大型语言模型（LLM）提供一种开放、标准化的方式，以便与外部数据源。
简单来说，就是让我们应用调用大模型，大模型要调用外部数据都变得通用。只要大模型遵守了MCP规范，AI应用就可以快速接入。只要你的数据源遵守MCP规范，也很方便AI应用、或者大模型调用。
更多详细内容，大家可以看看官方的文档：
https://modelcontextprotocol.io/introduction
https://img2024.cnblogs.com/blog/93789/202505/93789-20250522121413611-655921199.png
从上图，我们知道MCP分为3个节点：LLM、MCP Client、MCP Server。
下面我们来体验下MCP的实际使用效果。
我们这里选择的是：阿里QWen、Vs Code的Cline插件、阿里魔搭社区的MCP Server。
这里大家可以根据自己的喜好选择。
一、安装Cline
1.1 打开VS Code开发工具
在扩展选项卡，搜索Cline，并安装Cline。
https://img2024.cnblogs.com/blog/93789/202505/93789-20250522121413634-1373957381.png
安装成功后，我们就可以在右边看到Cline的图标。https://img2024.cnblogs.com/blog/93789/202505/93789-20250522121413536-1712321114.png
二、Cline配置LLM
2.1 切换至Cline，并点击 配置 的图标，进入配置页面。
https://img2024.cnblogs.com/blog/93789/202505/93789-20250522121413522-1294767654.png
2.2 大模型，我这边使用的是阿里的QWen，首先我们先进入：阿里云百炼
https://bailian.console.aliyun.com/?tab=model#/model-market
https://img2024.cnblogs.com/blog/93789/202505/93789-20250522121413571-1599793692.png
任意选择一个模型，查看API配置说明。
https://img2024.cnblogs.com/blog/93789/202505/93789-20250522121413626-719675274.png
在API文档介绍里，我们就可以看到大模型Url： https://dashscope.aliyuncs.com/compatible-mode/v1
https://img2024.cnblogs.com/blog/93789/202505/93789-20250522121413653-1295424899.png
2.3 创建API-Key
在页面的左小角，点击：API-Key，进入API Key管理页面。
https://img2024.cnblogs.com/blog/93789/202505/93789-20250522121413476-919295874.png
创建我的API-Key
https://img2024.cnblogs.com/blog/93789/202505/93789-20250522121413579-1752104923.png
创建完成，我们就可以获得API Key了。
https://img2024.cnblogs.com/blog/93789/202505/93789-20250522121413565-1431889416.png
2.4 选择模型的版本
Qwen提供了很多版本的大模型，并且为我们提供了免费token，大家可以根据自己需求选择。
切换至模型页面，任意选择一个模型，进入模型详情介绍。
https://img2024.cnblogs.com/blog/93789/202505/93789-20250522121413601-322272945.png
在模型列表，右边我们就可以看到哪些模型为我们提供了免费token，左边就是模型的版本编码。
https://img2024.cnblogs.com/blog/93789/202505/93789-20250522121413529-1829899070.png
2.5 Cline配置大模型
根据上面的内容，最终我们配置如下，配置后点击保存就行。https://img2024.cnblogs.com/blog/93789/202505/93789-20250522121413543-1578335488.png
2.6 环境变量配置
正常情况下，这样就配置完成了。如果出现以下错误情况，那是说明找不到 powershell 命令。
https://img2024.cnblogs.com/blog/93789/202505/93789-20250522121413471-1516866041.png
我们只需为系统环境变量path，添加如下配置就行：
%SYSTEMROOT%\System32\WindowsPowerShell\v1.0\
https://img2024.cnblogs.com/blog/93789/202505/93789-20250522121413581-156009899.png
2.7 测试大模型
配置后，我们可以自行测试下，看是否配置成功。
https://img2024.cnblogs.com/blog/93789/202505/93789-20250522121413594-501402041.png
三、配置MCP Server
===
3.1 MCP Servers页面
进入MCP Servers页面，我们可以看到Cline，为我们集成很多公开的MCP Server，大家可以根据需求自行安装就行。
https://img2024.cnblogs.com/blog/93789/202505/93789-20250522121413571-252789584.png
3.2 添加远程的MCP Server
Remote Servers => Edit Configuration，在 右边的编辑框 添加我们的Server配置。
https://img2024.cnblogs.com/blog/93789/202505/93789-20250522121413574-2035153911.png
魔搭社区，为我们提供了很多远程Server，魔搭地址：https://www.modelscope.cn/mcp
https://img2024.cnblogs.com/blog/93789/202505/93789-20250522121413595-1776658626.png
进入Server详情页面，我们可以看到Server提供了哪些工具列表，以及模型配置信息。
这边选择的是Fetch网页内容抓取的Server，大家可以根据需求选择其他Server。
https://img2024.cnblogs.com/blog/93789/202505/93789-20250522121413706-1528042741.png
四、测试效果
===
根据上面的配置，一个完整MCP配置就完成了。
根据工具的提示，向大模型发送相应内容，大模型就会解析你的内容，去调用对应的Server。
https://img2024.cnblogs.com/blog/93789/202505/93789-20250522121413522-1241039943.png
上面是Cline，和你确认是否要抓取这个链接，我们直接点击： Approve 就行。
页面内容太多，Cline和我们确认是否继续抓取。我们继续点击： Approve 就行。
https://img2024.cnblogs.com/blog/93789/202505/93789-20250522121413556-1587757726.png
下面就抓取成功了，并用markdown的格式输出。 另外Cline 还会继续问你 是否要把内容保存至本地文件，可以根据自己需求，选择保存、或者拒绝。
https://img2024.cnblogs.com/blog/93789/202505/93789-20250522121413591-873423470.png
另外需要注意的是：
工具的提示是非常重要的，大模型是根据 工具提示和我们发送的内容 ，进行智能解析的，来判断是否会调用Server。
https://img2024.cnblogs.com/blog/93789/202505/93789-20250522121413599-1263525983.png
- End -
文章首发于公众号【编程乐趣】，欢迎大家关注。
https://img2024.cnblogs.com/blog/93789/202505/93789-20250522121505292-379377642.png
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]