一句指令秒部署“浪漫坐标”网页？不止于此，揭秘高效自动化背后的MCP魔法

一句指令秒部署“浪漫坐标”网页？不止于此，揭秘高效自动化背后的MCP魔法 一句指令秒部署“浪漫坐标”网页？不止于此，揭秘高效自动化背后的MCP魔法 Modified April 11, 2025 Code block Plain Text Copy 当然还有很多其他的内容，太多了，我就不一一进行说明了。 但是从上面翻译后的内容以及下面的图我们可以看出，客户端其实将高德地图的mcp服务各个工具的使用方式，使用说明，请求方式都送给大模型了。 当然还包括用户user，也就是我的提示词，我没有截出。 经纬度转换 2.3.2 大模型的第一次响应结果 现在，我们看一下大模型的响应结果。这里我对 content 进行了一些调整，方便可以看到全部内容。 可以看到，大模型给客户端（cline）返回以下内容： 1. 1. 客户端cline应该 显示的内容 。 2. 2. 客户端cline下一步应该调用的 mcp工具名称 。 3. 3. 客户端cline调用mcp工具时所需要 输入的请求参数 。 第一次请求大模型响应结果 2.3.3 客户端开始打包 客户端cline在调用完工具后，又一次开始调用大模型，将MCP工具的响应结果（具体地址等相关信息）+用户提示词+系统提示词给到大模型。 大模型返回下一次需要调用天气的mcp 可以看到，大模型告诉客户端cline，你下一步需要使用 maps weather 工具了并且将请求参数给到了客户端。 2.3.4 开始循环调用大模型和MCP工具 打包天气查询结果+提示词 大模型收到以后，开始执行后面的步骤，输出HTML的相关代码。 输出html代码 客户端在收到HTML代码以后，得到用户的确认，再一次调用大模型，告诉LLM，代码已经输出完成，下一步要做什么。 返回请求部署MCP工具和请求参数（html代码） 紧接着，客户端，又一次开始执行调用腾讯 Edgeonepage 的MCP工具，执行成功以后，将成功结果告诉LLM，让LLM判断下面还要做什么。 部署结果通知大模型最后大模型告诉客户端，任务都执行完了，你可以通知用户啦。 爱的约定 爱的约定 ：https://mcp.edgeone.site/share/NHHkSrWfpN1 3eipPK47m 2.3.5 一个总结 可以看到，对于这次的需求来说， 客户端是在一步步的调用工具 （这可能是因为最开始我这边因为高德服务断了重连了一次）。 因为我们在最开始的案例是可以看到，它调用高德MCP时，是一次性调用了所有的，最后将结果打包送给大模型后，才开始执行代码生成和html网页部署的。 但是， 它还是在按照步骤执行，获取到所有的信息以后，才会执行下一步 。 从上面对日志的分析来看，MCP协议的数据流基本符合我们最开始的猜测。 MCP数据流 再给大家看一次 客户端是一个核心的协调者 ，类似项目经理。 LLM是大脑 ，是管项目经理的PMO制定规则的。 MCP是四肢 ，是项目团队中的运营，实施，开发。 System Prompt ，是客户端和LLM的桥梁。 3. 未来趋势 在这几个场景的研究中，最让我痛苦的是环境的配置问题，也就是 studio 模式。个人觉得，现在的 npm 方式实在是太傻了，对我们这种非开发者太不友好。因此我在想未来 MCP 生态的发展，可能会是以下几个方向： 1、 云化趋势 (Cloud): 类似现在 高德SSE 的方式，基本不需要我去配置什么命令，例如 npx 、 node 、 cmd.exe 中的任何一种，只需要我输入一个key即可。 2、可能会出现类似 MCP工具商店 的东西，但是不是cline这种，需要各种命令执行的典型开发风格。而是就像现在安装浏览器插件或手机 App 的应用市场一样。 3、 小模型的结构化输出 ：其实在公司内部，也在探索大模型落地，因此让开发老师研究了下，写了个MCP工具，将保后（贷后）管理系统的部分接口进行了封装，在工作流中进行使用，发现小模型类似32B这种，表现不是很好。我考虑主要原因是因为32B模型返回的参数等相关内容出错的概率会相对来说大一些，所以 后续较小参数模型，可能在调用和使用工具的能力方面 ，会进一步提升。 4、 多模态集成方向 ：处理图像、音频、视频等相关数据。 5、 System Prompt 的精炼，或者其他方式的出现，这次的实验真的让我看到了token的大量消耗，就上面这两个案例，我开始在Deepseek官网的api实验时，就花了0.5元。大家知道官网很便宜的。 对了上面的腾讯Edgeone Pages，是可以一键自动化建网站的，我这里没有演示，大家如果有兴趣可以去试试。 日新月异 MCP我才研究了个开头，A2A协议也出来了。 谷歌的Agent2Agent，解决了智能体之间的协作与通信，像是“两个大脑”之间的对话。 而小A的MCP协议，解决了智能体如何使用工具，让大脑和身体更加协调了。 当然还有很多其他的内容，太多了，我就不一一进行说明了。 但是从上面翻译后的内容以及下面的图我们可以看出，客户端其实将高德地图的mcp服务各个工具的使用方式，使用说明，请求方式都送给大模型了。 当然还包括用户user，也就是我的提示词，我没有截出。 经纬度转换 2.3.2 大模型的第一次响应结果 现在，我们看一下大模型的响应结果。这里我对 content 进行了一些调整，方便可以看到全部内容。 可以看到，大模型给客户端（cline）返回以下内容： 1. 1. 客户端cline应该 显示的内容 。 2. 2. 客户端cline下一步应该调用的 mcp工具名称 。 3. 3. 客户端cline调用mcp工具时所需要 输入的请求参数 。 第一次请求大模型响应结果 2.3.3 客户端开始打包 客户端cline在调用完工具后，又一次开始调用大模型，将MCP工具的响应结果（具体地址等相关信息）+用户提示词+系统提示词给到大模型。 大模型返回下一次需要调用天气的mcp 可以看到，大模型告诉客户端cline，你下一步需要使用 maps weather 工具了并且将请求参数给到了客户端。 2.3.4 开始循环调用大模型和MCP工具 打包天气查询结果+提示词 大模型收到以后，开始执行后面的步骤，输出HTML的相关代码。 输出html代码 客户端在收到HTML代码以后，得到用户的确认，再一次调用大模型，告诉LLM，代码已经输出完成，下一步要做什么。 返回请求部署MCP工具和请求参数（html代码） 紧接着，客户端，又一次开始执行调用腾讯 Edgeonepage 的MCP工具，执行成功以后，将成功结果告诉LLM，让LLM判断下面还要做什么。 部署结果通知大模型最后大模型告诉客户端，任务都执行完了，你可以通知用户啦。 爱的约定 爱的约定 ：https://mcp.edgeone.site/share/NHHkSrWfpN1 3eipPK47m 2.3.5 一个总结 可以看到，对于这次的需求来说， 客户端是在一步步的调用工具 （这可能是因为最开始我这边因为高德服务断了重连了一次）。 因为我们在最开始的案例是可以看到，它调用高德MCP时，是一次性调用了所有的，最后将结果打包送给大模型后，才开始执行代码生成和html网页部署的。 但是， 它还是在按照步骤执行，获取到所有的信息以后，才会执行下一步 。 从上面对日志的分析来看，MCP协议的数据流基本符合我们最开始的猜测。 MCP数据流 再给大家看一次 客户端是一个核心的协调者 ，类似项目经理。 LLM是大脑 ，是管项目经理的PMO制定规则的。 MCP是四肢 ，是项目团队中的运营，实施，开发。 System Prompt ，是客户端和LLM的桥梁。 3. 未来趋势 在这几个场景的研究中，最让我痛苦的是环境的配置问题，也就是 studio 模式。个人觉得，现在的 npm 方式实在是太傻了，对我们这种非开发者太不友好。因此我在想未来 MCP 生态的发展，可能会是以下几个方向： 1、 云化趋势 (Cloud): 类似现在 高德SSE 的方式，基本不需要我去配置什么命令，例如 npx 、 node 、 cmd.exe 中的任何一种，只需要我输入一个key即可。 2、可能会出现类似 MCP工具商店 的东西，但是不是cline这种，需要各种命令执行的典型开发风格。而是就像现在安装浏览器插件或手机 App 的应用市场一样。 3、 小模型的结构化输出 ：其实在公司内部，也在探索大模型落地，因此让开发老师研究了下，写了个MCP工具，将保后（贷后）管理系统的部分接口进行了封装，在工作流中进行使用，发现小模型类似32B这种，表现不是很好。我考虑主要原因是因为32B模型返回的参数等相关内容出错的概率会相对来说大一些，所以 后续较小参数模型，可能在调用和使用工具的能力方面 ，会进一步提升。 4、 多模态集成方向 ：处理图像、音频、视频等相关数据。 5、 System Prompt 的精炼，或者其他方式的出现，这次的实验真的让我看到了token的大量消耗，就上面这两个案例，我开始在Deepseek官网的api实验时，就花了0.5元。大家知道官网很便宜的。 对了上面的腾讯Edgeone Pages，是可以一键自动化建网站的，我这里没有演示，大家如果有兴趣可以去试试。 日新月异 MCP我才研究了个开头，A2A协议也出来了。 谷歌的Agent2Agent，解决了智能体之间的协作与通信，像是“两个大脑”之间的对话。 而小A的MCP协议，解决了智能体如何使用工具，让大脑和身体更加协调了。 🔗 原文链接： https://mp.weixin.qq.com/s/iqoTHHdQ... https://mp.weixin.qq.com/s/iqoTHHdQ... ⏰ 发表时间：吏部侍郎 2025年04月11日 字数 5572，阅读大约需 28 分钟 最近在探索MCP相关的服务生态，然后就发现了腾讯所发布的这个 Edgeone Pages 。让我感觉自己开了挂。使用的过程中又对MCP的数据流研究了下。 1. 从 Edgeone Pages 的案例开始 1.1 案例演示 哈，大家都知道，我前两天在第一次学习 MCP 的时候做了一个案例，使用高德地图的MCP服务只做了一个旅游的行程规划。步骤是这样的： 生成网页内容后手动上传部署 这个中间需要我自己手工介入很多步， 但是现在，我可以直接将两个提示词进行合并，借助 高德MCP 和 腾讯的 Edgeone Pages 服务 就可以一步直接得到一个已经部署好的可以公开访问的网页链接。 感觉各种方面，Agent起风了。 为我的老板出差生成行程规划，并且一键部署网页 。 调用高德服务，获取信息 数据准备完成，准备生成html HTML生成及部署 大家可以看到，他显示使用高德地图获得了必要的信息，最后整合，使用腾讯的 Edgeone Pages 直接完成了部署，并且返回给了我网页的链接。 一键部署 结果展示：https://mcp.edgeone.site/share/IVcze4EgaioBLQW2Kk3K5 1.2 完成以上场景实验的环境准备工作 实现以上场景，需要做以下准备工作。 运行环境配置 Node.js安装。 在Cursor中进行MCP服务配置。 1.2.1 Node.js安装 首先，大家需要下载 Node.js ，下载链接是：https://nodejs.org/zh cn，点击左侧下方绿色的按钮下载即可，安装时，一路选择默认点下一步即可，当然，安装路径你可以调整。 下载 在安装完成以后，大家在开始菜单，右击，选择 终端管理员 （命令行powershell）。输入以下命令： 如果输出结果正常输出了版本号，则代表我们环境安装好了。 1.2.2 Cursor中Edgeone Page的MCP配置 这里主要介绍在 Cursor 中的配置方式，我是 win11 ，所以下面的适用于 win 电脑。 Cursor 的下载及安装，我在这里就不再说了，大家可以去搜索下直接下载安装，这个开始有免费的使用时间，后面会收费。 当然大家也可以选择使用VScode，在里面下载Cline插件。配置方法类似。 Cursor的MCP设置 打开 mcp.json 这个配置文件后，在里面输入如下配置： 注意: command 和 args 可能因操作系统而异。上述配置适用于 Windows。macOS 或 Linux 可能直接使用 npx 作为 command 。 接下来，我们以相同的方式，再次打开 终端管理员 （命令行powershell），输入以下命令： 等待安装完成以后，我们去点击 Enabled ，进行启动。 启动 在这里要注意一点，就是高德服务我用的是SSE（高德的配置查看上一篇文章不止出行规划即可)，所以可能会断掉，断了以后，我们点击重置按钮即可。就是中间那个。 PS:如果上面的配置方案不好使，大家在腾讯元宝上搜搜排查下错误，win的环境真是让人头疼。 可能确实和你没什么关系，苦笑.jpg。 2.大模型怎么实现和MCP服务交互呢？ 上面的案例中，我们使用了 高德地图的MCP服务 和 腾讯的 Edgeone Pages 服务 。 大家可能知道原来在MCP没出来以前，大模型使用工具的方式是使用 Function call 。但是在上面的案例中，明显是没有用到 Function call 的。 那大模型是如何知道有哪些MCP服务可用？ 如何知道调用MCP服务的顺序？ 如何知道怎么样和MCP服务进行交互的呢？ 带着这几个问题，我们研究下。 从上面的案例来看我猜测数据的流转是以下的形式： MCP数据流 1. 1. 用户发起请求: 用户向 AI Agent (如 Cursor/Cline 中的 LLM) 提出包含使用 MCP 服务意图的请求（例如：“用高德查天气并用 EdgeOne Pages 部署网页”）。 2. 2. 客户端 (Client) 打包上下文: ◦ • MCP 客户端（Cursor/Cline）获取当前已启用且可用的 MCP 服务器列表。 ◦ • 从每个 MCP 服务器获取其提供的能力描述（包括 工具 Tools , 资源 Resources , 提示 Prompts ）。 ◦ • 将这些能力描述、用户的原始请求、以及可能相关的聊天历史等信息，打包成一个丰富上下文的 系统提示词 (System Prompt) 。 ◦ • MCP 客户端（Cursor/Cline）获取当前已启用且可用的 MCP 服务器列表。 ◦ • 从每个 MCP 服务器获取其提供的能力描述（包括 工具 Tools , 资源 Resources , 提示 Prompts ）。 ◦ • 将这些能力描述、用户的原始请求、以及可能相关的聊天历史等信息，打包成一个丰富上下文的 系统提示词 (System Prompt) 。 3. 3. 发送给大模型 (LLM): 客户端将这个包含 MCP 能力描述的系统提示词和用户请求一起发送给配置好的大模型（如 claude3.7，DeepSeekv3等）。 4. 4. 大模型 (LLM) 决策与规划: ◦ • LLM 解析系统提示词，理解当前可用的 MCP 工具及其使用方法。 ◦ • 根据用户请求，LLM 决定需要调用哪些 MCP 工具，以及调用的顺序和参数。 ◦ • LLM 生成响应，其中可能包含： ▪ • 给用户看的自然语言回复。 ▪ • 指示客户端调用特定 MCP 工具的 结构化指令 (例如，使用 <use mcp tool 标签)。 ◦ • LLM 解析系统提示词，理解当前可用的 MCP 工具及其使用方法。 ◦ • 根据用户请求，LLM 决定需要调用哪些 MCP 工具，以及调用的顺序和参数。 ◦ • LLM 生成响应，其中可能包含： ▪ • 给用户看的自然语言回复。 ▪ • 指示客户端调用特定 MCP 工具的 结构化指令 (例如，使用 <use mcp tool 标签)。 ▪ • 给用户看的自然语言回复。 ▪ • 指示客户端调用特定 MCP 工具的 结构化指令 (例如，使用 <use mcp tool 标签)。 5. 5. 客户端 (Client) 执行 MCP 调用: ◦ • 客户端解析 LLM 的响应，提取出 MCP 调用指令。 ◦ • 根据指令，客户端向对应的 MCP 服务器发送调用请求（携带必要的参数）。 ◦ • 客户端解析 LLM 的响应，提取出 MCP 调用指令。 ◦ • 根据指令，客户端向对应的 MCP 服务器发送调用请求（携带必要的参数）。 6. 6. MCP 服务器执行: MCP 服务器接收请求，执行相应的操作（如调用高德 API、执行部署命令）。 7. 7. MCP 服务器返回结果: MCP 服务器将执行结果返回给客户端。 8. 8. 客户端 (Client) 再次打包: 客户端将 MCP 工具的执行结果整合到上下文中。 9. 9. 循环或结束: ◦ • 如果任务未完成 （例如，还需要调用下一个 MCP 工具或需要用户确认），客户端将包含 MCP 结果的新上下文再次发送给 LLM，重复步骤 4 8。 ◦ • 如果任务完成 ，LLM 生成最终的回复给用户。 ◦ • 如果任务未完成 （例如，还需要调用下一个 MCP 工具或需要用户确认），客户端将包含 MCP 结果的新上下文再次发送给 LLM，重复步骤 4 8。 ◦ • 如果任务完成 ，LLM 生成最终的回复给用户。 接下来我们配置环境，然后进行一下验证： • • 运行环境配置 Node.js安装。 • • AIgateway注册及准备 vscode下载及cline安装（cline是一个类似Cursor的AI编程的插件）。 2.1 AIgateway注册及准备 首先我们打开赛博菩萨进行注册： AIgatway地址 ：https://dash.cloudflare.com/70f8722de0f4baec0f4d86130189b2dc/ai/ai gateway 操作文档 ：https://developers.cloudflare.com/ai gateway/ 注册赛博菩萨 向下滑动左侧导航栏找到AIgateway，创建网关和API。 找到AIgateway 创建网关 创建API 这个时候，我们获取到了一个模型的API访问地址，这个地址会让我们在本地请求时，数据经过AIgateway，从而保存日志。 2.2 vscode下载及cline安装 vscode的下载，在浏览器搜索后，进行下载（https://code.visualstudio.com/download）。 不过大家可以找下国内镜像版本，比如清华大学的镜像。 安装完成vscode以后，打开插件市场，下载安装cline。 下载及安装cline 安装及配置MCP服务： 点击MCP服务 点击自行安装 点击下方的 configure MCP Servers 打开 cline mcp settings.json 。输入如下配置： 我这个配置可能不具备参考价值，因为环境的各种问题，我自己调整了太多内容。门槛多少有点高。 大家可以试试官网提供的配置： 官网：https://edgeone.cloud.tencent.com/pages/document/173172415568367616 完成后Ctrl+S记得保存。 接着安装 edgeone pages 。 如果没有报错，那我们就可以去点击重置或者开关按钮，多点几下，小绿灯亮了就可以使用了。 edgeone Pages 服务开启 好了，现在我们去找一个可以国内访问的，可以免费薅羊毛的大模型 openrouter ，先注册，然后申请key，并且复制模型ID。 打开 https://openrouter.ai/settings/keys ，注册登录以后，选择右上角头像位置的keys。 选择创建key 创建key接下来，我们配置模型。打开设置，按照下图的方式将 openrouter 获取的秘钥、模型ID（记得选择带free的模型）和AIgateway获取的连接，填入对应位置。 cline模型配置 这样，我们所有的实验准备都完成了就。 2.3 实验开始 首先我们在cline中输入提示词： 开始运行。然后我们可以在AIgateway中看到第一次请求的日志。 第一次请求的日志 2.3.1 客户端第一次请求大模型的日志 我们将它复制出来，在vscode新建一个文件，粘贴进去。我们可以看到一个巨长的系统提示词（ PS我觉得这个提示词太长了，占用了太多的上下文 ，感受到了token哗哗的流）： 巨长的系统提示词 然后，我们 ctrl+f 搜索MCP，可以看到有104处提到了MCP，我们把相关部分拿出来翻译一下（特别是 use mcp tool 和 access mcp resource 两个核心标签：