说实话我刚开始看到“MCP”这个词以为是又一轮概念包装。真正动手配完几个 MCP Server又自己写了一个之后才明白为什么整个 AI 圈都在聊它。你可以不写代码但你只要在用 AI 工具就有必要花半小时搞清楚这个东西。MCP 全称 Model Context Protocol模型上下文协议最早由 Anthropic 在 2024 年底开源。本质上它定义了一套通用规则让 AI 大模型和外部工具、数据源之间能够标准化地连接和通信。说得直白一点以前想让 AI 读文件、查数据库、操作浏览器每个需求都要单独写一套接口。现在统一成一种“插头”谁都能插插上就能用。这篇文章从原理讲到实操再讲到踩坑尽量用大白话保证你读完能上手用起来。1. MCP 到底解决的是什么问题1.1 在 MCP 出现之前AI 工具是怎么连接的你可能听过大模型有“函数调用”能力也就是 Function Calling。它的流程大概是开发者预先定义好几个函数告诉模型这些函数叫什么、参数是什么模型根据用户输入判断该调哪个函数然后输出一个结构化调用请求由开发者的代码去执行再把结果返回给模型继续回答。这套模式在单个产品里能用但放到整个生态里就非常痛苦。举个例子如果你做一个内部知识库问答机器人既要让它搜文档又要让它查工单系统还要让它读数据库。每一个数据源都要你写接口、写函数定义、处理鉴权然后还要把这些函数的说明写得足够清楚模型才不会乱调。更麻烦的是OpenAI 有 OpenAI 的函数调用格式Anthropic 有 Anthropic 的格式Google 也有自己的格式。工具方要接入不同的模型就得分别适配 N 套规范。我见过不少团队光在“模型工具接口适配”这件事上就能耗掉两周工作量。这还不是最难受的。真正的痛点是工具本身是静态的。你想让 AI 读一个文件你必须提前把文件路径写死在函数里你想让 AI 操作一个软件你必须把操作指令一条条翻译成代码。模型没有能力“发现”一个新工具并立刻使用它也没有标准方式去获取工具的实时状态。结果就是每个 AI 应用像是孤岛工具和模型之间的连接像拉网线一样一台设备一条线。1.2 一个统一协议的“插头革命”MCP 的思路很简单与其每家做一套私有连接方式不如定义一套公共协议让所有模型、所有工具都按这套协议说话。这个场景特别像充电口。以前手机充电器各家用各家的Micro USB、Lightning、Type-C 混着来出门要带好几根线。后来 Type-C 逐渐统一一根线基本通吃所有设备。MCP 就是要做 AI 世界的 Type-C。在这个协议里角色分得很清楚。模型或者 AI 应用是 Host也就是宿主工具方提供一个 MCP Server负责把自己的能力暴露出来Host 内部内置 MCP Client负责和 Server 通信。工具方只需要实现一次 MCP Server任何支持 MCP 的 Host 都能直接用不用重复适配。而且 MCP Server 可以实时向模型暴露“我能干什么”“我这边有什么数据”模型通过协议自动发现工具这比传统 Function Calling 灵活得多。所以 MCP 的价值不只是省事。它让 AI 应用从“点对点连接”进化到了“平台化连接”。你可以想象成以前的电脑装外设要装驱动、配端口、调中断。现在 USB 口一插就能用。MCP 就是给 AI 外设做的 USB 标准。这个转变的意义不在于某个具体工具好不好用而在于它改变了整个生态的连接效率。2. 拆开 MCP 的协议看它的底层设计2.1 三个核心组件Host、Client 与 ServerMCP 采用客户端-服务器架构三个核心组件分别是 Host、Client 和 Server。Host 是用户实际在用的 AI 应用比如 Claude Desktop、Trae、Cursor 这类工具。Client 是宿主内部负责通信的模块它负责建立连接、发送请求、接收结果。Server 是工具方提供的能力服务它可以是本地运行的进程也可以是远程的服务器。三者之间的关系很像浏览器和网站浏览器是 Host内置的 HTTP 客户端是 Client网站服务器是 Server。你在浏览器里访问不同网站不需要知道网站背后的实现细节只要域名对得上就行。一个 Host 可以同时连接多个 MCP Server。这就是它强大的地方你可以在同一个 AI IDE 里同时挂上文件工具、浏览器自动化工具、设计稿读取工具然后让 AI 一次性完成“看设计稿、切图、自动写页面、用浏览器验证”的完整流程。这种组合能力在以前基本不可能实现因为每个环节都要写胶水代码。2.2 三种原语Tools、Resources、PromptsMCP 定义了三种能力的原语理解这三个概念基本就理解了协议的一半。Tools 是让模型可以“动手操作”的能力比如读文件、写文件、调用 API、执行命令。模型可以根据用户的请求主动决定调用哪个 Tool。Tools 通常由开发者定义工具描述写得越清楚模型调用就越准确。Resources 是让模型可以“读取”的数据比如某个目录下的文件列表、某张表的数据库 Schema、某个网页的内容摘要。模型可以把这些数据当作上下文信息辅助自己回答问题。Prompts 是可复用的提示词模板适合把一些高频任务固化成标准流程比如“一键生成周报”“一键分析竞品页面”。打个比方Tools 是模型的手Resources 是模型的眼睛Prompts 是模型的记忆模板。一只眼睛和一双灵活的手再加一些预设套路就是一个能干活的数字员工。很多人在刚接触 MCP 时只关注 Tools忽略了 Resources 和 Prompts这是很可惜的后面两个能力在处理真实业务场景时往往更实用。2.3 消息格式与传输方式MCP 的通信协议基于 JSON-RPC 2.0。这个概念不用怕它本质上就是一种用 JSON 格式封装请求和响应的标准。比如客户端想调用一个工具会发送一个类似这样的消息{ jsonrpc: 2.0, id: 1, method: tools/call, params: { name: get_file_contents, arguments: { path: /tmp/example.js } } }Server 收到后会返回一个结构化的结果包含执行状态、输出内容等。这个方法名、参数格式都是协议标准里规定的所以两边不需要预先约定天然就能互通。传输层主要有两种方式。一种是 stdio本地进程通过标准输入输出来通信适合运行在本机的工具比如文件系统、命令行工具特点是安全和隔离。另一种是 HTTP 加 SSE 或新的 Streamable HTTP适合远程服务比如云端的数据源、团队共享的工具。选择哪种方式取决于你的使用场景。配置本地开发环境时常用 stdio接线上协作平台、跨团队共享能力时远程地址更合适。这两种传输方式各有优劣我整理了一个简单的对比表格。传输方式适用场景优点缺点stdio本地文件、命令行、本地模型工具安全、进程隔离、无网络依赖只能在本机使用HTTP / SSE远程服务、SaaS 工具、团队共享可跨设备、集中管理需要鉴权、依赖网络、延迟稍高看懂了这套底层设计你会发现 MCP 并不神秘无非是定义了一套“工具该怎么说、数据该怎么传”的标准。后面配置 MCP Server 时你只要把命令、参数、地址填对剩下的通信细节协议都帮你处理了。3. 实操在 Trae 里接入 Figma MCP3.1 准备工作拿 Token、确认环境我先挑一个最有代表性的场景让 AI 读取 Figma 设计稿。Figma 官方提供了一个 MCP Server装好之后AI 可以直接获取设计稿里的图层结构、颜色、字体、切图资源甚至帮你生成代码。这一步对我的日常工作帮助最大所以拿来当第一个实战示例。准备工作分两步。第一步去 Figma 生成 Personal Access Token。打开 Figma 网页版点击右上角头像进入 Settings在 Security 或 Account 区域找到 Personal Access Tokens点击 Generate new token。注意这个 Token 只会完整显示一次生成后要立刻复制保存。它就是你 AI 工具访问 Figma 文件的钥匙权限给的是读权限足够用了。第二步确认本机有 Node.js 环境。Figma 的 MCP Server 是通过 npm 包分发的Node.js 版本建议用 18 以上在终端里执行node -v可以快速检查。如果这两步没准备好后面排查起来会比较绕。我第一次配置时 Token 没保存好重新生成了一次还有一次 Node 版本太旧导致 npx 拉包失败所以这些细节别跳过。3.2 添加 MCP Server 的具体配置以 Trae 为例。Trae 是一款 AI IDE它在 Agent 面板里提供了 MCP Server 管理入口。打开 Trae在设置或者 Agent 面板里找到 MCP 相关配置添加一个新的 MCP Server。你需要填一个名字然后选择传输类型为 stdio再填入命令和参数。如果你自己维护配置 JSON 文件基本长这样{ mcpServers: { figma: { command: npx, args: [-y, figma-developer-mcp, --stdio], env: { FIGMA_API_KEY: figd_你的访问令牌 } } } }这里解释几个字段。command是启动 MCP Server 的可执行文件一般用npx因为 npx 会自动拉取并运行 npm 包。args里的-y表示跳过安装确认figma-developer-mcp是官方包名--stdio告诉它以标准输入输出模式启动。env是传给 Server 的环境变量FIGMA_API_KEY就是刚才拿到的 Token。在 Windows 上踩过一个坑如果直接配置command: npx偶尔会报错原因是 PowerShell 的脚本执行策略限制。解决办法是把命令改成{ command: cmd, args: [/c, npx, -y, figma-developer-mcp, --stdio] }配置完成后保存并重启 Agent 面板MCP 工具列表里应该能看到 Figma 相关工具。如果列表是空的多半是 npx 网络问题或者 Node 版本问题手动在终端跑一遍npx -y figma-developer-mcp --stdio能启动就说明配置本身没毛病。3.3 实测效果AI 读设计稿、切图、改样式配置好之后实际用起来是什么效果我在一个实际项目里让 AI“读取这个 Figma 页面提取所有主色并生成 Tailwind 配置”。对话发出后AI 调用了 Figma 工具拉取页面节点数据返回了包含色值、图层名称的完整信息最后生成了可以直接贴进项目里的 CSS 变量。这里要提醒一点目前模型的工具调用能力还没有那么完美。有时候需要你把意图说得更明确比如“用读取设计稿的工具找到这个 Frame 下的所有文本节点”。如果你只是模糊地让它“分析一下”部分模型可能不会主动去调用工具。这是模型本身的决策能力问题不是 MCP 的问题。我的习惯是prompt 里明确点名要用哪个工具能力成功率会高很多。另外Figma 官方 MCP 走的是 Figma API所以它能读取的是你 Token 有权限访问的云端文件不是本地文件。如果你要处理的是本地的 Sketch 或者其他设计文件需要找对应的 MCP Server。真正麻烦的不是配置本身而是你愿不愿意花一点时间把工具列表接齐。4. 从设计稿到浏览器三个值得装的 MCP Server4.1 Playwright MCP让 AI 自己打开网页做验证如果说 Figma MCP 是帮 AI 看懂设计稿那 Playwright MCP 就是帮 AI 动手验证网页。Playwright 本身是一个浏览器自动化测试框架官方把它包装成了 MCP ServerAI 可以通过它控制浏览器打开网页、点击按钮、填写表单、读取页面内容。配置方式同样简单{ mcpServers: { playwright: { command: npx, args: [-y, playwright/mcplatest] } } }第一次运行时会自动下载浏览器内核如果网络状况一般这一步会卡挺久耐心等就好。如果本机已经装了 Chrome可以在参数里指定--browser chrome让它直接复用你日常用的浏览器。我建议做前端开发的朋友一定要装上AI 写完代码后直接让它“打开页面检查一下有没有样式错位”比自己手动操作快太多。而且它能截屏给 AI 看形成“写代码-验证-修改”的闭环。4.2 Blender MCPAI 进 3D 软件Blender MCP 是社区做的一个开源项目目的很直接让 AI 直接操作 Blender生成 3D 模型、调整材质、设置场景。社区里很多人拿它做概念设计验证你跟 AI 说“生成一个低多边形的树”它会在 Blender 里真正创建出对应模型。安装方式比前两个稍微复杂一点需要两部分配合先要在 Blender 里安装一个插件这个插件负责在 Blender 内部开一个本地服务然后在本机运行对应的 MCP Server让 Server 转发 AI 的指令到 Blender。步骤大致是下载项目代码把插件文件夹放进 Blender 的 addons 目录在 Blender 偏好设置里启用插件再在 AI IDE 里以 stdio 方式配置 MCP Server。这个工具目前还比较偏实验性质稳定性一般我第一次跑通之后兴奋了五分钟随即就遇到了场景对象无法正确选中的 bug。但它的意义在于MCP 不只适用于传统软件领域它可以连接几乎所有有自动化接口的软件。只要你愿意折腾AI 能触达的边界完全取决于你接了多少 Server。4.3 蓝湖 MCP 和其他设计协作工具蓝湖是国内团队常用的设计协作平台现在蓝湖也推出了自己的 MCP Server Lab官方把它叫做 Lanhu MCP。在设计中它主要解决了国内团队比较常见的痛点从蓝湖的设计稿里获取标注信息、切图资源、页面结构然后给 AI 生成代码时使用。团队协作时你不需要让 AI 直接访问 Figma 文件而是从蓝湖拉取已经标注好的设计信息这样权限管理和数据隔离都更清晰。Figma MCP 和蓝湖 MCP 的区别简单来说就是一个走 Figma 云文件一个走蓝湖的项目数据。如果你所在团队以蓝湖为协作平台直接用蓝湖 MCP 反而更匹配实际工作流。选哪个主要还是看你们团队的设计管理工具是什么没必要两个都装。除了这些设计类工具目前 mcp.so 这类官方/社区目录站已经收集了上千个 MCP Server从 GitHub 管理、数据库查询到监控报警覆盖了大量场景。你要做的不是“定制开发”而是去目录站搜一下有没有现成的有就直接配置没有才考虑自己写。5. 想深入自己写一个 MCP Server 其实很简单5.1 用 FastMCP 十分钟写一个MCP Server 开发门槛不高我觉得只要会写一点 Python半小时就能整出一个可用的服务。这里我推荐用 FastMCP 这个 Python 库它把底层协议细节全封装好了你只需要定义工具函数。先安装依赖pip install fastmcp然后写一个最简单的示例 Serverfrom fastmcp import FastMCP mcp FastMCP(math-server) mcp.tool() def add(a: float, b: float) - float: 两个数字相加 return a b mcp.tool() def multiply(a: float, b: float) - float: 两个数字相乘 return a * b if __name__ __main__: mcp.run()在终端执行python math_server.py这个 Server 就跑起来了默认通过 stdio 和宿主通信。接下来你在 AI IDE 里把这个 Python 路径配置成 MCP Server 即可。你会发现AI 看到工具描述后会自动理解什么时候调用add、什么时候调用multiply。整个过程不需要处理 JSON-RPC 消息也不用手动解析参数框架全干了。5.2 用 Node.js SDK 写一个如果你更熟悉 JavaScript 生态MCP 官方也提供了 TypeScript SDK。下面这个例子实现了乘法工具import { McpServer } from modelcontextprotocol/sdk/server/mcp.js; import { StdioServerTransport } from modelcontextprotocol/sdk/server/stdio.js; import { z } from zod; const server new McpServer({ name: math-server, version: 1.0.0 }); server.tool( multiply, { a: z.number(), b: z.number() }, async ({ a, b }) ({ content: [{ type: text, text: String(a * b) }], }) ); const transport new StdioServerTransport(); await server.connect(transport);这里用zod定义参数类型MCP 会自动把类型信息转成工具描述模型就能据此生成正确参数。相比 Python 版TypeScript SDK 的代码多了一点但它和现有 Node.js 服务的集成更自然。如果你已经有一个内部 API想在 AI 里调用它用 Node.js SDK 包一层是很顺的思路。5.3 本地调试与远程部署本地开发时你可以直接在终端运行写好的 Server观察日志输出再在 AI IDE 里接入进行测试。如果工具没出现先在终端跑一遍看有没有报错。这个简单的习惯能帮你过滤掉九成的问题。要部署成远程服务也很容易只要把传输方式从 stdio 换成 HTTP然后在 AI IDE 里填上远程地址即可。官方支持 Streamable HTTP 后远程 MCP Server 和 Host 之间可以双向通信能力上可以做到和本地 Server 几乎一致只是要处理好鉴权。个人建议是工具涉及敏感数据的尽量留在本地 stdio只有确实需要团队共享才放到远程省去鉴权和数据安全这一堆麻烦。6. 我踩过的坑和排查清单6.1 连接失败先从这五点查配置 MCP Server 的过程中我踩过不少坑很多都是细节问题。按照出现频率排个序你可以直接对照检查。症状可能原因解决办法工具列表为空npx 安装失败 / 网络问题手动在终端运行配置的启动命令看报错信息连接超时Token 过期 / 远程地址填错重新生成 Token检查远程 URL 是否有拼写问题工具调用报错Server 崩溃 / 参数类型不对查看 Server 端日志确认变量的格式Windows 下命令不生效PowerShell 脚本策略限制改用cmd /c npx ...方式启动模型始终不调用工具prompt 里没明确意图在 prompt 中点名要用的工具或调整工具描述这五条里面最常见的就是第一条。很多 MCP Server 用 npx 分发首次启动要下载安装网络不好就悄悄失败。你在 IDE 里只会看到一个空列表根本不知道发生了什么。所以遇到工具列表为空先打开终端手动跑一遍启动命令这是最快的定位方式。还有一个容易被忽视的点改完 MCP 配置需要重启 AI IDE 的 Agent 进程才会重新加载 Server。有人改完配置发现还是老样子以为代码写错了折腾半天其实只是没重启。6.2 那些文档不会告诉你的安全问题MCP 把工具接得越多意味着 AI 能操作的范围越大这个权限边界一定要想清楚。一个 MCP Server 如果配置了文件系统工具那模型在某种程度上就能读写你指定的目录如果配置了远程服务你的提示词、文件内容、数据库信息都可能传输到第三方服务器去处理。这里有一个值得单独强调的注意点注意不要轻易加载不熟悉的第三方 MCP Server。如果你装了一个别人开发的 Server最好先看一遍它的代码特别是那些需要提供 Token 或者远程地址的。本质上是把一把可能的钥匙交给了模型工具作者想的话完全可以拿到你传递的数据。另外一点MCP 数据流经大模型进行工具调用时模型本身也看到过一次原始数据。凡是涉及公司机密或个人隐私的内容都要想清楚是否真的适合交给模型处理。这个风险不只在 MCP所有 AI 工具都有但 MCP 的“连接能力”会放大这个风险面因为工具变多数据流经过的地方也变多了。6.3 生态现状与我的判断MCP 的标准还在快速演进2024 年底推出第一个稳定版本后面又引入了 Streamable HTTP远程连接能力一直在增强。大模型厂商跟进速度也很快OpenAI、Google、Anthropic 都陆续宣布支持 MCP各大 AI IDE 基本都内置了 MCP 配置入口。这个趋势已经比较明确了MCP 在相当长一段时间里会成为 AI 生态的底层标准。但这个生态还处于早期能明显感觉到两个问题。一个是工具质量参差不齐社区里很多 MCP Server 只是“能跑”而已错误处理、权限控制、文档都不到位需要你花时间挑。另一个是三分钟热度现象严重很多人接了一堆 Server实际日常能用起来的其实就两三个。我的建议是不要为了接而接先找高频场景装最需要的两三个 Server跑通了再扩展。如果你问我 MCP 会在什么场景最先爆发我个人判断是AI 编程、设计交付、自动化测试这些“数字原生”的环节会最先受益因为它们本来就是在计算机上完成的天然适合打通。实体硬件、线下场景的 MCP 应用还有很长路要走不用急着追。最后再分享一个实战经验我日常工作中最常用的组合是 Figma MCP 加 Playwright MCP再加一个自建的文件搜索工具。这三个工具覆盖了“看设计稿、写页面、验证效果”的完整闭环。MCP 的价值从来不是某一个工具多惊艳而是当你把工具连成一条线之后原来需要几个人配合的活现在 AI 一口气就能干完。这套工具链你值得花一个下午去试一遍跑通之后你会明显感觉到原来 AI 能做的不只是聊天。
