在本教程中，你将学到：
- 什么是 Roo Code，以及为什么它目前是 IDE 中最广泛使用的 AI 编码代理之一。
- 为其配备网页交互与数据提取能力如何让它更有用。
- 如何在 Visual Studio Code 中将 Roo Code 与 Bright Data Web MCP 服务器连接，以创建增强型 AI 编码代理。
一起开始吧！
什么是 Roo Code？
Roo Code 是一款直接运行在编辑器中的 AI 驱动自主编码代理。它可以：
- 充当可用自然语言交流的 AI 结对程序员。
- 直接读取与写入你工作区中的文件。
- 运行终端命令。
- 通过内置浏览器集成自动化浏览器操作。
- 与各类兼容 OpenAI 的或自定义的 API/模型集成。
- 通过不同模式调整其“人格”和能力。
- 通过MCP 集成连接第三方服务。
Roo Code 起源于 Cline 的一个分支，并以开源 VS Code 扩展形式提供。它允许你在 VS Code 内通过 AI 自动化编码任务、提升开发工作流。
与 Cline 不同，Roo Code 不需要账号即可使用（尽管其提供了面向企业的Roo Cloud 平台以获取更多功能）。更多细节可参阅我们关于将 Cline 与 Bright Data Web MCP 服务器集成的指南。
目前，Roo Code 项目在 GitHub 上已获 18k+ stars，并在 VS Code 市场拥有 75 万次安装。这意味着它是 IDE 领域最广泛使用的 AI 编码代理之一。
为什么要在 Roo Code VS Code 扩展中集成 Web MCP
你在 Roo Code 中配置的 LLM 存在所有语言模型的共同限制：知识过时。LLM 只能基于其训练数据生成答案，而这些数据只是过去某一时刻的快照。
鉴于技术世界发展之快，这一限制不容忽视。LLM 很容易给出过时的编码方案、已弃用的方法，或完全错过新近引入的功能。
设想一下，让你的 Roo Code AI 编码助手具备获取最新教程、文档页面与指南的能力——并能实时从中学习。通过为 LLM 扩展网页搜索与数据访问能力的解决方案，这一切成为可能。
这正是你可以在Bright Data 的 Web MCP 服务器中获得的功能。这个开源的（现已提供免费层）MCP 服务器为实时网页交互与数据采集提供 60+ 款即开即用的 AI 工具。
MCP 服务器中最常用的两款工具是：
| 工具 | 描述 |
|---|---|
scrape_as_markdown |
以高级提取选项抓取单个网页 URL 内容，并以 Markdown 返回结果。可绕过机器人检测与 CAPTCHA。 |
search_engine |
从 Google、Bing 或 Yandex 抓取搜索结果，并以 JSON 或 Markdown 格式返回 SERP 数据。 |
此外，还有55+ 款专业工具用于与网页交互（如 scraping_browser_click）并从包括 Amazon、Yahoo Finance、TikTok、LinkedIn 在内的众多网站收集结构化数据。例如，web_data_amazon_product 工具接受有效的产品 URL 输入，即可从 Amazon 获取详细的结构化商品信息。
Bright Data Web MCP + Roo Code 的潜在用例包括：
- 检索实时 SERP 数据，并将上下文链接直接插入你的 VS Code Markdown 报告。
- 基于你正在编写的代码请求教程或文档。
- 抓取网站的最新公开数据并本地保存，用于模拟、分析或后续处理。
现在，让我们在 Roo Code 中实际运行 Web MCP！
如何在 Visual Studio Code 中将 Roo Code 连接到 Bright Data 的 Web MCP
在本节引导中，你将学会在 VS Code 中添加 Roo Code 并将其与 Bright Data 的 Web MCP 集成。最终结果是一个能够访问并与网页交互的 AI 编码代理。这些能力将让代理更强大、更准确。
具体来说，你将构建一个具备数据检索能力的增强型 Roo Code AI 代理，并让它：
- 实时抓取一个 Amazon 商品页面。
- 将数据本地存储。
- 创建一个 Python 脚本来加载并处理收集到的数据。
按下面的步骤开始！
先决条件
要跟随本教程，你需要：
- 一个Bright Data API key
- 任一受支持 LLM 提供商的 API key（本指南中我们将使用OpenRouter API key）
如果你还没有 Bright Data API key，不必担心。我们将在后续步骤中演示如何设置。
要运行生成的输出，你还需要在本地安装 Python。
步骤一：在 Visual Studio Code 中安装 Roo Code
打开 VS Code。点击左侧边栏的“扩展”图标，搜索“Roo Code”，选择Roo Code 扩展。在 Roo Code 扩展页点击“安装”按钮：
如果这是你首次安装来自 Roo Code 发布者的扩展，系统会提示你信任发布者。点击“Trust Publisher & Install”继续。
安装完成后，你会在左侧边栏看到 Roo Code 图标。点击以打开扩展：
注意：如果没有看到 Roo Code 图标，尝试重载 VS Code。其他问题请参考官方安装指南。
完成！Roo Code 已在 VS Code 中可用。
步骤二：设置你的 OpenRouter 连接
现在 Roo Code 已安装，下一步是将其连接到 LLM 提供商。Roo Code 支持众多提供商，包括 Anthropic、Claude Code、AWS Bedrock、DeepSeek、Google Gemini、Groq、Hugging Face、LiteLLM、Mistral AI、Ollama、OpenAI、OpenRouter、Requesty、xAI（Grok）等。
本指南将将 Roo Code 连接到 OpenRouter，并使用 qwen/qwen3-coder:free 模型。此设置完全免费，无需余额或点数。
注意：如果你更偏好其他提供商或已拥有不同 API keys，请按照Roo Code 文档中的对应集成指南操作。
创建 OpenRouter 账号并获取 API key。如不熟悉此流程，可参考我们在Qwen-Agent 教程中的做法。
在 Roo Code 扩展面板向下滚动，直到看到“OpenRouter”按钮。点击：
浏览器将打开，提示你登录 OpenRouter 账号并授权 Roo Code。点击“Authorize”继续：
回到 VS Code，你会被要求确认连接。点击“Open”完成授权流程：
此时你应在 VS Code 中看到如下界面：
可以看到授权成功，Roo Code 已就绪！
默认情况下，Roo Code 使用 Claude Opus 4 模型（需要在 OpenRouter 账户中有余额）。要切换为免费模型（或其他模型），点击顶部菜单的齿轮图标：
在“Settings”标签页，向下滚动到“Model”下拉框，选择你想配置的模型：
例如，选择qwen/qwen3-coder:free，一款针对编码场景优化的免费模型。完成后点击“Done”确认更改。
太好了！Roo Code 已在 VS Code 中完全设置。接下来通过 MCP 集成为其赋能网页数据检索与交互能力。
步骤三：安装 Bright Data 的 Web MCP
如果尚未注册，请先创建 Bright Data 账号。否则，如果你已有账号，请登录。
按照官方说明生成你的 Bright Data API key。请妥善保存。我们假设你使用的是具有管理员权限的 API key，这样集成更容易。
打开终端，通过 @brightdata/mcp 包在全局安装 Web MCP：
npm install -g @brightdata/mcp使用以下 Bash 命令验证本地 MCP 服务器是否正常：
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 token。上述两条命令会设置所需的 API_TOKEN 环境变量并通过 @brightdata/mcp npm 包启动 MCP 服务器。
若成功，你将看到类似下图的日志：
首次启动时，该包会在你的 Bright Data 账号中自动创建两个默认的 zone：
mcp_unlocker：用于 Web Unlocker。mcp_browser：用于 Browser API。
访问 Web MCP 暴露的全部工具需要这两个 zone。
要确认上述 zone 已创建，登录 Bright Data 控制台。导航到“Proxies & Scraping Infrastructure”页面，你应能看到两个 zone 已列出：
注意：如果你的 API token 没有管理员权限，这些 zone 可能不会自动创建。在这种情况下，你可以在控制台手动创建，并通过环境变量指定其名称，详见该包的 GitHub 文档。
默认情况下，MCP 服务器仅暴露 search_engine 与 scrape_as_markdown 两个工具，可免费使用。
若要解锁浏览器自动化、以及对长名单域名进行结构化数据提取等高级功能，你需要启用 Pro 模式。方法是在启动 MCP 服务器前设置 PRO_MODE=true 环境变量：
API_TOKEN="<YOUR_BRIGHT_DATA_API>" PRO_MODE="true" npx -y @brightdata/mcp或在 PowerShell：
$Env:API_TOKEN="<YOUR_BRIGHT_DATA_API>"; $env:PRO_MODE="true"; npx -y @brightdata/mcp重要：启用 Pro 模式后，你将获得 60+ 工具的访问权限。但 Pro 模式不包含在免费层内，会产生额外费用。
完美！你已经验证了本机上的 Web MCP 服务器工作正常。现在结束该进程，接下来将配置由 Roo Code 自动为你启动并连接到它。
步骤四：将 Roo Code 连接到 Web MCP
现在将 Roo Code 扩展连接到 Bright Data Web MCP。在 Roo Code 面板顶部菜单中选择“MCP Servers”选项：
你会进入“MCP Servers”配置区。在这里你可以配置 MCP 服务器，包括全局 MCP 服务器（在所有项目中可用）或本地 MCP 服务器（仅在当前项目可用）。
两者的配置流程几乎相同，这里点击“Edit Global MCP”按钮。随后会打开一个mcp_settings.json 文件，其中包含一个空的 mcpServers 条目：
你需要在这个配置文件中填写连接 Bright Data Web MCP 的细节。确保其包含以下内容：
{
"mcpServers": {
"brightData": {
"command": "npx",
"args": [
"-y",
"@brightdata/mcp"
],
"env": {
"API_TOKEN": "<YOUR_BRIGHT_DATA_API_KEY>",
"PRO_MODE": "true"
}
}
}
}关于该配置：
mcpServers对象告诉 Roo Code 如何启动外部 MCP 服务器。brightData项定义了启动 Web MCP 所需的命令（npx）和环境变量。PRO_MODE可选，但启用后可解锁全部可用工具。
你应会看到如下界面：
将 <YOUR_BRIGHT_DATA_API_KEY> 占位符替换为你之前获取的 Bright Data API key。
该配置让 Roo Code 运行与前一步相同的 npx 命令与环境变量。换言之，Roo Code 现在可以启动并连接到 Bright Data Web MCP 服务器。（启用 PRO_MODE 可选但推荐。）
当你在 mcpServers 中添加 brightData 条目后，Roo Code 会立即连接到 Web MCP 服务器，并显示可用工具：
由于我们将 PRO_MODE 设置为 true，Roo Code 现在可访问 60+ 工具。若未启用 PRO_MODE，仅有 2 个工具可用：scrape_as_markdown 与 search_engine。
点击“Done”按钮，即完成将 Web MCP 集成进 Roo Code。太棒了！
步骤五：测试 Roo Code 代理
默认情况下，Roo Code 运行在Architect 模式，其充当“经验丰富的技术负责人与规划者，帮助设计系统并制定实现方案。”
在大多数场景中，你会更希望将其作为 AI 结对程序员使用。为此，请将 Roo Code 切换到Code 模式，如下所示：
现在，用如下提示测试你的 AI 编码代理的网页数据检索能力：
Scrape data from "https://www.amazon.com/Owala-FreeSip-Insulated-Stainless-BPA-Free/dp/B0F354MWSL/", save it to a local "product.json" file, and create a Python "script.py" script to load and print its contents.这模拟了一个真实用例，用于获取数据以进行分析、可视化、模拟或其他工作流。
在 Roo Code 中运行该提示，你应会看到类似如下的结果：
上方 GIF 经过加速，实际步骤如下：
- Roo Code 将任务拆分为 3 个步骤的计划。
- 它判断获取 Amazon 商品数据的最佳方式是使用 Web MCP 的
web_data_amazon_product工具。 - 系统提示你批准运行该抓取工具。
- 工具运行，并以 JSON 格式检索到 Amazon 商品数据。
- 系统询问是否将数据保存到本地
product.json文件。 - 你批准后，创建并写入 JSON 文件。
- Roo Code 请求允许生成一个
script.py文件，用于读取并打印product.json内容。 - 该文件被创建并填入生成的 Python 代码。
- 系统提示使用
python script.py运行脚本。 - 脚本因编码问题失败。
- Roo Code 建议更新脚本以处理 UTF-8。
- 你批准后，更新脚本成功运行并输出预期结果。
请注意，尽管你的原始提示并未明确要求执行脚本，Roo Code 仍主动提出了执行建议。这很有帮助，因为它协助代理发现问题并自我改进输出。
完成流程后，你的工作目录应包含以下两个文件：
├── product.json
└── script.py在 VS Code 中打开 product.json：
该文件包含真实的 Amazon 商品数据——而非凭空捏造的内容。具体而言，这些数据是由 Bright Data 使用 web_data_amazon_product 工具（其内部依赖Amazon Scraper）从如下目标商品页面抓取的：
注意：抓取 Amazon 一向颇具难度，因为其拥有严格的反爬保护（例如臭名昭著的 Amazon CAPTCHA）。单靠标准 LLM 难以稳定完成这一任务。这正是将 Roo Code 与 Bright Data Web MCP 结合使你的编码代理独具威力的原因。
该文件包含真实的 Amazon 数据，而非所选 LLM 生成的臆造内容。具体而言，这些数据由 Bright Data 使用web_data_amazon_product 工具（其内部调用了Amazon Scraper）获取。
随后，生成的 script.py 文件包含读取并打印该 JSON 商品数据的逻辑：
使用以下命令运行该 Python 脚本：
python script.py结果将是从 product.json 加载的商品数据：
这就是 Bright Data + Roo Code 的能量。记住上面的只是一个简单用例，尽情尝试更多提示。在 VS Code 内探索更高级的由 LLM 驱动的数据工作流。
大功告成！你已完成在 Roo Code 中集成 Bright Data 的 MCP。
结论
在本文中，你了解了如何在 VS Code 中将 Roo Code 与 Bright Data Web MCP 服务器连接（其现已提供免费层！）。最终得到的是一款功能丰富的 AI 编码代理，能够智能地从网页获取并交互数据。
我们使用这一增强代理生成了一个可访问 Amazon 商品数据的简单 Python 脚本。对于更复杂的项目或灵感参考，请记住 Web MCP 暴露的工具可支持多种代理式工作流与场景。
要构建强大的 AI 代理，欢迎探索 Bright Data AI 基础设施的全部服务。
免费创建 Bright Data 账号，开始尝试我们的面向 AI 的网页工具！
支持支付宝等多种支付方式
技术写作
5.5 years experience
Antonello是一名软件工程师，但他更喜欢称自己为技术传教士。通过写作传播知识是他的使命。
