如何将 Claude Code 连接到 Bright Data Web MCP 服务器

在本教程中，你将学到：

什么是 Claude Code，以及为什么它被认为是最受欢迎、最强大的 CLI 编码代理之一。
如何通过添加网页交互与数据提取能力让它更高效。
如何将 Claude Code 连接到 Bright Data Web MCP 服务器，从而打造增强型 AI 编码代理。

一起开始吧！

什么是 Claude Code？

Claude Code 是由 Anthropic 开发的命令行工具，可让你在终端中直接使用 Claude 模型。它能帮你委派复杂编码任务、自动化工作流，并与其他工具集成。

换句话说，它既是 AI 结对程序员，也是编码代理。Claude Code 在理解项目上下文、生成代码、测试、调试，甚至执行 Git 操作方面表现突出。其核心特性包括：

Agentic 编码：理解复杂编码任务、头脑风暴解决方案，并在你的工作流中直接执行。
工作流集成：通过 MCP 与各类工具和 API 集成。
代码库理解：分析并理解代码库的结构与逻辑，生成更具上下文感知的代码。
代码生成与编辑：根据你的指令生成新代码、重构现有代码并修复缺陷。
测试与 Lint：运行测试与 Lint 命令，识别并解决代码问题。
Git 集成：简化提交、推送、创建 PR 等 Git 操作。

在 GitHub 拥有 30k+ 星标、周下载量超 500 万，Claude Code 是最受欢迎的 AI 结对编程方案之一——甚至可以说是最受欢迎的。这并不意外，因为就编码而言，Claude 模型被广泛认为是当前最强的 LLM 之一。

为什么要为 Claude Code 增强网页访问与实时数据能力？

即使 Claude Code 由先进的 Claude 模型驱动，它仍面临所有 LLM 的共同限制：其知识是静态的。训练数据是某一时间点的快照，更新很快就会滞后——在节奏飞快的软件开发领域尤其如此！

设想一下，如果让你的 Claude Code CLI 助手具备以下能力：

获取最新的教程与文档，
在写代码时实时查阅指南，
像浏览本地文件一样轻松浏览动态网站。

这正是将其连接到 Bright Data 的 Web MCP 后所能解锁的能力。

Bright Data 的 Web MCP 提供 60+ 款为实时网页交互与数据采集打造的 AI 就绪工具，底层由强大的 Bright Data AI 基础设施驱动。

将 Claude Code 扩展为接入 Bright Data Web MCP 后，你可以：

抓取最新的搜索引擎结果，并直接嵌入到你的笔记或文档中。
摄取最新教程或 API 文档，并基于此生成可运行代码，甚至搭起项目脚手架。
采集实时网站数据用于测试、Mock 或更深入的分析。

查看全部工具目录，请查阅 Bright Data MCP 文档。

如果你想看看该集成的实际效果，了解 Web MCP 在 Claude Code 中是如何工作的。

如何将 Claude Code 连接到 Bright Data 的 Web MCP

了解如何在本地安装与配置 Claude Code，并将其与 Bright Data 的 Web MCP 集成。集成完成后，我们将用扩展后的编码代理来：

实时抓取某个 LinkedIn 个人主页。
将数据以 JSON 保存到本地文件。
创建一个带有返回该 JSON Mock 数据端点的 Express 应用。

按以下步骤进行！

先决条件

开始之前，请确保具备以下条件：

本地安装 Node.js 18+（推荐最新 LTS 版本）。
一个Claude 订阅或一个有额度的 Anthro p ic 账号（本教程以 Anthropic 账号为例）。
一个可用的 Bright Data 账号与 API Key。

注意：此时无需立刻创建账户。下文步骤会在需要时引导你完成设置。

此外，以下背景知识可选但有帮助：

对 MCP 工作原理的基本了解。
对 Bright Data Web MCP 服务器与其工具有一定熟悉度。

步骤 #1：安装并配置 Claude Code

要开始使用 Claude Code，你需要一个 Claude 订阅或有余额的 Anthropic 账号。

准备好 Claude/Anthropic Console 账号后，通过官方 @anthropic-ai/claude-code npm 包全局安装 Claude Code：

npm install -g @anthropic-ai/claude-code

接着进入你希望 Claude Code 运行的项目目录并启动：

claude

若需配置底层 Claude 模型或其他设置，请参考官方文档。

若首次运行该 CLI 代理，你会看到初始化界面：

选择主题并按 Enter 进入授权界面：

选择你想使用的认证方式（“带订阅的 Claude 账号”或“Anthropic Console 账号”）。本文以选项 2 为例，两者流程相似。

接下来页面会提示将 Claude Code 连接到你的 Anthropic Console 账号：

点击“Authorize”并返回终端。在你的 Anthropic Console 中会创建一个新的 API Key：

随后，Claude Code 会将该 API Key 自动保存到其配置文件中，因此之后会保持登录状态。

你现在会看到一个提示，询问是否信任在当前目录执行 Claude Code：

选择“是”，你即可完全访问 Claude Code CLI：

现在你可以在 Try "refactor <filepath>" 的输入区域中编写传给代码代理的提示词。

很好！Claude Code 已安装并可用。

步骤 #2：开始使用 Bright Data 的 Web MCP

如果你还没有账号，请创建 Bright Data 账号。已有账号则直接登录。

接着，根据官方说明生成你的 Bright Data API Key。为简化流程，本文假设你使用的是具备 Admin 权限的 API Key。

通过 @brightdata/mcp 包全局安装 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> 替换为你之前生成的实际 API Token。两条命令都会设置必需的 API_TOKEN 环境变量，并通过 @brightdata/mcp 启动 MCP 服务器。

若一切正常，你会看到类似如下的日志：

首次启动时，MCP 服务器会在你的 Bright Data 账号中自动创建两个默认 Zone：

mcp_unlocker：用于 Web Unlocker。
mcp_browser：用于 Browser API。

要访问 MCP 服务器的完整工具集，需要这些 Zone。

要确认 Zone 已创建，请登录 Bright Data 控制台，前往“Proxies & Scraping Infrastructure”页面。你应该能看到这两个 Zone：

MCP 启动时创建的 mcp_unlocker 与 mcp_browser Zone

注意：如果你的 API Token 不具备 Admin 权限，这些 Zone 可能不会自动创建。这种情况下，你可以手动创建并通过环境变量指定名称，具体请参考官方文档。

默认情况下，MCP 服务器仅暴露 search_engine 与 scrape_as_markdown 两个工具，它们甚至可免费使用。

若要解锁诸如浏览器自动化、结构化数据抽取等高级能力，需要开启 Pro 模式。为此，在启动 MCP 服务器前设置 PRO_MODE=true 环境变量：

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

或在 Windows 中：

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

重要：启用 Pro 模式后，你可访问全部 60+ 工具。但 Pro 模式不在免费额度内，会产生额外费用。

很好！你已验证 Web MCP 服务器在本机正常运行。现在可以停止服务器，下一步我们将在 Claude Code 中配置其自动启动。

步骤 #3：在 Claude Code 中配置 Web MCP

Claude Code 支持多种连接 MCP 服务器的方式。本文介绍两种：

使用 mcp add 命令。
使用 MCP .json 配置文件。

要在全局的 Claude Code 安装中配置 Web MCP，运行：

claude mcp add brightData \
  --env API_TOKEN=<YOUR_BRIGHT_DATA_API_KEY> \
  --env PRO_MODE=true \
  -- npx -y @brightdata/mcp

或在 Windows PowerShell 中：

claude mcp add brightData --env API_TOKEN=<YOUR_BRIGHT_DATA_API_KEY> --env PRO_MODE=true -- -- npx -y @brightdata/mcp

这两条命令会让 Claude Code 新增一个名为 brightData 的自定义 MCP 服务器，并通过指定的 npx 命令与环境变量启动它。换言之，Claude Code 现在可以自动连接 Bright Data 的 Web MCP。（注意：PRO_MODE 非必需。）

运行后，你会看到类似如下的输出：

这表明 MCP 服务器已写入全局 Claude Code 配置文件。

如果你更倾向于将 MCP 配置限定在项目本地，可新建 mcp_servers.json 文件，并写入如下内容：

{
  "mcpServers": {
    "brightData": {
      "command": "npx",
      "args": [
        "-y",
        "@brightdata/mcp"
      ],
      "env": {
        "API_TOKEN": "<YOUR_BRIGHT_DATA_API_KEY>",
        "PRO_MODE": "true"
      }
    }
  }
}

上述配置中：

mcpServers 对象用于告诉 Claude Code 如何启动外部 MCP 服务器。
brightData 项定义了运行 Web MCP 所需的命令与环境变量。设置 PRO_MODE 可选但推荐。

然后通过 --mcp-config 标志让 Claude Code 加载该配置文件：

claude --mcp-config mcp_servers.json

重要：请将 <YOUR_BRIGHT_DATA_API_KEY> 替换为你的 Bright Data 实际 API Token 以完成认证。

完美！你现在可以在 Claude Code 中测试 MCP 集成了。

步骤 #4：验证 MCP 连接

无论你是通过 mcp add 还是 --mcp-config 完成集成，现在都应验证 Claude Code 能否真正连接到 Bright Data Web MCP 服务器。

启动 Claude Code CLI，输入 /mcp 命令进行检查。若一切正常，你会看到类似如下输出：

如图所示，本地 CLI 实例已成功连接到配置的 brightData MCP 服务器。干得漂亮！

步骤 #5：在 Claude Code 中运行任务

为了测试你的 Claude Code 编码代理的能力，尝试以下提示词：

Scrape the data from "https://it.linkedin.com/in/antonello-zanini" and save the output as JSON in a local file named "profile.json". Then, create a simple Express.js project with an endpoint that takes a slug representing the LinkedIn profile and returns the contents of "profile.json".

这是一个真实世界的用例：采集真实数据来 Mock 一个 Express API。

将提示词粘贴进 Claude Code 并按 Enter 执行。你将看到类似如下的过程：

动图加速了，但完整步骤如下：

Claude Code 将提示拆解为一个包含四个步骤的任务。
LLM 选择合适的 MCP 工具（web_data_linkedin_person_profile），并使用从提示中提取的正确参数（url: "https://it.linkedin.com/in/antonello-zanini"）。
系统会提示你确认是否执行该工具。
一旦批准，抓取任务将通过 MCP 集成启动。
结果数据以原始格式显示（即 JSON）。
Claude Code 请求许可，将数据保存到名为 profile.json 的本地文件。
批准后，该文件会被创建并写入内容。
系统会提示你为 Node.js 的 Express 项目创建 package.json 文件。
批准后，package.json 文件会被添加到当前目录。
系统会展示 server.js 的代码（定义包含所需 API 端点的 Express 服务器），并请求创建该文件的许可。
批准后，server.js 文件会被创建。
系统会展示安装项目依赖并启动 Express 服务器的命令。

本例任务生成的最终指令如下：

交互结束后，你的工作目录应包含这三个文件：

├── package.json
├── profile.json
└── server.js

很棒！接下来检查这些文件是否按预期工作。

步骤 #6：查看输出

在 VS Code 中打开项目目录，先查看 profile.json：

该文件包含真实的 LinkedIn 数据，而非 Claude LLM 臆造内容。具体来说，这些数据由 Bright Data 使用 web_data_linkedin_person_profile 工具（其内部调用 LinkedIn Scraper）从以下公开 LinkedIn 个人主页采集：

注意：由于 LinkedIn 反爬策略强大，抓取它非常困难。一般 LLM 无法稳定完成，这也证明了借助 Bright Data Web MCP 集成后，你的编码代理能力大幅增强。

接着查看 package.json：

其中列出了定义 Node.js 项目所需的依赖（如 express）。

最后查看 server.js：

可以看到，代码按提示定义了所需的 API 端点。具体而言，/profile/:slug 会从 profile.json 读取 LinkedIn 资料，并基于 LinkedIn ID（此处作为 slug 使用）返回对应的条目。

非常棒！文件质量不错。最后一步是测试该 Express 应用是否按预期运行。

步骤 #7：测试生成的项目

按照 Claude Code 输出的指引操作。首先安装依赖：

npm install

然后启动 Express 服务器：

npm start

服务器将监听 localhost。用 curl 测试 /profile/:slug 端点：

curl http://localhost/profile/antonello-zanini

或使用 Postman 等可视化 HTTP 客户端：

注意：结果应包含从 profile.json 读取到的正确 LinkedIn 数据。

大功告成！得益于 Claude Code + Bright Data Web MCP 集成，你已成功 Mock 出该 API。

这个示例展示了将 Claude Code 与 Web MCP 结合后的强大威力。现在，试试不同的提示词，直接在 CLI 中探索更多高级、由 LLM 驱动的数据工作流吧！

结语

本文演示了如何将 Claude Code 连接到 Bright Data Web MCP 服务器（现已提供免费层）。最终你将获得一个能够访问并交互网页内容的强大 AI 编码代理。

得益于 Claude Code 对 MCP 的内置支持，这一集成成为可能。若要打造更高级的编码代理，欢迎探索 Bright Data AI 基础设施的完整服务矩阵，这些工具可支持多种Agentic 场景。

免费创建一个 Bright Data 账号，立即开始体验 AI 就绪的网页工具！

免费试用

用Gmail账号注册

支持支付宝等多种支付方式

Antonello Zanini

技术写作

5.5 years experience

Antonello是一名软件工程师，但他更喜欢称自己为技术传教士。通过写作传播知识是他的使命。

Expertise

Web 开发网页抓取 AI 集成

View all articles

将 Claude Code 集成到 Bright Data 的 Web MCP