MCP 是什么给开发者的完整指南看完这篇你会知道 MCP 解决了什么问题、它怎么运转以及如何用一个真实 bug 案例理解它的价值。一、你有没有遇到过这种场景页面有个 bug筛选功能点了没反应。你把代码粘给 AIAI 分析了一番说「可能是事件绑定的问题」。你改了没用。AI 又说「可能是异步时序」。你又改了还是没用。来回三四次之后你关掉对话窗口自己一行行 debug。AI 不是不聪明是它根本没看到你的程序在运行时发生了什么。它只能看代码看不到浏览器控制台里有什么报错筛选操作有没有真正发出网络请求请求参数是不是传对了页面 DOM 结构和代码对不上这是一堵墙。AI 在墙这边你的运行环境在墙那边。MCP 就是在这堵墙上开了一扇门。┌─────────────────────────────────────────────────────────┐ │ 没有 MCP 有了 MCP │ │ │ │ AI │墙│ 运行环境 AI ←→ MCP ←→ 运行环境 │ │ │ │ │ │ 只能猜代码里的问题 能真正操作浏览器、读日志、查请求 │ └─────────────────────────────────────────────────────────┘二、MCP 到底是什么MCPModel Context Protocol是 Anthropic 在 2024 年发布的开放协议。一句话MCP 是一套标准让 AI 能调用外部工具获取真实世界的信息和操作能力。注意几个关键词标准不是某家公司的私有实现任何人都可以按规范写工具外部工具文件系统、数据库、浏览器、API、Git……只要写了对应的 MCP ServerAI 都能用真实世界不是让 AI 凭代码猜测而是让它真的去执行、去读数据、去操作界面MCP 之于 AI 工具就像 USB 之于外设——接口统一了工具即插即用。三、没有 MCP 之前有多痛假设要给 AI 接入三个能力读文件、查数据库、调 GitHub API。大概会这样写# 每个能力单独定义一套 Function Call 格式tools[{name:read_file,parameters:{...}},{name:query_db,parameters:{...}},{name:github_pr,parameters:{...}},]# 还要写 dispatch 逻辑每加一个工具就要改这里defhandle_tool_call(name,args):ifnameread_file:...elifnamequery_db:...elifnamegithub_pr:...问题接踵而来换个 LLMClaude → GPT工具定义格式不同全部要重写你写的工具同事没法直接用各自重复造轮子工具越来越多dispatch 越来越乱维护地狱MCP 解决这些问题的方式很直接定一套所有人都遵守的格式。工具按 MCP 标准写一次任何支持 MCP 的 AI 应用都能用。四、MCP 的三个角色┌──────────────────────────────────────────────┐ │ Host宿主应用 │ │ VSCode / Claude Desktop / 你自己写的 App │ │ │ │ MCP Client内置 │ │ 负责和 Server 通信 │ └──────────────────┬───────────────────────────┘ │ JSON-RPC 协议 ┌─────────┼──────────┐ ▼ ▼ ▼ Playwright GitHub 数据库 MCP Server Server Server │ │ │ 真实浏览器 GitHub API PostgreSQL角色是什么你需要关心吗Host运行 AI 的应用用现成的即可VSCode、Claude DesktopMCP ClientHost 内置的协议客户端不需要自己写MCP Server对外暴露工具的服务这是你主要关心的一次完整调用的过程① 你提问 ② AI 推理需要查网络请求 ③ AI 输出结构化指令 → { tool: browser_network_requests } ④ Host 通过 MCP Client 发给 Playwright Server ⑤ Server 真正执行返回结果 ⑥ AI 拿到结果继续推理下一步 ↻ 循环直到任务完成AI 自己不打开浏览器。AI 只是说要做什么MCP Server 去真正执行。五、实战案例用 Playwright MCP 在 VSCode 里调试 bug场景前端「出版商筛选」功能点了没反应用户反馈 bug。环境准备VSCode GitHub Copilot需开通支持 Agent 模式前端项目运行在localhost:3000第一步配置 Playwright MCP Server在项目根目录创建.vscode/mcp.json{servers:{playwright:{command:npx,args:[playwright/mcplatest],type:stdio}}}保存后文件上方出现Start按钮点击启动。用命令面板CtrlShiftP输入MCP: List Servers看到状态为Running即成功。没有 Chrome加参数切换到 Edgeargs:[playwright/mcplatest,--browser,msedge]这个文件可以提交到 Git团队所有人拉代码后自动获得相同配置不需要每个人单独配置。第二步切到 Agent 模式描述问题打开 Copilot Chat输入框下拉选Agent然后直接描述我的项目运行在 http://localhost:3000 页面右上角有一个「出版商」下拉筛选菜单 选择任意出版商后下方书籍列表没有变化 请帮我 1. 打开页面实际操作筛选菜单确认 bug 存在 2. 检查有没有控制台报错 3. 检查有没有发出筛选相关的 API 请求 4. 找到原因并修复修复后再次验证第三步AI 的完整调试过程下面是 AI 实际触发的 6 步工具调用——每一步都是真实发生的不是 AI 在猜。① 打开页面 —browser_navigateAI 第一步先把页面打开确认能正常访问不做任何假设。调用browser_navigate 参数{ url: http://localhost:3000 } 返回{ status: success, title: 书城 | 首页 }② 读取页面结构 —browser_snapshotAI 看到的不是截图而是结构化的无障碍元素树能精确定位每个元素。返回元素树片段 combobox 出版商 option 人民文学出版社 option 中信出版集团 option 商务印书馆因为是元素树而不是截图就算页面样式大改AI 依然能找到正确元素。③ 操作筛选菜单 —browser_click模拟用户点开下拉菜单选中「人民文学出版社」和真实用户操作完全一致这是复现 bug 的关键一步。调用 1browser_click → combobox 出版商 调用 2browser_click → option 人民文学出版社 返回操作成功④ 查网络请求 —browser_network_requests关键发现选了出版商之后AI 检查所有网络请求记录GET /api/books ← 初始加载正常 筛选后无任何新请求只有一条初始加载筛选操作之后没有任何新请求发出。结论锁定问题一定在前端逻辑和后端无关不用去查 API。⑤ 看控制台 —browser_console_messages返回无任何报错没有 JS 报错说明代码没有崩溃只是逻辑没走到「发请求」那一步。范围进一步缩小事件触发了但事件处理函数本身有问题。⑥ 定位代码找到根源AI 翻查FilterPanel.vue找到问题// 有问题的代码 onFilter(val) { this.filter val // 漏了这一行 // this.fetchBooks() }onFilter只更新了本地状态但忘记调用fetchBooks()重新拉数据。修复后AI 用 Playwright 再验证一次GET /api/books?publisher人民文学出版社 ← 出现了筛选请求正常发出列表正确更新bug 修复全程闭环。这个过程里MCP 做了什么把上面的流程拆开你自然语言 → AI推理下一步需要什么工具 → Function Call结构化指令 → MCP Client转发 → Playwright MCP Server真正执行 → 真实浏览器 → 返回结果 → AI 继续推理 ↻ 循环MCP 在中间做的三件事标准化AI 输出通用格式不管底层是 Playwright 还是其他工具格式一样隔离AI 不直接操作浏览器Server 负责执行AI 只管思考可插拔今天用 Playwright 调浏览器明天换数据库 ServerAI 的调用方式完全相同六、Playwright MCP 能做什么工具名能力browser_navigate打开 URL前进/后退browser_snapshot读取页面无障碍结构树browser_click点击元素browser_type输入文字填写表单browser_network_requests查看所有网络请求记录browser_console_messages读取控制台输出browser_screenshot截取当前页面浏览器里人能做的事AI 通过 Playwright MCP 基本都能做。七、一句话记住 MCPAI 之前只有大脑没有手脚和感官。MCP 给 AI 装上了手脚——操作浏览器、读数据库、调 API。而且这双手是标准接口任何工具都能接上去。八、还能接什么理解了 MCP 的工作方式你会发现能接的东西远不止浏览器MCP ServerAI 获得的能力modelcontextprotocol/server-filesystem读写本地文件modelcontextprotocol/server-github查 PR、Issue、提交记录modelcontextprotocol/server-postgres查询数据库playwright/mcp操作浏览器、截图、读网络请求你自己写的 Server任何你想给 AI 的能力不需要全部从头写社区已有大量现成的 MCP Server大多数场景直接拿来用。