05. MCP 协议与 AI 控制浏览器 (Browser Use)

课时信息

📅 时间：13:30 - 14:15 🎯 目标：理解 MCP 协议原理，掌握 AI 与本地环境的连接方式，体验 AI 自动操作浏览器

1. 什么是 MCP (Model Context Protocol)?

2024年，Anthropic 发布了 MCP 协议，这是 AI 届的 USB 标准。

通俗理解

• 以前 (没有 USB)：你想连打印机、鼠标、键盘，每个设备接口都不一样，电脑需要装各种驱动。
  • AI 现状：ChatGPT 想读你的 Notion、GitHub、本地数据库，需要分别写复杂的 API 集成。
• 现在 (有了 MCP)：所有设备都遵循 USB 标准，插上就能用。
  • AI 现状：只需安装一个标准化的 filesystem-server，Claude Desktop、Claude Code 等支持 MCP 的终端都能直接读取本地文件，无需重复开发接口。

核心价值

打破数据孤岛。让 AI 不再是一个在那自言自语的聊天机器人，而是能实时读取你本地文件、数据库、Slack 消息的超级助手。 此生态已初具规模，官方提供了 SQLite, PostgreSQL, Google Drive 等大量开箱即用的 Server。

---

2. 核心架构：Host, Client, Server

MCP 的世界由三部分组成：

1. MCP Host (宿主)：发起方。
   • 例如：Claude Desktop App, Claude Code (VSCode 插件), Cursor。
2. MCP Server (服务端)：数据提供方。
   • 例如：sqlite-server (查库), github-server (查代码), browser-server (上网)。
3. MCP Client (客户端)：协议连接层（通常内置在 Host 中）。

关系图解

AI (Host) <==[ MCP 协议 ]==> MCP Server <==> 真实数据 (GitHub/DB)

---

资源导航

• 👉 mcp.so: MCP Server 的非官方应用商店，可以找到各种现成的 Server（如 Chrome, Google Drive, Slack 等）。

---

3. 入门实战：Filesystem MCP (文件系统)

为了演示 MCP 的持久化能力，我们使用官方的 Filesystem Server。

目标

让 AI 能够直接读写你电脑上的本地文件。

步骤 1: 一行命令配置

无需编辑配置文件，直接在终端运行（确保安装了 Node.js）。 我们将当前目录 . 作为允许 AI 访问的范围：

claude mcp add filesystem -- npx -y @modelcontextprotocol/server-filesystem .

步骤 2: 验证能力

配置成功后，尝试以下对话：

1. 创建文件：

   "在当前目录下创建一个名为 demo.txt 的文件，内容是：Hello MCP!"

2. 重启验证： 退出 Claude (Ctrl+C)，重新进入 (claude)，然后问：

   "读取 demo.txt 的内容"

步骤 3: 观察 AI 思考

1. Thinking: 用户要读文件 -> 查找工具。
2. Found Tool: 发现 filesystem server 提供了 read_file 工具。
3. Call Tool: 调用 read_file。
4. Persistence: 因为文件是真实写在硬盘上的，所以重启后依然存在。这比纯内存的 Memory Server 更实用。

---

4. 进阶实战：配置 Chrome DevTools MCP Server

Claude Code 不仅能写代码，配合 MCP 还能直接控制浏览器。我们将通过 Chrome DevTools Protocol (CDP) 让 AI 拥有一双“看网页的眼睛”和“点鼠标的手”。

步骤 1: 准备环境

我们需要一个能通过 MCP 协议控制浏览器的 Server。

确保安装了 npm。然后安装 chrome-devtools-mcp：

npm install -g chrome-devtools-mcp

步骤 2: 编辑 MCP 配置文件

在 Claude Code 设置中配置：

{
  "mcpServers": {
    "browser-controller": {
      "command": "chrome-devtools-mcp"
    }
  }
}

步骤 3: 见证奇迹 (自动化登录与操作)

配置完成后，在 Claude Code 的对话框中下达指令：

"打开 GitHub 登录页，输入用户名 'demo' 和密码 '123456'，然后点击登录按钮。"

Agent 的思考过程 (Loop):

1. Call Tool: chrome_devtools_navigate("github.com/login") -> 浏览器打开。
2. Read: AI 截图或读取 DOM，识别出用户名输入框 id 为 login_field。
3. Call Tool: chrome_devtools_type("#login_field", "demo")。
4. Read: 识别密码框 password。
5. Call Tool: chrome_devtools_type("#password", "123456")。
6. Call Tool: chrome_devtools_click(".btn-primary")。

这比写 Selenium 脚本快了一万倍，因为你只需要说“人话”。

---

5. 核心原理：Chrome DevTools Protocol (CDP)

所有现代浏览器的自动化控制工具（例如 Puppeteer, Playwright, Selenium 等）底层都依赖于 CDP 协议。更多相关工具信息请参阅本课时末尾的“延伸阅读”章节。

这不是爬虫

普通爬虫只能抓 HTML，而 CDP 允许：

1. Console 交互：获取 JS 错误日志。
2. Network 拦截：捕获 API 请求包。
3. DOM 操作：模拟真实的鼠标点击和键盘输入。

当 MCP 将 CDP 封装为 Tool 后，LLM 就等于拥有了直接操作 CDP 的能力，从而实现“浏览器自动驾驶”。

---

---

6. 热门 MCP 工具生态一览

以下是当前其生态中最具代表性的 MCP 工具清单，涵盖开发调试、数据库、云服务及学术研究等领域：

1. Chrome DevTools MCP

• 功能：允许 AI 直接控制 Chrome 浏览器进行自动化调试。
  • 自动化：通过 Puppeteer 控制点击、输入、页面导航。
  • 调试：读取 Console 日志、截屏、分析 Network 请求和 Performance 性能数据。
  • 应用：前端开发调试、UI 自动化测试。
• GitHub: ChromeDevTools/chrome-devtools-mcp

2. Neon MCP

• 功能：专为 Serverless Postgres 数据库设计的管理工具。
  • 自然语言操作：通过对话创建项目、管理分支 (Branching)。
  • 架构管理：无需编写迁移脚本，直接通过自然语言执行 SQL 或更新 Schema。
• GitHub: neondatabase/mcp-server-neon

3. Supabase MCP

• 功能：全栈后端服务集成。
  • 数据查询：AI 可直接查询 Supabase 数据库表结构和数据。
  • 代码生成：生成 TypeScript 类型定义、数据库文档。
  • 管理：操作 Auth 用户和 Edge Functions。
• GitHub: supabase-community/supabase-mcp

4. Figma MCP

• 功能：连接设计与代码的桥梁。
  • 读取设计：AI 读取 Figma 文件的图层、组件、Design Tokens。
  • 代码转换：根据设计细节自动生成 React/Vue/HTML 代码。
• GitHub: thirdstrandstudio/mcp-figma (社区热门实现)

5. Context7 MCP

• 功能：为编程提供实时上下文文档。
  • 文档检索：写代码时自动拉取最新的第三方库文档和 API 参考，避免 AI 幻觉。
  • 动态抓取：实时抓取指定 URL 内容作为编程参考。
• GitHub: upstash/context7-mcp

6. Paper Search / Deep Research

• 功能：深度学术检索与代码挖掘。
  • 学术搜索：整合 arXiv, PubMed, Google Scholar 进行论文检索和下载。
  • 代码挖掘：在 GitHub 上进行语义级代码搜索。
• GitHub:
  • Paper Search: modelcontextprotocol/servers
  • Deep Research: McMickle-Studios/mcp-deep-research

7. Replicate MCP

• 功能：AI 模型运行与生成。
  • 多模态生成：在对话中调用 Flux, Stable Diffusion 生成图片，或运行 Llama 等开源模型。
  • 模型微调：管理和部署自定义模型。
• GitHub: replicate/replicate-javascript (官方 SDK 支持)

8. Vercel MCP

• 功能：项目部署与运维。
  • 一键部署：将本地代码直接部署到 Vercel，生成预览链接。
  • 监控：查看构建日志、管理环境变量、关联域名。
• GitHub: Quegenx/vercel-mcp-server

9. GitHub MCP

• 功能：代码库全生命周期管理。
  • 操作：搜索代码、读取文件、提交 Commits。
  • 协作：管理 Issues、创建和合并 PR、Code Review。
• GitHub: modelcontextprotocol/servers (官方实现)

10. Stripe MCP

• 功能：支付系统集成。
  • 查询：检索客户信息、交易流水、订阅状态。
  • 操作：生成支付链接、处理退款。
• GitHub: stripe/agent-toolkit

11. Shadcn MCP

• 功能：UI 组件库自动化。
  • 组件集成：自动安装 shadcn/ui 组件。
  • 代码辅助：读取组件源码，辅助生成符合设计系统的 UI 代码。
• GitHub: MCPBro/shadcn-mcp

12. Semgrep MCP

• 功能：代码安全扫描。
  • 静态分析：扫描代码中的漏洞 (SAST)、敏感信息泄露。
  • 修复建议：提供安全修复方案。
• GitHub: semgrep/mcp

13. EdgeOne Pages MCP

• 功能：腾讯云边缘部署。
  • 静态托管：将前端项目部署到腾讯云 EdgeOne Pages。
  • 加速：利用边缘节点实现全球加速访问。
• GitHub: TencentEdgeOne/edgeone-pages-mcp

14. Cloudflare MCP

• 功能：边缘计算与资源管理。
  • Workers：管理和部署 Serverless 函数。
  • 存储：操作 R2 对象存储、D1 数据库、KV 键值对。
• GitHub: cloudflare/workers-mcp

15. 自定义 MCP (Custom SDK)

• 功能：构建专属工具。
  • 场景：当现有工具不满足需求时，使用官方 SDK 将私有 API 封装为 MCP Server。
• GitHub SDK:
  • TypeScript: modelcontextprotocol/typescript-sdk
  • Python: modelcontextprotocol/python-sdk

---

7. 总结：Agent 的完全体

学完这节课，你应该明白：大模型 (LLM) 只是大脑，而 MCP 和 Browser Use 给了它手和脚。

• GUI IDE (Day 1-01) 让我们写代码更爽。
• CLI (Day 1-04) 让 AI 操作电脑更强。
• MCP (Day 1-05) 让 AI 连接万物。

---

延伸阅读

• Puppeteer: Google Chrome 团队官方维护的 Node.js 库，提供了高级 API 来通过 DevTools 协议控制 Chrome 或 Chromium。
• Playwright: Microsoft 开发的自动化库，支持 Chromium, Firefox 和 WebKit，并提供了更广泛的浏览器自动化能力。
• Selenium: 业界广泛使用的浏览器自动化框架，支持多种浏览器和编程语言。