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 现状：只需安装一个标准化的 github-mcp-server，Claude Desktop、Cline 等支持 MCP 的终端都能直接读取 GitHub 仓库，无需重复开发接口。

核心价值

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

---

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

MCP 的世界由三部分组成：

1. MCP Host (宿主)：发起方。
   • 例如：Claude Desktop App, Cline (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. 实战：配置 Chrome DevTools MCP Server

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

步骤 1: 准备环境

我们需要一个能通过 MCP 协议控制浏览器的 Server。推荐使用官方提供的 Server。

确保安装了 npm:

npm install -g @modelcontextprotocol/server-puppeteer

步骤 2: 编辑 MCP 配置文件

在 Cline 设置中配置：

{
  "mcpServers": {
    "browser-controller": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-puppeteer"]
    }
  }
}

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

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

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

Agent 的思考过程 (Loop):

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

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

---

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

所有现代浏览器的自动化控制（Puppeteer, Playwright, Selenium）底层都依赖于 CDP 协议。

这不是爬虫

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

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

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

---

5. 总结：Agent 的完全体

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

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