浏览器自动化也能这么简单？Claude Code + BrowserCat MCP 全流程实战拆解

最新推荐文章于 2025-08-08 18:23:21 发布

原创最新推荐文章于 2025-08-08 18:23:21 发布 · 1.6k 阅读

22 ·

CC 4.0 BY-SA版权

文章标签：

#自动化 #运维

写网页自动化还在手写 Puppeteer？现在可以直接用 Claude 跟 MCP 对话了！

在网页自动化这条赛道上，传统的工具链已经越来越难满足高频迭代与非技术团队的场景需求。本文将带你从零开始，实操一整套基于 Claude Code + BrowserCat MCP 的自动化方案，手把手构建出完整的“访问网页 → 自动点击 → 提取信息 → 截图留存”的全链路流程。

不仅适合开发者高效测试页面，也适合运营、产品进行数据获取与交互模拟。

🧱 环境准备：用 Claude Code 写代码前，你需要配置这些

本地运行 Claude Code 的关键在于配置 Linux 环境，这里我们借助 WSL（Windows 子系统 for Linux） 来完成：

✅ 安装步骤概览：

在 Microsoft Store 安装 Ubuntu 20.04.6 LTS

以管理员身份打开 PowerShell，执行：

wsl --install

或手动启用 Linux 子系统：

dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart
dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart

安装完成后输入 wsl -l -v 验证是否成功

完成之后，启动 Ubuntu，并设置用户名、密码。

🔧 配置 Claude Code 插件与远程终端

在 VSCode 中安装插件 Claude Code for VSCode，点击左下角远程终端链接图标，连接到你刚安装的 WSL 子系统。

执行以下命令安装 Claude Code：

curl -fsSL https://www.aicodemirror.com/resource/install/install.sh | bash

🧩 接入 BrowserCat MCP：自动化的“大脑”

我们前往蓝耘 MCP 广场注册并搜索 BrowserCat，这是一个封装了浏览器操作能力的自动化服务组件。

注册后，选择免费套餐并绑定信用卡（必须），然后创建自己的 API Key。

使用如下 JSON 配置 MCP：

{
  "mcpServers": {
    "browsercat": {
      "command": "npx",
      "args": ["-y", "@browsercatco/mcp-server"],
      "env": {
        "BROWSERCAT_API_KEY": "你的API密钥"
      }
    }
  }
}

复制上述内容保存为 mcp.json，在 Claude Code 中通过命令或对话方式载入 MCP：

claude mcp add-json browsercat <mcp配置JSON>

🕹 常用指令：BrowserCat MCP 能做什么？

BrowserCat 封装了 10+ 浏览器交互 API，可直接通过 Claude 触发，包括：

browsercat_navigate：访问网页 URL
browsercat_click：模拟点击按钮/元素
browsercat_fill：自动填入表单数据
browsercat_select：选择下拉选项
browsercat_hover：模拟鼠标悬停
browsercat_screenshot：网页截图保存
browsercat_evaluate：执行 JS 代码片段

一句话总结：你能手动点的，它都能自动化点出来，还能截图和提取数据。

🎯 实战演示：Claude 自动帮我搜索“如何减肥”

我们先让 Claude 使用 browsercat_navigate 进入百度首页，然后通过 browsercat_fill 填入搜索关键词，再通过 browsercat_click 模拟点击搜索按钮，结果：

成功访问
成功截图
成功抓取网页内容反馈

📌 总结：AI 编排自动化，不再需要自己写脚本了

这次基于 Claude Code + BrowserCat MCP 的实践，展示了一个全新的浏览器自动化范式：

✅ Claude 负责理解任务
✅ BrowserCat 负责精确执行
✅ MCP 广场提供能力生态支持

无论是做自动测试、网页爬虫、表单录入、运营监控，甚至是跨端交互模拟，只需配置好一套 Claude + MCP，即可像对话一样控制浏览器行为。

🎉 欢迎感兴趣的小伙伴上手试试 →
👉 MCP 注册地址（附推荐码）