MCP协议入门指南,4个案例+2个实践全解析!

自2月中旬开始,MCP协议火了。Github上的Star指数,开始加速增长。前文也分享过关于MCP的一些内容。感兴趣可关注专栏:https://blog.csdn.net/aibots/category_12631259.html

那么,今天一起看看MCP协议到底是什么?为什么要用它?

一、理解MCP协议

        MCP全称模型上下文协议(Model Context Protocol),是由 Anthropic (Claude 模型的主体公司)在 2024 年 11 月 推出并开源的一项创新标准,旨在让大语言模型能够无缝连接至第三方的数据源。

        开发者只需基于 MCP 规范开发一次“接口适配器”(MCP 服务器),就能让所有兼容 MCP 的模型(MCP 客户端)无缝接入,无需针对每个模型单独适配,大幅提升兼容性与开发效率。

        MCP 里面还包含 SSE(Server-Sent Events),是一种允许服务器向浏览器推送实时更新的技术。

 

该协议支持对接 内容存储库、业务工具、开发环境 等多种外部服务,从而赋能 AI 大模型获取更丰富的上下文信息,生成更加精准、相关且智能的回答。MCP 就像转接头,统一不同服务供所有人使用

二、MCP与AI大模型的关系

为AI模型量身定制的“USB-C接口”可以标准化地连接各种AI系统与各类外部工具和数据源。

 

传统的 API 就像不同的门和钥匙,每扇门都需要自己的钥匙和特定的规则

 

MCP与传统API关键区别:

  • 单一协议: MCP像一个统一接口,只要一次整合,就能连接多个服务。

  • 动态发现: AI模型能自动识别并使用可用的工具,不用提前写死每个接口。

  • 双向通信: MCP支持类似WebSockets的实时双向通信,模型不仅能查询数据,还能主动触发操作。

 

LLM 也不是万能的,它缺失了很多能力,LLM 可以作为智能体的大脑,外部工具就是智能体的手和脚,协助智能体执行决策。一个典型的 Agent 的设计,LLM 充当大脑模块,通过多模态输入,处理信息,然后做出决策和规划行动。

MCP 就是想要通过一个开放的协议,为外部工具(或数据源)提供统一和 LLM 交互的统一集成,MCP 就是手脚连接身体的“关节”。

三、MCP能做什么?

1、API集成

  • 通过联网搜索向 AI 提供最新信息

常见的 AI 助手采用通过联网搜索获取实时信息。当用户开启联网搜索时,助手先将用户的请求发送至搜索引擎,再将返回内容与用户输入一起提供给大模型,最终生成回答。搜索引擎在此作为实时信息源,为大语言模型提供额外的上下文。

 

  • 通过 API 向 AI 提供自有系统数据

如果希望 AI 能提供行业内部信息、或者研发的自有系统内的信息,AI 联网搜索的效果就很不好,甚至无法实现。用户可以自行搭建 AI 代理,将自有系统的数据通过 API 的形式接入 AI 助手,为大语言模型补充提供丰富的上下文信息。

 

  • 通过 MCP 服务器向 AI 提供上下文信息

MCP 协议解决了 AI 大模型与数据源集成碎片化的问题,提供统一标准,让开发者无需为每个数据源和 AI 助手单独开发连接器。通过 MCP,数据源和 AI 工具可建立安全双向连接,使 AI 在不同工具和数据集间流畅协作,实现更可持续的架构。

 

2、Blender MCP

一句话提示,Claude自动化打开Blender将2D图片转为3D建模。而且还能只用一次提示词,再基于这个场景搭建可以互动的网页。

 

 

 

 

还有直接通过口喷需求对话的方式快速去构建一个用 blender 渲染好的飞机...

 

3、Manus

Manus 的底层其实也是用了类似 MCP 的方式进行了一系列的工具能力调用(但是求证后实际上是没有使用 MCP,但是思维模式相似),包括了类似“Browser Use”这种可以直接在终端中操控电脑浏览器的工具,能够跨越纯 API 数据获取的方式,进行指令的下发。

  • 分析亚马逊在线商店(全程录屏效果参考)

https://manus.im/share/c3onakN6Iajcm1Vt1xAVG7?replay=1

 

  • Read my CV & find ML jobs, save them to a file

 

4、MCP 服务市场

市面上目前也有越来越多的能力被挖掘出来,并被统一、分类,由不同的数据源和工具控制和供给,以便于用户快速的安装调用。

https://github.com/modelcontextprotocol/servers

 

飞书文档中还有非常多比较不错的集成综合工具站可以去看看

 

四、MCP实战

vscode下载地址:https://code.visualstudio.com/

扩展里面搜索:cline

 

1、将设计稿转成前端代码

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 能力,对页面结构中的图片进行填充。

 

2、生成 AI 新闻资讯卡片

主要是实现一句话联网搜索相关信息后,参考相关的样式图进行页面填充,但是看起来也并不稳定,底层还是依赖于 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的出现,可以说是人工智能发展路上的一个重要标志。它不再是被动的“回答者”,而是主动的“协作者”。不仅改变了技术的边界,也悄然重塑了我们与世界的互动方式。虽然 MCP 技术本身可能看起来复杂,但它的核心思想——“连接和整合”——是非常直观且实用的。

通过了解 MCP 的基本原理,普通人也能更好地利用基于 MCP 的工具和服务来提升自己的工作效率。

五、一些MCP应用

1)搜索最新的新闻(serper search) + figma mcp

搜索最新的新闻(serper search) + figma mcp,生成最新新闻数据渲染的界面。figma mcp npx版本目前好像因为简化了不需要启动本地服务,于是图片就没办法下载到本地了,这个估计近期作者会去修复。

 

2)Cline + figma + 高德地图生成的多个页面。

高德的MCP已经支持SSE,把多个Figma的链接放到一个需求文档里面可以直接直接生成:

Master go的mcp服务也可以支持生成界面。

 

注:本文来自通往AGI之路

### MCP协议简介 Model Context Protocol (MCP) 是一种用于实现大型语言模型(LLM)与外部数据源和工具之间无缝集成的开放协议[^4]。它采用经典的客户端-服务器(CS)架构,其中 **MCP Host** 表示需要通过 MCP 获取数据的应用程序,而 **MCP Server** 则是一个轻量级应用程序,负责暴露某些特定的功能或资源给主机。 #### 关键组件说明 - **MCP Host**: 如 Claude Desktop、IDE 或其他 AI 工具等,这些程序依赖于 MCP 来获取所需的数据或能力[^1]。 - **MCP Client**: 客户端部分通常由 MCP 协议驱动,能够一对一地连接到指定的 MCP Server 上[^3]。 - **MCP Server**: 负责对外提供某种特殊功能的小型化应用,比如访问本地文件系统、调用远程 API 等[^2]。 - **Local Data Resources**: 可供 MCP Server 访问的安本地资源,例如文件夹、数据库或其他服务。 - **Remote Services**: 支持通过网络接口(API 形式)与其他外部系统建立通信通道。 --- ### 实现首个 MCP Server 的教程 以下是基于现有文档指导来创建并运行一个基础版本 MCP Server 所需的关键步骤: #### 准备工作环境 确保安装有 Python 和 pip 命令行工具,并且具备基本开发技能以便理解后续操作逻辑。如果尚未完成此环节,则先执行如下命令更新软件包管理器: ```bash pip install --upgrade pip setuptools wheel ``` 接着引入必要的库支持以简化编码过程中的复杂度处理问题: ```python import json from http.server import BaseHTTPRequestHandler, HTTPServer ``` 上述代码片段展示了导入 JSON 解析模块以及内置 Web 服务器框架的核心类定义方法。 #### 编写核心业务逻辑 下面给出一段简单的示例脚本作为起点,演示如何响应来自 MCP Host 请求的消息体内容转换成标准格式返回去的过程: ```python class MCPRequestHandler(BaseHTTPRequestHandler): def do_POST(self): content_length = int(self.headers['Content-Length']) post_data = self.rfile.read(content_length) try: request_json = json.loads(post_data.decode('utf-8')) response_payload = { 'status': 'success', 'message': f"Received data: {request_json}" } status_code = 200 except Exception as e: response_payload = {'error': str(e)} status_code = 400 self.send_response(status_code) self.send_header('Content-Type', 'application/json') self.end_headers() self.wfile.write(json.dumps(response_payload).encode('utf-8')) def run(server_class=HTTPServer, handler_class=MCPRequestHandler, port=8080): server_address = ('', port) httpd = server_class(server_address, handler_class) print(f'Starting MCP Server on port {port}...') httpd.serve_forever() if __name__ == "__main__": run() ``` 这段代码实现了最基本的 POST 方法处理器 `do_POST` ,用来接收传入参数并通过异常捕获机制保障稳定性的同时反馈适当的结果状态码信息给调用方知道当前请求成功与否情况怎样。 #### 启动您的 MCP Server 保存以上部修改后的完整版 python 文件至任意目录下命名为 mcp_server.py 并切换终端位置至此路径处输入以下指令即可启动监听模式等待连接到来: ```bash python mcp_server.py ``` 此时应该能看到类似这样的提示消息表示正常运作当中:"Starting MCP Server on port 8080..." 最后一步就是按照官方指南配置好对应平台上的插件选项指向刚才开启的服务地址便能正式投入使用啦! --- ### 注意事项 实际项目部署过程中可能还会涉及到安性加固措施诸如身份验证机制设置等方面考量因素;另外考虑到跨域资源共享(CORS)策略限制也可能影响正常使用体验所以必要时候记得调整浏览器端权限设定或者利用反向代理技术绕过障碍达成目标效果哦!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值