银海：MCP是大模型的 USB x.0 接口
银海：MCP是大模型的 USB x.0 接口
银海：MCP是大模型的 USB x.0 接口 银海：MCP是大模型的 USB x.0 接口 Modified May 17, 2025 • SSE注册方法： 直接拿到sse的url即可，就可以在cherry stuido中选择以“sse”的结构导入。 • npx注册方法： 点击“编辑JSON”按钮，选择“STDIO”选项的结构，将下面的json结构文件中的正文部分内容进行贴入。 Code block JSON Copy { "mcpServers": { "sequential thinking": { "command": "npx", "args": [ " y", "@modelcontextprotocol/server sequential thinking" ] } } } 配置好后点击“启用”按钮。 需要选择能够支持MCP的模型后，启用MCP服务 可以看到他MCP服务已经调用成功了。 5. 共学直播课程实践 👍 配合视频食用更佳哦：智能纪要：MCP系列教学和探索 2025年4月3日 • 搜索最新的新闻（serper search） + figma mcp，生成最新新闻数据渲染的界面。figma mcp npx版本目前好像因为简化了不需要启动本地服务，于是图片就没办法下载到本地了，这个估计近期作者会去修复。 • Cline + figma + 高德地图生成的多个页面。 https://mp.weixin.qq.com/s/pFq6WhcOSCin4zl9msPvKg 高德的mcp已经支持sse，可以查看这个文章。 把多个figma的链接放到一个需求文档里面可以直接直接生成： • Master go的mcp服务也可以支持生成界面。 6. 参考 Anthropic : Model Context Protocol (MCP) Model Context Protocol (MCP) Anthropic Get started with the Model Context Protocol (MCP) Introduction Model Context Protocol Learn how to add and use custom MCP tools within Cursor feature Cursor – Model Context Protocol 智能纪要：MCP系列教学和探索 2025年4月3日 Model Context Protocol (MCP) Anthropic Introduction Model Context Protocol Cursor – Model Context Protocol • SSE注册方法： 直接拿到sse的url即可，就可以在cherry stuido中选择以“sse”的结构导入。 • npx注册方法： 点击“编辑JSON”按钮，选择“STDIO”选项的结构，将下面的json结构文件中的正文部分内容进行贴入。 配置好后点击“启用”按钮。 需要选择能够支持MCP的模型后，启用MCP服务 可以看到他MCP服务已经调用成功了。 5. 共学直播课程实践 👍 配合视频食用更佳哦：智能纪要：MCP系列教学和探索 2025年4月3日 智能纪要：MCP系列教学和探索 2025年4月3日 • 搜索最新的新闻（serper search） + figma mcp，生成最新新闻数据渲染的界面。figma mcp npx版本目前好像因为简化了不需要启动本地服务，于是图片就没办法下载到本地了，这个估计近期作者会去修复。 • Cline + figma + 高德地图生成的多个页面。 https://mp.weixin.qq.com/s/pFq6WhcOSCin4zl9msPvKg 高德的mcp已经支持sse，可以查看这个文章。 把多个figma的链接放到一个需求文档里面可以直接直接生成： • Master go的mcp服务也可以支持生成界面。 6. 参考 Anthropic : Model Context Protocol (MCP) Model Context Protocol (MCP) Anthropic Model Context Protocol (MCP) Anthropic Get started with the Model Context Protocol (MCP) Introduction Model Context Protocol Introduction Model Context Protocol Learn how to add and use custom MCP tools within Cursor feature Cursor – Model Context Protocol Cursor – Model Context Protocol 1. 概念 MCP全称模型上下文协议（Model Context Protocol），是由 Anthropic （Claude 模型的主体公司）在 2024 年 11 月 推出并开源的一项创新标准，旨在让大语言模型能够无缝连接至第三方的数据源。 该协议支持对接 内容存储库、业务工具、开发环境 等多种外部服务，从而赋能 AI 大模型获取更丰富的上下文信息，生成更加精准、相关且智能的回答。 MCP 就像转接头，统一不同服务供所有人使用 MCP 就像一个“转接头”或“通用插座”，它的核心作用是统一不同外部服务（如 Google Drive、GitHub、Slack、本地文件系统等），通过标准化接口与 AI 模型对接。这样，开发者只需基于 MCP 规范开发一次“接口适配器”（MCP 服务器），就能让所有兼容 MCP 的模型（MCP 客户端）无缝接入，无需针对每个模型单独适配，大幅提升兼容性与开发效率。MCP 里面还包含 SSE（Server Sent Events），是一种允许服务器向浏览器推送实时更新的技术。 为AI模型量身定制的“USB C接口” 可以标准化地连接AI系统与各类外部工具和数据源 传统的 API 就像不同的门和钥匙 每扇门都需要自己的钥匙和特定的规则 为AI模型量身定制的“USB C接口” 可以标准化地连接AI系统与各类外部工具和数据源 为AI模型量身定制的“USB C接口” 可以标准化地连接AI系统与各类外部工具和数据源 传统的 API 就像不同的门和钥匙 每扇门都需要自己的钥匙和特定的规则 传统的 API 就像不同的门和钥匙 每扇门都需要自己的钥匙和特定的规则 MCP与传统API关键区别： • 单一协议： MCP像一个统一接口，只要一次整合，就能连接多个服务。 • 动态发现： AI模型能自动识别并使用可用的工具，不用提前写死每个接口。 • 双向通信： MCP支持类似WebSockets的实时双向通信，模型不仅能查询数据，还能主动触发操作。 LLM 也不是万能的，它缺失了很多能力，LLM 可以作为智能体的大脑，外部工具就是智能体的手和脚，协助智能体执行决策。一个典型的 Agent 的设计，LLM 充当大脑模块，通过多模态输入，处理信息，然后做出决策和规划行动。 MCP 就是想要通过一个开放的协议，为外部工具（或数据源）提供统一和 LLM 交互的统一集成，MCP 就是手脚连接身体的“关节”。 2. 案例 2.1 API 集成 通过联网搜索向 AI 提供最新信息 常见的 AI 助手采用通过联网搜索获取实时信息。当用户开启联网搜索时，助手先将用户的请求发送至搜索引擎，再将返回内容与用户输入一起提供给大模型，最终生成回答。搜索引擎在此作为实时信息源，为大语言模型提供额外的上下文。 通过 API 向 AI 提供自有系统数据 如果希望 AI 能提供行业内部信息、或者研发的自有系统内的信息，AI 联网搜索的效果就很不好，甚至无法实现。用户可以自行搭建 AI 代理，将自有系统的数据通过 API 的形式接入 AI 助手，为大语言模型补充提供丰富的上下文信息。 通过 MCP 服务器向 AI 提供上下文信息 MCP 协议解决了 AI 大模型与数据源集成碎片化的问题，提供统一标准，让开发者无需为每个数据源和 AI 助手单独开发连接器。通过 MCP，数据源和 AI 工具可建立安全双向连接，使 AI 在不同工具和数据集间流畅协作，实现更可持续的架构。 通过联网搜索向 AI 提供最新信息 常见的 AI 助手采用通过联网搜索获取实时信息。当用户开启联网搜索时，助手先将用户的请求发送至搜索引擎，再将返回内容与用户输入一起提供给大模型，最终生成回答。搜索引擎在此作为实时信息源，为大语言模型提供额外的上下文。 通过联网搜索向 AI 提供最新信息 常见的 AI 助手采用通过联网搜索获取实时信息。当用户开启联网搜索时，助手先将用户的请求发送至搜索引擎，再将返回内容与用户输入一起提供给大模型，最终生成回答。搜索引擎在此作为实时信息源，为大语言模型提供额外的上下文。 通过 API 向 AI 提供自有系统数据 如果希望 AI 能提供行业内部信息、或者研发的自有系统内的信息，AI 联网搜索的效果就很不好，甚至无法实现。用户可以自行搭建 AI 代理，将自有系统的数据通过 API 的形式接入 AI 助手，为大语言模型补充提供丰富的上下文信息。 通过 API 向 AI 提供自有系统数据 如果希望 AI 能提供行业内部信息、或者研发的自有系统内的信息，AI 联网搜索的效果就很不好，甚至无法实现。用户可以自行搭建 AI 代理，将自有系统的数据通过 API 的形式接入 AI 助手，为大语言模型补充提供丰富的上下文信息。 通过 MCP 服务器向 AI 提供上下文信息 MCP 协议解决了 AI 大模型与数据源集成碎片化的问题，提供统一标准，让开发者无需为每个数据源和 AI 助手单独开发连接器。通过 MCP，数据源和 AI 工具可建立安全双向连接，使 AI 在不同工具和数据集间流畅协作，实现更可持续的架构。 通过 MCP 服务器向 AI 提供上下文信息 MCP 协议解决了 AI 大模型与数据源集成碎片化的问题，提供统一标准，让开发者无需为每个数据源和 AI 助手单独开发连接器。通过 MCP，数据源和 AI 工具可建立安全双向连接，使 AI 在不同工具和数据集间流畅协作，实现更可持续的架构。 https://mp.weixin.qq.com/s/dRp02phUG4Z4o K VjtxNA 一文讲透 MCP（附 Apifox MCP Server 内测邀请） 2.2 Blender MCP 一句话提示，Claude自动化打开Blender将2D图片转为3D建模。而且还能只用一次提示词，再基于这个场景搭建可以互动的网页。 https://github.com/ahujasid/blender mcp GitHub ahujasid/blender mcp Contribute to ahujasid/blender mcp development by creating an account on GitHub. 还有直接通过口喷需求对话的方式快速去构建一个用 blender 渲染好的飞机... https://x.com/op7418/status/1901181086878814586 x.com No access ajIJcAQUofHxwmZ9 (1) 00:00 No access ajIJcAQUofHxwmZ9 (1) 00:00 2.3 Manus Manus 的底层其实也是用了类似 MCP 的方式进行了一系列的工具能力调用（但是求证后实际上是没有使用 MCP，但是思维模式相似），包括了类似“Browser Use”这种可以直接在终端中操控电脑浏览器的工具，能够跨越纯 API 数据获取的方式，进行指令的下发。 分析亚马逊在线商店（全程录屏效果参考） https://manus.im/share/c3onakN6Iajcm1Vt1xAVG7?replay=1 Sales Analysis and Strategies for Amazon Store Manus Manus is a general AI agent that turns your thoughts into actions. It excels at various tasks in work and life, getting everything done while you rest. No access 录屏2025 03 07 09.47.57 (1) 00:00 Read my CV & find ML jobs, save them to a file https://github.com/browser use/browser use?tab=readme ov file GitHub browser use/browser use: Make websites accessible for AI agents Make websites accessible for AI agents. Contribute to browser use/browser use development by creating an account on GitHub. No access 389458132 171fb4d6 0355 46f2 863e edb04a828d04 (1) 00:00 分析亚马逊在线商店（全程录屏效果参考） https://manus.im/share/c3onakN6Iajcm1Vt1xAVG7?replay=1 Sales Analysis and Strategies for Amazon Store Manus Manus is a general AI agent that turns your thoughts into actions. It excels at various tasks in work and life, getting everything done while you rest. No access 录屏2025 03 07 09.47.57 (1) 00:00 分析亚马逊在线商店（全程录屏效果参考） https://manus.im/share/c3onakN6Iajcm1Vt1xAVG7?replay=1 Sales Analysis and Strategies for Amazon Store Manus Manus is a general AI agent that turns your thoughts into actions. It excels at various tasks in work and life, getting everything done while you rest. No access 录屏2025 03 07 09.47.57 (1) 00:00 No access 录屏2025 03 07 09.47.57 (1) 00:00 Read my CV & find ML jobs, save them to a file https://github.com/browser use/browser use?tab=readme ov file GitHub browser use/browser use: Make websites accessible for AI agents Make websites accessible for AI agents. Contribute to browser use/browser use development by creating an account on GitHub. No access 389458132 171fb4d6 0355 46f2 863e edb04a828d04 (1) 00:00 Read my CV & find ML jobs, save them to a file https://github.com/browser use/browser use?tab=readme ov file GitHub browser use/browser use: Make websites accessible for AI agents Make websites accessible for AI agents. Contribute to browser use/browser use development by creating an account on GitHub. No access 389458132 171fb4d6 0355 46f2 863e edb04a828d04 (1) 00:00 No access 389458132 171fb4d6 0355 46f2 863e edb04a828d04 (1) 00:00 2.4 MCP 服务市场 市面上目前也有越来越多的能力被挖掘出来，并被统一、分类，由不同的数据源和工具控制和供给，以便于用户快速的安装调用。 https://github.com/modelcontextprotocol/servers GitHub modelcontextprotocol/servers: Model Context Protocol Servers Model Context Protocol Servers. Contribute to modelcontextprotocol/servers development by creating an account on GitHub. 网络爬虫，可以获取页面结构信息 让大语言模型能够获取到本机时间 让大语言模型能够调用发送邮件 网络爬虫，可以获取页面结构信息 网络爬虫，可以获取页面结构信息 让大语言模型能够获取到本机时间 让大语言模型能够获取到本机时间 让大语言模型能够调用发送邮件 让大语言模型能够调用发送邮件 控制电脑本地的文件读取 方便的管理 Github 项目信息 获取 Figma 的文件信息 控制电脑本地的文件读取 控制电脑本地的文件读取 方便的管理 Github 项目信息 方便的管理 Github 项目信息 获取 Figma 的文件信息 获取 Figma 的文件信息 ... 有非常多比较不错的集成综合工具站可以去看看 https://smithery.ai/ Smithery Model Context Protocol Registry Extend your agent's capabilities with Model Context Protocol servers. 来自社区好朋友idoubi大佬的杰作 https://mcp.so/ MCP Servers The largest collection of MCP Servers, including Awesome MCP Servers and Claude MCP integration. Search and discover MCP servers to enhance your AI capabilities. https://www.pulsemcp.com/ PulseMCP | Keep up to date with MCP Browse and discover MCP use cases, servers, clients, and news https://smithery.ai/ Smithery Model Context Protocol Registry Extend your agent's capabilities with Model Context Protocol servers. https://smithery.ai/ Smithery Model Context Protocol Registry Extend your agent's capabilities with Model Context Protocol servers. 来自社区好朋友idoubi大佬的杰作 https://mcp.so/ MCP Servers The largest collection of MCP Servers, including Awesome MCP Servers and Claude MCP integration. Search and discover MCP servers to enhance your AI capabilities. 来自社区好朋友idoubi大佬的杰作 https://mcp.so/ MCP Servers The largest collection of MCP Servers, including Awesome MCP Servers and Claude MCP integration. Search and discover MCP servers to enhance your AI capabilities. https://www.pulsemcp.com/ PulseMCP | Keep up to date with MCP Browse and discover MCP use cases, servers, clients, and news https://www.pulsemcp.com/ PulseMCP | Keep up to date with MCP Browse and discover MCP use cases, servers, clients, and news 3.实践 vscode下载地址：https://code.visualstudio.com/ 扩展里面搜索：cline 3.1 将设计稿转成前端代码 Figma to html MCP 实战，仅需贴入一个链接给大模型，就可以将 figma 中的设计稿界面快速的变成在线可以预览的网页。 1. 安装 MCP 使用的是 Figma Context MCP 框架，在本地启动服务后再进行信息注册。 https://github.com/GLips/Figma Context MCP configuration GitHub GLips/Figma Context MCP: MCP server to provide Figma layout information to AI coding agents MCP server to provide Figma layout information to AI coding agents like Cursor GLips/Figma Context MCP 2. 使用 JSON 结构进行注册，同时获取 Figma 的 API Key 2.复制 Figma 稿件地址 原稿件样例 贴入 figma 稿件地址后，等待效果生成 3.生成预览前端代码 生成的代码预览效果图 生成的代码预览效果图 1. 安装 MCP 使用的是 Figma Context MCP 框架，在本地启动服务后再进行信息注册。 https://github.com/GLips/Figma Context MCP configuration GitHub GLips/Figma Context MCP: MCP server to provide Figma layout information to AI coding agents MCP server to provide Figma layout information to AI coding agents like Cursor GLips/Figma Context MCP 2. 使用 JSON 结构进行注册，同时获取 Figma 的 API Key 1. 安装 MCP 使用的是 Figma Context MCP 框架，在本地启动服务后再进行信息注册。 https://github.com/GLips/Figma Context MCP configuration GitHub GLips/Figma Context MCP: MCP server to provide Figma layout information to AI coding agents MCP server to provide Figma layout information to AI coding agents like Cursor GLips/Figma Context MCP 2. 使用 JSON 结构进行注册，同时获取 Figma 的 API Key 2.复制 Figma 稿件地址 原稿件样例 贴入 figma 稿件地址后，等待效果生成 2.复制 Figma 稿件地址 原稿件样例 贴入 figma 稿件地址后，等待效果生成 3.生成预览前端代码 生成的代码预览效果图 生成的代码预览效果图 3.生成预览前端代码 生成的代码预览效果图 生成的代码预览效果图 当然，MCP 服务也没有那么“神”，其实是做了一个编辑器的中间转换器，能够支持编辑和读取 figma 内的相关数据。 No access 录屏2025 03 19 09.59.10 00:00 在这个场景中的 MCP 相当于是对 Figma 的数据上下文结构信息进行读取，结构化设计能力还是依赖于底层模型 Claude，还是会出现布局混乱的现象，在实际用途上是更方便的取数了。 Figma 的 MCP 文件读取，可以看到实际上是读取了 Figma 的文件 Dom 结构信息。 使用图片下载的 MCP 能力，对页面结构中的图片进行填充。 No access 录屏2025 03 19 09.59.10 00:00 在这个场景中的 MCP 相当于是对 Figma 的数据上下文结构信息进行读取，结构化设计能力还是依赖于底层模型 Claude，还是会出现布局混乱的现象，在实际用途上是更方便的取数了。 No access 录屏2025 03 19 09.59.10 00:00 No access 录屏2025 03 19 09.59.10 00:00 在这个场景中的 MCP 相当于是对 Figma 的数据上下文结构信息进行读取，结构化设计能力还是依赖于底层模型 Claude，还是会出现布局混乱的现象，在实际用途上是更方便的取数了。 Figma 的 MCP 文件读取，可以看到实际上是读取了 Figma 的文件 Dom 结构信息。 使用图片下载的 MCP 能力，对页面结构中的图片进行填充。 Figma 的 MCP 文件读取，可以看到实际上是读取了 Figma 的文件 Dom 结构信息。 使用图片下载的 MCP 能力，对页面结构中的图片进行填充。 3.2 生成 AI 新闻资讯卡片 主要是实现一句话联网搜索相关信息后，参考相关的样式图进行页面填充，但是看起来也并不稳定，底层还是依赖于 Claude 的能力。 1. 获取最新的新闻数据 2. 参考 figma 样式 给予对应的 figma 样式参考链接 3. 生成最后的效果 1. 获取最新的新闻数据 1. 获取最新的新闻数据 2. 参考 figma 样式 给予对应的 figma 样式参考链接 2. 参考 figma 样式 给予对应的 figma 样式参考链接 3. 生成最后的效果 3. 生成最后的效果 No access 录屏2025 03 19 17.56.30 00:00 No access 录屏2025 03 19 17.56.30 00:00 4. MCP客户端工具 注意，很多模型是不能直接支持mcp服务的，因为模型本身没有办法去识别插件的能力（类似之前的function calling）也需要去对不同的工具去识别，在这里推荐开源的模型就是Qwen max。 Cherry Studio，支持了SSE（类似https接口形式）和npx的安装方式。 https://cherry ai.com/ Cherry Studio 全能的AI助手 Cherry Studio AI 是一款强大的多模型 AI 助手，支持 iOS、macOS 和 Windows 平台。快速切换多个先进的 LLM 模型，提升工作学习效率。 当然必须给他点个赞，还是个开源项目：https://github.com/CherryHQ/cherry studio 安装完cherry studio后，除了配置基础的模型服务，我们主要在设置中去配置MCP服务器，同时我们应该先把UV/Bun进行一键安装依赖，然后点击添加服务器。 以idoubi大佬的mcp服务市场对接为例：https://mcp.so/