微信扫码
添加专属顾问
我要投稿
MCP协议,大模型的"USB-C接口",快速入门指南来了!核心内容:1. MCP协议定义与核心价值解析2. 4个案例演示MCP在实际应用中的威力3. 2个实践操作,带你从零开始掌握MCP
从2月中旬开始,MCP协议火了。
Github上的Star指数,开始加速增长。
上周,OpenAI创始人山姆·奥特曼也在X上公布,对其Agents SDK进行了重大更新,并支持了对手Anthropic推出的MCP服务协议。
那么,MCP协议到底是什么?为什么要用它?
银海老师整理出来了一份MCP的入门指南,涵盖了4个案例、2个实践。
接下来也会在「通往AGI之路」的视频号直播间,开启一系列的共学课程。
第一节课「初识及入门」直播已经结束,想要回顾的小伙伴,可以前往视频号已观看回放哦。
先来快速回顾下直播重点:
搜索最新的新闻(serper search) + figma mcp,生成最新新闻数据渲染的界面。figma mcp npx版本目前好像因为简化了不需要启动本地服务,于是图片就没办法下载到本地了,这个估计近期作者会去修复。
Cline + figma + 高德地图生成的多个页面。
高德的MCP已经支持SSE,把多个Figma的链接放到一个需求文档里面可以直接直接生成:
Master go的mcp服务也可以支持生成界面。
以下是银海老师整理出的文字版本:《MCP是大模型的 USB x.0 接口》
MCP是什么?
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 就像不同的门和钥匙
每扇门都需要自己的钥匙和特定的规则
MCP与传统API关键区别:
单一协议: MCP像一个统一接口,只要一次整合,就能连接多个服务。
动态发现: AI模型能自动识别并使用可用的工具,不用提前写死每个接口。
双向通信: MCP支持类似WebSockets的实时双向通信,模型不仅能查询数据,还能主动触发操作。
LLM 也不是万能的,它缺失了很多能力,LLM 可以作为智能体的大脑,外部工具就是智能体的手和脚,协助智能体执行决策。一个典型的 Agent 的设计,LLM 充当大脑模块,通过多模态输入,处理信息,然后做出决策和规划行动。
MCP 就是想要通过一个开放的协议,为外部工具(或数据源)提供统一和 LLM 交互的统一集成,MCP 就是手脚连接身体的“关节”。
通过联网搜索向 AI 提供最新信息
常见的 AI 助手采用通过联网搜索获取实时信息。当用户开启联网搜索时,助手先将用户的请求发送至搜索引擎,再将返回内容与用户输入一起提供给大模型,最终生成回答。搜索引擎在此作为实时信息源,为大语言模型提供额外的上下文。
如果希望 AI 能提供行业内部信息、或者研发的自有系统内的信息,AI 联网搜索的效果就很不好,甚至无法实现。用户可以自行搭建 AI 代理,将自有系统的数据通过 API 的形式接入 AI 助手,为大语言模型补充提供丰富的上下文信息。
MCP 协议解决了 AI 大模型与数据源集成碎片化的问题,提供统一标准,让开发者无需为每个数据源和 AI 助手单独开发连接器。通过 MCP,数据源和 AI 工具可建立安全双向连接,使 AI 在不同工具和数据集间流畅协作,实现更可持续的架构。
一句话提示,Claude自动化打开Blender将2D图片转为3D建模。而且还能只用一次提示词,再基于这个场景搭建可以互动的网页。
Manus 的底层其实也是用了类似 MCP 的方式进行了一系列的工具能力调用(但是求证后实际上是没有使用 MCP,但是思维模式相似),包括了类似“Browser Use”这种可以直接在终端中操控电脑浏览器的工具,能够跨越纯 API 数据获取的方式,进行指令的下发。
分析亚马逊在线商店(全程录屏效果参考)
https://manus.im/share/c3onakN6Iajcm1Vt1xAVG7?replay=1
Read my CV & find ML jobs, save them to a file
市面上目前也有越来越多的能力被挖掘出来,并被统一、分类,由不同的数据源和工具控制和供给,以便于用户快速的安装调用。
https://github.com/modelcontextprotocol/servers
飞书文档中还有非常多比较不错的集成综合工具站可以去看看
vscode下载地址:https://code.visualstudio.com/
扩展里面搜索:cline
Figma to html MCP 实战,仅需贴入一个链接给大模型,就可以将 figma 中的设计稿界面快速的变成在线可以预览的网页。
安装 MCP
使用的是 Figma-Context-MCP 框架,在本地启动服务后再进行信息注册。
https://github.com/GLips/Figma-Context-MCP#configuration
使用 JSON 结构进行注册,同时获取 Figma 的 API Key
复制 Figma 稿件地址
(原稿件样例↑)
贴入 figma 稿件地址后,等待效果生成
生成预览前端代码
当然,MCP 服务也没有那么“神”,其实是做了一个编辑器的中间转换器,能够支持编辑和读取 figma 内的相关数据。
在这个场景中的 MCP 相当于是对 Figma 的数据上下文结构信息进行读取,结构化设计能力还是依赖于底层模型 Claude,还是会出现布局混乱的现象,在实际用途上是更方便的取数了。
Figma 的 MCP 文件读取,可以看到实际上是读取了 Figma 的文件 Dom 结构信息。
使用图片下载的 MCP 能力,对页面结构中的图片进行填充。
主要是实现一句话联网搜索相关信息后,参考相关的样式图进行页面填充,但是看起来也并不稳定,底层还是依赖于 Claude 的能力。
获取最新的新闻数据
参考 Figma 样式
给予对应的 Figma 样式参考链接
生成最后的效果
MCP客户端工具
注意,很多模型是不能直接支持MCP服务的,因为模型本身没有办法去识别插件的能力(类似之前的function calling)也需要去对不同的工具去识别,在这里推荐开源的模型就是Qwen-max。
Cherry Studio,支持了SSE(类似https接口形式)和npx的安装方式。
当然必须给他点个赞,还是个开源项目:
https://github.com/CherryHQ/cherry-studio
安装完cherry studio后,除了配置基础的模型服务,我们主要在设置中去配置MCP服务器,同时我们应该先把UV/Bun进行一键安装依赖,然后点击添加服务器。
以idoubi大佬的mcp服务市场对接为例:https://mcp.so/
SSE注册方法:
直接拿到SSE的URL即可,就可以在cherry stuido中选择以“SSE”的结构导入。
npx注册方法:
点击“编辑JSON”按钮,选择“STDIO”选项的结构,将下面的json结构文件中的正文部分内容进行贴入。
{
"mcpServers": {
"sequential-thinking": {
"command": "npx",
"args": [
"-y",
"@modelcontextprotocol/server-sequential-thinking"
]
}
}
}
配置好后点击“启用”按钮。
需要选择能够支持MCP的模型后,启用MCP服务。
可以看到MCP服务已经调用成功了。
虽然 MCP 技术本身可能看起来复杂,但它的核心思想——“连接和整合”——是非常直观且实用的。
嘉宾:idoubi、银海、成峰CE、许键等
53AI,企业落地大模型首选服务商
产品:场景落地咨询+大模型应用平台+行业解决方案
承诺:免费场景POC验证,效果验证后签署服务协议。零风险落地应用大模型,已交付160+中大型企业
2024-08-13
2024-06-13
2024-08-21
2024-09-23
2024-07-31
2024-05-28
2024-08-04
2024-04-26
2024-07-09
2024-09-17
2025-04-02
2025-04-02
2025-04-01
2025-04-01
2025-04-01
2025-03-30
2025-03-30
2025-03-28