MCP 浏览器自动化教程：让 AI 辅助检查网页和后台流程

MCP 浏览器自动化，说白了就是让 AI Agent 能像人一样操作浏览器——点按钮、填表单、看后台页面、检查数据。以前写脚本做浏览器自动化要自己写代码处理登录、等待、截图，现在通过 MCP 协议，Claude Code、Codex、Hermes Agent 这些工具可以直接调用浏览器能力，把“检查网页和后台流程”变成一句话指令。

这篇文章适合谁？手上有 VPS 想跑 AI Agent 的，或者已经在用 MCP 但不知道怎么接浏览器的。我会从环境搭建到实战配置一步步走，最后给几个常见坑。

MCP 浏览器自动化是什么

MCP（Model Context Protocol）是 Anthropic 推出的开放协议，让 AI 模型能通过标准接口调用外部工具。浏览器自动化就是其中一个典型场景——AI 模型不需要自己渲染网页，而是通过 MCP 服务端操控无头浏览器（Headless Browser），执行点击、截图、读取 DOM 等操作。

简单理解：你告诉 AI“帮我去检查后台订单列表有没有新订单”，AI 就通过 MCP 工具打开浏览器、登录后台、截图或提取数据，然后把结果反馈给你。

为什么要在 VPS 上跑

•持久运行：VPS 7×24 小时在线，可以定时让 AI 检查网页状态（比如每天凌晨检查网站是否正常）。

•低延迟：VPS 和 AI Agent 在同一台机器或同一内网，减少网络开销。

•安全可控：浏览器环境隔离在 VPS 里，不会暴露到本地电脑。

环境准备

1. 系统与依赖

我用 Ubuntu 22.04 做演示，其他 Linux 发行版类似。需要先安装 Node.js 18+（因为 MCP 工具大多用 Node 实现）。

sudo apt update && sudo apt upgrade -y

curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash –
sudo apt install -y nodejs

node -v # 至少 18.x
npm -v

2. 安装 Playwright（浏览器自动化库）

Playwright 比 Puppeteer 更现代，支持 Chromium、Firefox、WebKit，且内置浏览器下载。

npm install -g playwright

playwright install chromium

如果磁盘空间有限，可以只装 Chromium：

playwright install –with-deps chromium

3. 安装 MCP 浏览器工具包

社区有个现成的 MCP 服务器叫 `@anthropic/mcp-browser`（或类似的），但更通用的是用 `mcp-playwright` 这个包。以官方文档为准，这里给出通用安装方式：

npm init -y
npm install @anthropic/mcp-browser # 或 mcp-playwright，具体以官方仓库为准

如果找不到这个包，可以自己写一个简单的 MCP 服务器调用 Playwright，参考官方示例：https://github.com/modelcontextprotocol/servers

4. 配置 AI Agent 连接 MCP 浏览器

以 Claude Code 为例，需要在 `~/.claude/claude_desktop_config.json` 或项目配置文件里添加 MCP 工具：

json
{
"mcpServers": {
"browser": {
"command": "npx",
"args": ["-y", "@anthropic/mcp-browser"],
"env": {
"BROWSER_HEADLESS": "true",
"BROWSER_WIDTH": "1280",
"BROWSER_HEIGHT": "720"
}
}
}
}

• `BROWSER_HEADLESS=true`：无头模式，不显示界面，省资源。

• 端口、超时等参数可按需调整。

实战：让 AI 检查网页状态

场景：假设你有一个后台管理系统，需要每天检查“今日订单数”是否正常。AI Agent 可以定时执行以下步骤：

1. 打开后台登录页
2. 输入用户名密码（注意安全！）
3. 等待跳转到仪表盘
4. 截图或提取订单数字段
5. 对比阈值，返回结果

示例指令（对 AI Agent 说的话）

> “请用浏览器工具访问 http://your-admin.com/login，输入用户名 admin，密码 xxxx，点击登录。登录后等待 3 秒，截图仪表盘区域并告诉我订单数量是否大于 100。”

AI 会通过 MCP 调用浏览器工具完成这些操作。如果想让 AI 自动定时执行，可以配合 n8n 或 Cron 触发。

关键代码片段（如果你自己写 MCP 服务器）

下面是一个简化的 MCP 工具示例，用 Playwright 打开页面并截图：

javascript
import { chromium } from 'playwright';

async function screenshotPage(url) {
const browser = await chromium.launch({ headless: true });
const page = await browser.newPage();
await page.goto(url, { waitUntil: 'networkidle' });
const screenshot = await page.screenshot({ type: 'png' });
await browser.close();
return screenshot; // 返回 Buffer
}

然后在 MCP 服务器里注册这个工具，AI 就能调用了。具体注册方式参考 MCP SDK 文档。

让 AI 检查后台流程

后台流程通常涉及多个步骤：登录 → 导航 → 提取数据 → 操作（如审批）。MCP 浏览器自动化可以组合多个工具完成。

例如：

•检查用户注册流程：AI 模拟新用户注册，验证各环节是否正常。

•巡检后台报表：定时打开报表页面，截图保存，比对历史数据。

•自动化测试：让 AI 执行回归测试用例，发现异常立即通知。

老鸟叮嘱

1.不要明文存储密码：在环境变量或加密存储里传参，AI 指令里不要直接写密码。可以用 `env` 变量传递。
2.无头模式可能被检测：有些网站会阻止无头浏览器。可以尝试用 `–disable-blink-features=AutomationControlled` 参数，或改用真实浏览器 profile。
3.资源控制：浏览器很吃内存，一个 Chromium 实例大约 200-300MB。VPS 内存至少 2GB，推荐 4GB+。如果同时运行多个 AI Agent，考虑用 Docker 限制资源。
4.日志排查：浏览器自动化失败时，先看 Playwright 的错误输出。常见问题：元素选择器不对、等待超时、弹窗干扰。建议在指令里加 `waitForSelector` 或 `waitForTimeout`。
5.安全风险：不要把后台端口暴露到公网。MCP 服务器只监听 localhost，通过 AI Agent 调用。如果 Agent 本身暴露在外，建议加 API Key 认证。

常见问题 FAQ

Q：MCP 浏览器自动化必须用 Claude Code 吗？
A：不是。任何支持 MCP 协议的 AI Agent 都可以，比如 Codex、Hermes Agent、甚至自己写的 Python 客户端。只要实现了 MCP 客户端，就能调用浏览器工具。

Q：VPS 上跑无头浏览器需要显卡吗？
A：不需要。无头模式用 CPU 渲染，但性能取决于 CPU 和内存。截图或复杂页面操作建议 2 核 + 4GB 内存起步。

Q：登录时验证码怎么处理？
A：MCP 浏览器可以截图验证码区域，但 AI 模型不一定能识别。建议使用打码平台 API 或关闭验证码（测试环境）。生产环境慎用。

Q：定时执行怎么实现？
A：可以用系统的 cron 定时发送指令给 AI Agent，或者在 n8n 里设置 Webhook 触发。配合 MCP 工具链，n8n 也可以直接调用 Playwright。

Q：浏览器自动化会被网站封 IP 吗？
A：有可能。建议使用代理 IP 轮换，或控制请求频率。检查网页和后台流程通常频率低（每天几次），不易触发风控。

Q：MCP 浏览器工具包在哪里下载？
A：以官方仓库为准。搜索 “modelcontextprotocol/servers” 或 “mcp-playwright”。版本变化快，不要用固定命令，直接按 README 安装。

MCP 浏览器自动化把 AI Agent 的能力从“文本对话”扩展到了“真实操作”。在 VPS 上部署后，你可以让 AI 帮你巡检网站、模拟用户流程、监控后台数据，解放双手。关键是把安全、资源、日志这三件事先想清楚，剩下的就是写指令。

—

**相关阅读：**

– [VPS部署AI工具100讲：AI Agent、Codex、Claude Code、Hermes Agent、Ollama与自动化工作流实战教程](https://www.zhujixuan.com/jishujiaocheng/9606.html)
– [Codex、Claude Code、OpenClaw、Hermes Agent、Ollama、n8n 分别适合什么场景](https://www.zhujixuan.com/jishujiaocheng/9759.html)
– [n8n 自动分发文章到自媒体：RSS、Webhook 和 API 思路](https://www.zhujixuan.com/jishujiaocheng/9898.html)