MCP探索 - 技术栈

前言

MCP 作为 Agent 中很火的一个概念，我们来了解一下它具体是什么？有什么作用？有什么应用场景？

在下文开始之前，我们首先来关注一个场景：在USB 协议诞生前，电子设备（如手机、平板、键盘）使用不同的充电接口，这导致：

开发成本高（厂商需为每种设备开发独立驱动程序和接口）；
用户体验差（用户需携带多种充电线缆，且设备间无法互通）；
生态割裂（硬件和软件难以跨平台兼容）；

而USB通过标准化协议统一接口标准，实现即插即用，让厂商专注功能创新，用户摆脱适配困扰，解决了硬件接口的碎片化问题，最终推动硬件生态爆发。

MCP是什么？

MCP（Model Context Protocol，模型上下文协议） 是 Anthropic 于 2024 年 11 月 25 日提出并开源的一项新标准协议，专为LLM设计的开放、标准化通信协议，标准化了应用程序向 LLM 提供上下文的方式，旨在实现LLM与外部数据源、工具之间的高效交互，核心目标是解决传统集成中的"MxN"问题（即M个模型与N个工具之间的复杂集成。

简单来说：MCP就是协议，是在不同【应用/服务 】与【LLM】进行通信时所要遵循的通信标准，以达到让LLM理解和调用【应用/服务】的目的

痛点

在MCP出来之前，AI模型与外部数据源、工具交互存在以下痛点：

集成 碎片化 与高成本开发

传统开发中上下文管理逻辑碎片化：AI模型需通过定制化API或插件连接不同数据源（如数据库、文件系统、第三方服务），每个集成需独立开发接口、处理认证、错误逻辑等，反复适配各类不同的平台，开发效率低且整合与维护成本高；
缺乏动态性与上下文感知

传统API集成需预先硬编码所有可能的工具调用逻辑，模型无法动态发现新功能或根据上下文实时调整交互策略，灵活性受限
单向通信与低效协作

通常基于单向请求-响应模式，难以支持实时双向通信（如持续获取数据更新或触发动态操作），导致交互延迟或功能受限
数据安全问题

传统集成中，每个API需单独处理认证和权限控制，易出现安全漏洞（如密钥暴露）或权限管理混乱
生态割裂

不同AI工具或数据源采取私有协议，就难以实现跨模型、跨平台协作（如OpenAI的Plugins与其他模型不兼容）

和Function Call对比

想象你请了一位全能助理 LLM ，它本来只会回答理论问题。现在你想让它能实际操作一些事情：

传统Function Call（函数调用）： ➤就像给助理一本固定手册："你只能按这20条指令做事"➤ 每次新增能力（比如订机票），都需要重新印刷整本手册➤ 不同公司的助理（GPT/Claude等）手册格式还不一样
MCP 协议： 给助理配了一个万能插座，可以随时插入新工具➤ 需要计算？插上计算器模块➤ 需要订餐？插上外卖系统模块➤ 模块由不同厂商提供，但插座标准统一

关键区别

扩展性：Function Call像固定工具箱，MCP像无限扩展的USB接口
协作性：MCP允许不同品牌的工具/助理互相兼容
安全性：MCP的每个工具都有独立开关（权限控制）

场景	Function Call实现	MCP实现
查天气	需提前教助理调用特定天气API	助理自动发现已安装的"天气插件"
做PPT	只能使用预设的模板工具	可组合"设计插件+数据插件+翻译插件"
订会议室	必须对接公司特定系统	任何会议室系统只要符合插座标准就能即插即用

Function Call是固定内建功能 ，MCP是动态外挂生态------就像手机从不可拆卸电池（早期Function Call）发展到Type-C通用接口（MCP）的进化

方案与价值

为解决上文中阐述的痛点，MCP应运而生，核心点就是在LLM调用外部系统能力时要统一和标准化解决碎片化问题 ，就像 AI 领域的 "USB-C接口"，统一了上下文逻辑，抽象复杂管理细节，让开发者聚焦创新而非重复造轮子，降低技术门槛，最终允许 AI 模型无缝连接各种外部工具和数据源，即插即用，实现动态发现、调用和集成，同时也释放了生态协作潜力。

MCP的核心原理

整体架构

MCP采用客户端-服务器架构，包含三个关键部分：

MCP 主机（Host-应用环境） ：希望通过 MCP 访问数据的 AI 工具或应用程序（如Claude Desktop、IDE等）。
MCP客户端（Client-协议转换） ：集成在Host中，负责与服务器保持1:1连接的协议客户端，标准化请求格式，负责将用户请求转化为MCP服务器可识别的标准化API请求调用（基于JSON-RPC 2.0协议）。
MCP 服务器（Server-中间件） ：作为云服务/信息源，轻量级程序，每个程序通过MCP提供不同的能力，比如有的连接本地的资源（文件，数据库），有的通过API请求远程资源

通信机制

通讯方式主要包含两种：Stdio、SSE。都都基于JSON-RPC 2.0协议传输信息

HTTP with SSE：HTTP网络请求建立连接，适用于远程通信；
Stdio：使用标准输入输出管道进行通信，相当于把 mcp server 当成子进程运行在了 mcp client中，通过进程间的通讯建立连接，适用于本地通信。

MCP的特点

标准化协议： M通过JSON-RPC统一通信规则，解决生态碎片化问题。
动态发现： LLM能根据任务需求动态发现、自动识别并调用可用的工具，实现工具的灵活组合，无需预先硬编码集成工具能力。（如：Claude 可自动调用 GitHub MCP 服务器获取仓库 Issue 列表，无需手动编写 API 代码），通过Tools（功能）、Resources（数据）、Prompts（模板）动态增强模型能力。
双向通信：支持类似WebSockets的实时双向通信，模型不仅能查询数据，还允许LLM动态获取数据并主动触发操作（如查询日历、发送邮件）。
安全机制：OAuth/API tokens认证、数据隔离，适配企业级安全需求。
开放生态：开源协议推动社区共建（如mcp.so导航站、Fleur工具市场）。

MCP的应用场景

MCP 生态

MCP生态：github.com/modelcontex...

应用场景

智能问答与聊天助手

AI助手可以通过MCP访问日历、邮件、数据库等工具，自动完成日程安排、邮件发送、数据查询等。
编程辅助与 开发者工具

在IDE（集成开发环境）中，MCP可以连接文件系统、版本控制工具（如Git）、包管理器等，提供更智能的代码建议、自动化代码生成、自动化单元测试等等。
创意设计

非专业用户可通过 Blender MCP 用自然语言生成 3D 模型
跨领域跨平台协作

语言模型生成文本后，MCP可以将文本传递给图像生成模型，生成配图，再传递给设计模型合成最终的海报，实现多模型协作。
企业级数据整合

MCP 连接企业内部数据库、云存储和第三方服务（如 GitHub、Slack），实现多源数据动态整合。例如，客服 AI 可同时访问客户信息库、产品知识库和实时工单系统，提升响应效率
.....

案例

Design To Code

具体步骤：

安装 MCP，使用框架：Figma Context MCP github.com/GLips/Figma...
在本地启动服务，进行信息注册配置 Figma 的 API Key；（这里选择Cursor IDE作为Host，其集成有MCP Client）

ini 复制代码

npx figma-developer-mcp --figma-api-key=<your-figma-api-key>
# initializing Figma MCP Server in HTTP mode on port 3333...
# HTTP server listening on port 3333
# SSE endpoint available at http://localhost:3333/sse
# Message endpoint available at http://localhost:3333/messages

json 复制代码

{
  "mcpServers": {
    "Framelink Figma MCP": {
      "command": "npx",
      "args": ["-y", "figma-developer-mcp", "--figma-api-key=<your-figma-api-key>", "--stdio"]
    }
  }
}

服务器启动后，将Cursor连接到MCP服务器
去Figma复制图层元素的链接

回到cursor在 Chat 粘贴链接，等待代码生成

代码效果预览

剖析Cursor调用MCP具体干了什么?

根据我提供的链接和指令，意图识别到是figma URL链接，调用Figma MCP的工具get_figma_data获取到Figma文件的数据

为什么cursor知道要发起 MCP 的调度？

解释：mcp server tool 中一般会包含（name、description，arguments等信息），当把这个mcp server 添加到了cursor中时，相当于把这个tool的信息注入到了cursor的系统提示词中。所以当我在cursor中输入了 figma 链接时，它就知道：当遇到用户输入的 figma 链接时，就要来调度执行这个mcp server tool，同时将相应参数传递给mcp server，mcp server tool执行完后会返回结果(Result)给到cursor，cursor再继续后面的步骤。（会导致问题2）

把Result展开，可以看到这一步可以获取到figma文件的metadata（元数据）、nodes（设计稿每个节点数据）、globalVars（全局变量：包含样式规范）
调用download_figma_images 下载icon和图片资源，执行结果就是在项目中生成了静态资源svg
我的指令里有说明框架为Vue，而目前项目没有Vue搭建的项目结构，所以cursor调用终端输入命令安装vue，用脚手架搭建项目并安装了必要的依赖
生成Card组件，生成App.vue使用组件，删除搭建Vue项目时默认创建的组件

生成组件的过程中涉及到：将 Figma节点树转换为结构化数据，结构化数据到Vue模板的映射，组件拆分等复杂技术
启动本地开发服务器npm run dev
总结归纳

存在问题

样式失真，布局混乱

MCP 相当于是对 Figma 的数据上下文结构信息进行读取，返回设计语义树， 依赖设计师能力

结构化数据抽象，以及到Vue模板的映射，代码生成会依赖底层模型的能力等都会影响最后页面呈现的效果
流程不够灵活：

在上面阐述具体流程时，我描述到cursor是先调用工具能力获取到figma文件数据以及下载了静态资源后，才整体构建了vue项目，这与开发流程相悖，日常开发中我们肯定是先搭建项目框架，再逐步拆分业务模块去开发。尝试了很多次发现cursor都是会先调用mcp的工具能力，其原因是用户提供figma连接与mcp server信息匹配度太高，导致一定会先调用mcp server tool的能力，执行完返回结果后，cursor再继续后面的步骤。

参考

Model Context Protocol (MCP) - Anthropic

Introduction - Model Context Protocol

Cursor -- Model Context Protocol

A Deep Dive Into MCP and the Future of AI Tooling | Andreessen Horowitz