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 -

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

原创作者: chingho 转载于: https://www.cnblogs.com/chingho/p/18891026
### 集成 DeepSeek 插件到 VS Code 进行命令行开发 #### 安装与配置 为了在 Visual Studio Code (VS Code) 中集成并使用 DeepSeek 插件进行命令行操作,需先完成必要的安装和环境准备。 确保已获取访问权限并通过官方渠道下载适用于本地系统的 DeepSeek SDK 或者 API Key。对于更稳定的体验,建议采用硅基流动提供的API服务[^2]。 接着,在终端执行如下指令来全局安装 `deepseek-cli` 工具: ```bash npm install -g deepseek-cli ``` 随后验证安装成功与否可通过运行版本查询命令确认: ```bash deepseek --version ``` #### 设置 VS Code 扩展支持 前往 VS Code 的扩展市场搜索 "DeepSeek" 关键词找到对应的插件并点击安装按钮完成加载过程。这一步骤使得编辑器能够识别来自 DeepSeek 的特定语法和服务请求。 #### 初始化项目结构 创建一个新的文件夹作为工作区根目录,并初始化 Git 版本控制系统以便于后续管理变更记录: ```bash mkdir my-deepseek-project && cd $_ git init . ``` 在此基础上利用 DeepSeek CLI 创建初始配置文件: ```bash deepseek init ``` 此命令会引导用户输入必要参数如项目名称、描述以及指定使用的编程语言模板等信息,最终生成 `.deepeek.json` 文件保存这些选项设定。 #### 编辑器内启用命令面板交互 打开任意代码文档后按下快捷组合键 (`Ctrl+Shift+P`) 调出命令面板,从中选取 “Terminal: Create New Integrated Terminal”,这样就可以在一个新的综合终端里启动各种基于 DeepSeek 增强功能的任务了。 例如尝试简单的函数自动生成实验: ```bash deepseek generate function addNumbers(a, b) ``` 上述例子将会依据给定签名快速产出一段实现加法运算逻辑的源码片段供开发者进一步完善调整。 #### 自定义任务自动化流程 为了让日常编码更加高效流畅,还可以借助 tasks.json 来定制专属的工作流脚本。进入 .vscode 文件夹新建或修改现有 JSON 文档加入类似以下内容: ```json { "version": "2.0.0", "tasks": [ { "label": "Run DeepSeek Generate Function", "type": "shell", "command": "deepseek generate function ${input:functionName}", "problemMatcher": [], "group": { "kind": "build", "isDefault": true }, "inputs": [ { "id": "functionName", "description": "Enter the name of your new function along with parameters.", "default": "" } ] } ] } ``` 这段配置允许通过图形界面轻松触发带有动态参数传递特性的 DeepSeek 功能调用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值