通过 Bright Data MCP 的网页抓取能力强化 Cline AI 代理

在这篇博文中，你将学到：

Cline 是什么，以及它为何在开发者社区中越来越受欢迎。
如何通过集成其 AI 编码代理，将你的开发体验提升到新水平。
如何将 Cline 连接到 Bright Data Web MCP 服务器，构建具备网页数据检索工具的 AI 编码代理。

让我们开始吧！

什么是 Cline？

Cline 是一个 Visual Studio Code 扩展，充当自动化的 AI 驱动编码助手。它与命令行和代码编辑器深度集成，可在整个开发过程中为你提供帮助。

Cline VS Code 扩展不止于基础的代码补全。它可以分析项目结构、生成与编辑代码、运行终端命令，甚至帮助调试 Web 应用。

Cline 支持多种 AI API，允许你连接不同的模型与提供商。你还可以通过 MCP（Model Context Protocol，模型上下文协议）添加自定义的 AI 工具来扩展其功能。

截至撰文时，Cline 扩展在 GitHub 上已获超过 48k 颗星，并在 Visual Studio Marketplace 的下载量超过 190 万。

为什么 Cline 代理需要具备从网页提取数据的能力？

无论 Cline 集成的大语言模型（LLM）多么强大，它仍面临所有语言模型的共同限制：知识过时。LLM 的回答仅基于其训练时的静态数据，而这只是过去的一个快照。

鉴于科技世界发展如此之快，这个问题就更为突出。因此，LLM 提出过时的编码方案、已废弃的方法，或完全错过新近发布的功能，并不罕见。

想象一下，如果你的 Cline AI 编码助手能够获取最新的教程、文档页面和指南——并从中学习，会怎样？通过将 Cline 与一种可为 LLM 扩展网页搜索与数据访问能力的解决方案集成，这一切便成为可能。

这正是Bright Data Web MCP 服务器所提供的。该服务器基于Bright Data 的 AI 数据基础设施，提供 60 多种适用于 AI 的实时网页数据采集工具集合。

关于 Bright Data Web MCP 服务器所暴露工具的完整列表，请参考文档。

其他可能的用例包括：

检索实时的搜索引擎结果页（SERP）数据，并在你用 VS Code 写作时为 Markdown 报告插入上下文链接。
基于你正在编写的代码请求相关教程或文档。
即时抓取真实站点的数据并本地保存，用于模拟或进一步分析。

现在，让我们在 Cline 中实际体验 Bright Data Web MCP 服务器。我们将走一遍上述用例之一，看看这一集成究竟能带来什么！

如何在 Cline 中为 AI 编码代理添加数据检索能力

了解如何将 Cline 添加到 Visual Studio Code，并将其与 Bright Data Web MCP 服务器集成。通过以下逐步操作，你将获得一个能够从 Web 获取数据并与之交互的 AI 编码代理。这将帮助代理提供更准确的结果与更智能的任务产出。

具体来说，你将构建一个具备数据检索能力的增强版 Cline AI 代理，并用它来：

抓取一个 Amazon 产品页面。
将数据本地存储。
创建一个 Node.js 脚本来加载并处理该数据。

按以下步骤操作！

先决条件

要完成本教程，你需要：

本地安装 Node.js（推荐最新 LTS 版本）
一个 Cline 账户
一个 Bright Data API key
（可选）你偏好的 LLM 的 API key（例如 Google Gemini API key）

如果你还没有 Bright Data API key 或 Cline 账户也别担心。我们将在接下来的步骤中引导你完成设置。

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

打开 Visual Studio Code，点击左侧边栏的扩展图标，搜索“cline”，并从列表中选择Cline 扩展。在 Cline 扩展页中，点击“Install”按钮：

如果这是你第一次从 Cline 安装扩展，系统会提示你信任发布者。点击“Trust Publisher & Install”继续：

安装完成后，你应能在左侧边栏看到 Cline 图标。点击它打开 Cline 面板：

注意：如果没有看到 Cline 图标，尝试重新加载 Visual Studio Code。若遇到其他问题，请参考官方安装文档页面。

太好了！Cline 已成功安装到 VS Code。

步骤二：设置你的 Cline 连接

现在需要将你的 Cline 账户与刚安装的扩展连接。点击“Get Started for Free”按钮：

你会在浏览器中被重定向到如下页面：

在 Visual Studio Code 中，你现在应该能看到如下弹窗。点击“Open”为 Cline 扩展进行身份验证：

Cline 扩展现在应该类似这样：

如果你回到浏览器中的 Cline 账户页面，你会注意到默认附带 $0.50 的免费额度：

如果你计划通过 Cline 使用高级 LLM，建议充值（默认余额只能进行有限测试）。

或者，如果你想避免产生费用，或希望使用自己的 LLM 提供商，你可以直接连接自己的 API key。为此，点击 Cline 面板中的齿轮图标，然后选择“API Configuration”，粘贴你的 API key 来配置 LLM 集成：

在上面的示例中，我们将 Cline 集成到了 gemini-2.5-flash 模型，该模型通过 API 可免费使用。

太棒了！Cline 现已在 VS Code 中完成设置，准备好帮助你构建具备网页抓取能力的 AI 编码代理。

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

如果你还没有，先创建一个 Bright Data 账户。如果已有，直接登录。

然后按照官方说明获取你的 Bright Data API。为简单起见，下文假设你使用的是拥有管理员（Admin）权限的 API token。

现在，你可以在 Node.js 环境中全局安装Bright Data Web MCP 服务器：

npm install -g @brightdata/mcp

然后通过以下 Bash 命令测试是否一切正常：

API_TOKEN="<YOUR_BRIGHT_DATA_API>" npx -y @brightdata/mcp

在 Windows 上，对应的 PowerShell 命令为：

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

在上述命令中，将 <YOUR_BRIGHT_DATA_API> 占位符替换为你之前获取的实际 Bright Data API。该命令会设置必需的 API_TOKEN 环境变量，并使用 @brightdata/mcp npm 包启动 MCP 服务器。

如果一切设置正确，你的终端应显示类似如下内容：

如你所见，首次运行该命令时，@brightdata/mcp 会在你的账户中初始化所需的 Bright Data 区域（zones）。具体而言，它会为 Web Unlocker 创建一个区域，为 Scraping Browser API 创建另一个区域。这两个区域使 MCP 服务器能够运行其所提供的全部工具。

要验证这一点，登录 Bright Data 控制台并转到“Proxies & Scraping Infrastructure”页面。你会看到自动创建的如下区域：

注意：如果你没有使用具备管理员权限的 API token，则需要手动创建这些区域。详见官方文档中的详细指南。

太棒了！Bright Data Web MCP 服务器运行一切顺利。

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

现在是将 Cline 扩展与本地运行的 Bright Data Web MCP 服务器集成的时候了。首先，点击 Cline 面板中的“MCP Servers”按钮：

进入 Cline 的 MCP Servers 配置区域。切换到“Installed”选项卡，并点击“Configure MCP Servers”按钮：

Visual Studio Code 会打开一个 cline_mcp_setting.json 文件。在这里，你可以定义 Cline 可连接的 MCP 服务器。若要与 Bright Data Web MCP 服务器集成，按如下方式配置：

{
  "mcpServers": {
    "Bright Data": {
      "autoApprove": [],
      "disabled": false,
      "timeout": 300,
      "type": "stdio",
      "command": "npx",
      "args": [
        "@brightdata/mcp"
      ],
      "env": {
        "API_TOKEN": "<YOUR_BRIGHT_DATA_API>"
      }
    }
  }
}

注意：更多详情请参阅官方 GitHub 议题。

换句话说，在 mcpServers 字段中添加名为 “Bright Data” 的配置。务必将 <YOUR_BRIGHT_DATA_API> 替换为你的实际 Bright Data API token。

你应能看到类似如下内容：

完美！现在进入 “Installed” 选项卡，你会看到 Bright Data Web MCP 服务器的条目。展开即可查看它支持的所有工具：

你可以在这里配置 Bright Data Web MCP 服务器及其工具。本次流程使用默认设置即可。

更多信息请查看官方文档。

很好！Cline 扩展现在可以连接 Bright Data Web MCP 服务器并使用其工具了。

步骤五：使用 Cline AI 代理

你已经准备好在 Visual Studio Code 中测试连接了 Bright Data Web MCP 服务器的 Cline AI 编码代理。

首先打开 Cline。然后点击右侧的箭头进入“Auto-approve Settings”菜单。在该菜单中勾选“Use MCP Servers”，以允许自动连接已配置的 MCP 服务器：

启用此设置后，Cline 会在无需每次询问的情况下自动连接 MCP 服务器。但在使用某个工具之前，仍会向你请求许可，这样就足够安全了。

用如下提示词测试你的 AI 编码代理的数据访问能力：

Scrape data from "https://www.amazon.com/PlayStation%C2%AE5-console-slim-PlayStation-5/dp/B0CL61F39H/", save it to a local data.json file, and create a Node.js index.js script to load and print its contents.

这描述了一个潜在的真实场景，对于收集数据进行分析、模拟或测试非常有用。

在 Cline 中运行该提示词，你应该会看到如下交互：

上面的 GIF 已加速播放，实际过程如下：

Cline 扩展将提示词发送给你已配置的 LLM（例如 gemini-2.5-flash）。
LLM 识别出合适的 MCP 工具，即 web_data_amazon_product。
它请求你授权通过 Bright Data MCP 运行该工具，并使用提示词中的 Amazon 产品 URL（即 https://www.amazon.com/PlayStation%C2%AE5-console-slim-PlayStation-5/dp/B0CL61F39H/）。
你批准后，抓取任务会在 Bright Data 的服务器上启动。
随后 Cline 会请求访问任务结果的权限。
在后台，Bright Data 执行抓取任务，Cline 以 JSON 格式接收真实的产品数据。这即为 MCP 工具的输出，Cline 会展示该结果。
系统会请求你授权将数据保存到 data.json 文件。
批准后，文件会被创建并写入数据。
系统会提示创建一个 index.js 脚本以读取并打印 JSON 内容。
批准后，文件会被生成。