在过去，开发者如果要做网页抓取或者浏览器自动化，往往需要自己编写繁琐的脚本（例如使用 Selenium、Playwright 等），同时还要处理各种反爬虫策略、网络环境限制、动态渲染页面等等问题。

随着 AI 代理（AI Agents） 的发展，我们已经不再满足于“人工写脚本”，而是希望让 AI 自己能够操作浏览器、提取数据，甚至执行复杂的交互任务。

为此，Cline + MCP 服务器 的组合成为了一种新的解决方案：

• Cline 插件：运行在 VS Code 内，作为 AI 与开发者的交互入口。
• MCP（Model Context Protocol）服务器：给 AI 提供可调用的外部工具，扩展它的能力。
• Bright Data Web MCP：相比传统的 Playwright MCP，更加稳定、易用，能够在有防护的网站上完成数据采集。

换句话说，它把“写爬虫脚本”这件事，升级成了“给 AI 下指令”，让 AI 自动帮你完成数据抓取与存储。

前提条件

1. 本地安装 Node.js（推荐最新 LTS 版本）
2. 一个 Cline 账户
3. 一个 Bright Data API key
4. 大模型的 API key（例如DeepSeek)

步骤一：在 Visual Studio Code 中安装 Cline

打开 VS Code，点击左侧边栏的扩展图标，搜索“Cline”，点击“install"安装：

如果是首次安装，系统会提示你信任发布者。点击“Trust Publisher & Install”即可。

安装完成后，在左侧工具栏中会出现 Cline 图标，这意味着插件已经准备就绪。

步骤二：连接Cline

首次启动时，点击 Get Started for Free 注册账号。

完成注册后，系统会要求你点击 Authorize 授权。

勾选 “Don’t remind me again” 后选择 Open，即可进入主界面。

点击左侧的已经安装好的Cline图标，就基本安装好了，如图所示：

支持中文，这里我们配置一下：

在设置中，你可以选择 API 提供商，例如 OpenAI、DeepSeek 等。
如果使用 DeepSeek，需要到 DeepSeek API 平台

步骤三：安装 Bright Data MCP 服务器

Cline 本身只是 IDE 内的智能体框架，要让它能操作网页，还需要接入 MCP（Model Context Protocol）服务器。这里我们使用 Bright Data 的 Web MCP 服务器。

如果没有安装nodejs，可以看下文档下载安装即可：

https://nodejs.org/zh-cn/download

全局安装 Bright Data MCP：

npm install -g @brightdata/mcp

使用以下命令测试是否成功（Linux / macOS）：

API_TOKEN="你的密钥" npx -y @brightdata/mcp

Windows PowerShell 下对应命令为

$env:API_TOKEN=""; npx -y @brightdata/mcp

🔑 API_TOKEN 可以在 Bright Data MCP 控制台

步骤四：将 Cline 连接到 Bright Data MCP 服务器

打开 Cline 面板，点击 MCP Servers 进入设置。

编辑右侧弹出的 cline_mcp_setting.json 文件，添加以下配置：

{
  "mcpServers": {
    "Bright Data": {
      "autoApprove": [],
      "disabled": false,
      "timeout": 300,
      "type": "stdio",
      "command": "npx",
      "args": [
        "@brightdata/mcp"
      ],
      "env": {
        "API_TOKEN": "替换为自己的API_TOKEN"
      }
    }
  }
}

保存后，返回 Cline 面板，你将看到 Bright Data Web MCP 服务器条目，展开即可查看它支持的工具

在菜单中勾选“Use MCP Servers”，以允许自动连接已配置的 MCP 服务器：

步骤五：使用 Cline AI 代理并实战

最后一步就是让 Cline 代理结合 MCP 服务器，完成实际的网页操作。在 Cline 菜单中勾选 Use MCP Servers，确保 AI 代理可以调用 MCP 工具。例如，我们可以抓取 Amazon 上的商品数据：

例如提问如下：

抓取数据
“https://www.amazon.com/PlayStation%C2%AE5-console-slim-PlayStation-5/dp/B0CL61F39H/”,
保存到本地为 data.csv文件

结果如下：

提交我们的需求后，你会看到结果被保存到本地 CSV 文件，整个过程无需手写爬虫脚本，全部由 AI + MCP 自动完成。

视频演示

总结

在实际使用中，Playwright MCP 和 Bright Data MCP 都能让 AI 接管浏览器：

• Playwright MCP：适合对浏览器操作细节要求高的场景（例如点击、输入、表单交互、截图等）。
• Bright Data MCP：更像是一个“网页抓取加速器”，它把底层操作封装好，重点在于数据获取的可靠性和简洁性。

因此，两者并不是替代关系，而是互补：

• 想要高度自定义操作 → 选择 Playwright MCP。
• 想要快速稳定地拿到数据 → 选择 Bright Data MCP。

结合 Cline，开发者可以在本地 IDE 中与 AI 对话，给出一句自然语言指令，就能完成从网页浏览、数据提取到本地保存的完整流程，大大降低了门槛。

这意味着，未来的网页数据采集工作将逐渐从“写代码”转向“配合 AI 下指令”，而开发者的价值更多体现在任务设计、数据分析与业务逻辑上。