Blog / AI
AI

在你的 CLI 中使用 opencode 搭配 Bright Data Web MCP

学习如何通过将 opencode 连接到 Bright Data 的 Web MCP 来扩展其能力。按照本教程在终端中提取实时网页数据。
3 分钟阅读
Opencode × Bright Data 的 MCP 集成

在本教程中,你将了解:

  • opencode 是什么,它提供哪些功能,以及为什么不应与 Crush 混淆。
  • 如何通过扩展网页交互与数据提取能力让它更加强大。
  • 如何在 CLI 中将 opencode 连接到 Bright Data 的 MCP 服务器,打造强大的 AI 编码代理。

开始吧!

什么是 opencode?

opencode 是一个为终端打造的开源 AI 编码代理,具体可作为:

  1. 你的 CLI 中的 TUI(终端用户界面)。
  2. 在 Visual Studio Code、Cursor 等中的 IDE 集成。
  3. GitHub 扩展。

更具体地说,opencode 允许你:

  • 配置响应式、可主题化的终端界面。
  • 为你的 LLM 加载正确的 LSP(语言服务器协议)。
  • 在同一项目上并行运行多个代理。
  • 分享任意会话的链接以便参考或调试。
  • 使用 Anthropic 登录以使用你的 Claude Pro 或 Max 帐号,并可通过 Models.dev 集成 75+ 其他 LLM 提供商(包括本地模型)。

如你所见,该 CLI 对 LLM 持中立态度(LLM 无关)。它主要使用 Go 和 TypeScript 开发,已经在 GitHub 上获得 2 万+ 星标,足见其社区受欢迎程度。

注意:此技术不应与 Crush 混淆,后者是另一个项目,其最初名称曾为 “opencode”。在 X 上了解更多命名争议。如果你寻找的是 Crush,请参阅我们关于集成 Crush 与 Bright Data Web MCP 的指南。

为什么将 Bright Data 的 Web MCP 集成进 opencode TUI 很重要

无论你最终在 opencode 中配置哪种 LLM,它们都有相同的限制:其知识是静态的。它们所训练的数据代表了某一时间点的快照,极易过时。对于软件开发等快速变化的领域尤为如此。

现在,想象一下让你的 opencode CLI 助手能够:

  • 获取最新的教程与文档。
  • 在编写代码时参考在线指南。
  • 像浏览本地文件一样轻松地浏览动态网站。

将它连接到 Bright Data 的 Web MCP,你就能解锁这些能力。

Bright Data Web MCP 提供对 60+ 面向 AI 的工具的访问,这些工具专为实时网页交互与数据采集而设计,并由 Bright Data AI 基础设施提供支持。

在 Bright Data Web MCP 上最常用的两个工具(在免费层也可用)是:

工具 描述
scrape_as_markdown 以高级提取选项抓取单个网页内容,并以 Markdown 返回结果数据。可绕过机器人检测和 CAPTCHA。
search_engine 从 Google、Bing 或 Yandex 提取搜索结果。以 JSON 或 Markdown 格式返回 SERP 数据。

除了上述两款工具外,还有 55+ 专用工具可与网页交互(如 scraping_browser_click),并从多个站点收集结构化数据,例如 LinkedIn、Amazon、Yahoo Finance、TikTok 等。该工具在提供某位专业人士的页面 URL 时,可从公开的 LinkedIn 页面检索结构化的个人资料信息。

现在来看看 Web MCP 在 opencode 中是如何工作的!

如何将 opencode 连接到 Bright Data 的 Web MCP

学习如何在本地安装并配置 opencode,并将其与 Bright Data 的 Web MCP 服务器集成。这样即可得到一个具备 60 多个网页工具访问能力的扩展编码代理。随后我们将在一个示例任务中使用该 CLI 代理来:

  1. 即时抓取一个 LinkedIn 个人主页以收集真实的资料数据。
  2. 将数据本地存为一个 JSON 文件。
  3. 创建一个 Node.js 脚本加载并处理该数据。

按照以下步骤操作!

注意:本教程部分聚焦通过 CLI 使用 opencode。不过,你也可以采用类似的设置将其直接集成到 IDE 中,详见官方文档

前提条件

开始之前,请确认你具备以下条件:

暂时无需担心 Bright Data 的设置,后续步骤会引导你完成。

此外,下面这些背景知识虽非必需,但会有所帮助:

  • MCP 工作原理的基本理解。
  • 对 Bright Data Web MCP 及其工具的基本熟悉。

步骤一:安装 opencode

在类 Unix 系统上使用以下命令安装 opencode:

curl -fsSL https://opencode.ai/install | bash

这会从 https://opencode.ai/install 下载并执行安装器,在你的机器上完成 opencode 的安装。更多安装方式可进一步探索。

使用以下命令验证 opencode 是否可用:

opencode

如果遇到“缺少可执行文件”或“无法识别的命令”等错误,请重启机器后重试。

若一切正常,你应能看到类似如下界面:

opencode TUI

很好!opencode 已可使用。

步骤二:配置 LLM

opencode 可连接多种 LLM,但推荐使用 Anthropic 的模型。请确保你拥有 Claude Max 或 Pro 订阅,或一个带有余额和 API key 的 Anthropic 账户。

下面演示如何通过 API key 将 opencode 连接到你的 Anthropic 账户,但任何其他受支持的 LLM 集成也同样可行。

使用 /exit 命令关闭 opencode 窗口,然后使用以下命令启动与 LLM 提供商的认证

opencode auth login 

系统会让你选择一个 AI 模型提供商:

在 opencode 中选择 “Anthropic” 提供商

Enter 选择 “Anthropic”,然后选择 “Manually enter API key(手动输入 API key)” 选项:

选择 “Manually enter API key(手动输入 API key)” 选项

粘贴你的 Anthropic API key 并按回车:

LLM 集成

LLM 配置完成。重启 opencode,运行 /models 命令,即可选择一个 Anthropic 模型。例如,选择 “Claude Opus 4.1”:

选择 “Claude Opus 4.1” 模型

Enter,你应会看到:

从 Anthropic 选择 “Claude Opus 4.1” 模型

可以看到,opencode 现在正在使用你配置的 Anthropic Claude Opus 4.1 模型运行。干得好!

步骤三:初始化你的 opencode 项目

使用 cd 命令进入你的项目目录,并在其中启动 opencode:

cd <path_to_your_project_folder>
opencode

运行 /init 命令以初始化一个 opencode 项目。输出大致如下:

/init 命令输出

具体而言,/init 命令会创建一个 AGENTS.md 文件。类似于 CLAUDE.mdCursor 的规则,它为 opencode 提供自定义指令。这些指令会被包含到 LLM 的上下文中,以便根据你的项目定制其行为。

在你的 IDE(如 Visual Studio Code)中打开 AGENTS.md 文件,你应能看到:

在 VS Code 中查看 AGENTS.md 文件

根据你的需要进行定制,以指导 AI 编码代理在你的项目目录中应如何运作。

提示:请将 AGENTS.md 文件提交到项目的 Git 仓库中。

步骤四:测试 Bright Data 的 Web MCP

在尝试将你的 opencode 代理与 Bright Data Web MCP 服务器集成之前,了解该服务器如何工作以及你的机器是否能运行它非常重要。

如果你还没有帐号,请先创建一个 Bright Data 账户。如果已有,请直接登录。为了快速上手,可以直接查看帐号中的“MCP” 页面

你帐号中的 Bright Data “MCP” 页面

或者,按照下面的说明操作。

现在,生成你的 Bright Data API key。请妥善保存,后续会用到。这里假设你使用的是具备 Admin 权限的 API key,这会让集成更为简便。

在终端中,通过 @brightdata/mcp 包全局安装 Web MCP:

npm install -g @brightdata/mcp

使用下面的 Bash 命令检查本地 MCP 服务器是否正常工作:

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

<YOUR_BRIGHT_DATA_API> 占位符替换为实际的 Bright Data API token。该命令会设置所需的 API_TOKEN 环境变量,然后通过 @brightdata/mcp 包启动 Web MCP。

如果成功,你应能看到类似如下的日志:

Bright Data Web MCP 启动日志

首次启动时,该包会在你的 Bright Data 账号中自动创建两个默认 Zone:

Web MCP 需要这两个 Zone 来驱动其提供的所有工具。

要确认上述两个 Zone 已创建,请登录你的 Bright Data 账号。在控制台中,进入“Proxies & Scraping Infrastructure”页面。在表格中你应能看到这两个 Zone:

Web MCP 启动时创建的 mcp_unlocker 与 mcp_browser 两个 Zone

注意:如果你的 API token 没有 Admin 权限,这些 Zone 可能不会自动创建。此时你可以在控制台中手动设置,并通过环境变量指定它们的名称,具体参见该包的 GitHub 页面说明

默认情况下,MCP 服务器仅暴露 search_enginescrape_as_markdown 两个工具(可免费使用!)。

如需解锁浏览器自动化、结构化数据源抓取等高级功能,你必须启用 Pro 模式。为此,在启动 MCP 服务器前设置 PRO_MODE=true 环境变量:

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

重要:启用 Pro 模式后,你将获得对全部 60+ 工具的访问权限。但 Pro 模式不在免费层内,会产生额外费用。

完美!你已验证 Web MCP 服务器能在你的机器上运行。现在停止该进程,接下来将配置由 opencode 替你启动并连接到它。

步骤五:将 Web MCP 集成到 opencode

opencode 通过配置文件中的 mcp支持 MCP 集成。注意它支持两种配置方式

  • 全局:位于 ~/.config/opencode/opencode.json。适合主题、提供商、快捷键等全局设置。
  • 项目级:位于项目目录中的本地 opencode.json 文件。

假设你希望在本地进行 MCP 集成配置。首先在你的工作目录中新建一个 opencode.json 文件。

然后打开该文件,确保其包含以下内容:

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "brightData": {
      "type": "local",
      "enabled": true,
      "command": [
        "npx",
        "-y",
        "@brightdata/mcp"
      ],
      "environment": {
        "API_TOKEN": "<YOUR_BRIGHT_DATA_API_KEY>",
        "PRO_MODE": "true"
      }
    }
  }
}

<YOUR_BRIGHT_DATA_API_KEY> 替换为你之前生成并测试过的 Bright Data API key。

在这份配置中:

  • mcp 对象告诉 opencode 如何启动外部 MCP 服务器。
  • brightData 条目指定了用于启动 Web MCP 的命令(npx)和环境变量。(PRO_MODE 可选,但启用后可解锁完整工具集。)

换言之,上述 opencode.json 配置指示 CLI 运行与你之前相同的 npx 命令,并设置相同的环境变量。这样 opencode 就能够启动并连接到 Bright Data Web MCP 服务器。

截至目前,还没有用于检查 MCP 服务器连接状态或可用工具的专用命令。那么让我们直接开始测试吧!

步骤六:在 opencode 中运行一个任务

要检验你增强后的 opencode 编码代理的网页能力,发起如下提示词:

Scrape "https://it.linkedin.com/in/antonello-zanini" and store the resulting data in a local "profile.json" file. Next, set up a basic Node.js script that reads the JSON file and returns its contents

这代表了一个真实场景用例:先收集真实数据,再在 Node.js 脚本中使用。

启动 opencode,输入该提示词并按 Enter 执行。你应会看到类似如下的行为:

在 opencode 中执行任务

尽管该 GIF 经过加速,实际步骤如下:

  1. Claude Opus 模型先制定一个计划。
  2. 计划的第一步是获取 LinkedIn 数据。为此,LLM 选择合适的 MCP 工具(web_data_linkedin_person_profile,在 CLI 中显示为 Brightdata_web_data_linkedin_person_profile),并从提示词中提取正确的参数(https://it.linkedin.com/in/antonello-zanini)。
  3. LLM 通过 LinkedIn 抓取工具获取目标数据,并更新计划。
  4. 将数据保存到本地的 profile.json 文件中。
  5. 创建一个 Node.js 脚本(名为 readProfile.js)来读取 profile.json 并打印其内容。
  6. 最后展示已执行步骤的摘要,并附上运行该 Node.js 脚本的说明。

在本示例中,任务生成的最终输出如下所示:

opencode 给出的最终说明

互动结束时,你的工作目录中应包含如下文件:

├── AGENTS.md
├── opencode.json
├── profile.json   # <-- created by the CLI
└── readProfile.js # <-- created by the CLI

太棒了!现在检查这些文件是否包含预期的数据与逻辑。

步骤七:查看并测试输出

在 Visual Studio Code 中打开项目目录,先查看 profile.json 文件:

在 VSC 中查看 profile.json

重要profile.json 中的数据来自 Bright Data 的 LinkedIn Scraper,通过专用的 web_data_linkedin_person_profile MCP 工具采集的真实 LinkedIn 数据。这不是 Claude 模型臆造或生成的内容!

LinkedIn 数据已成功获取,你可以通过检查提示词中提到的公开 LinkedIn 个人页面来进行验证:

输入的 LinkedIn 页面

注意抓取 LinkedIn 以其强大的反爬保护而臭名昭著。普通的 LLM 难以可靠地完成这一任务,这也从侧面证明了通过 Bright Data Web MCP 集成后,你的编码代理变得多么强大。

接下来,看看 readProfile.js 文件:

在 VSC 中查看 readProfile.js
在 VSC 中查看 readProfile.js

可以看到,代码定义了一个 readProfileData() 函数,用于从 profile.json 读取 LinkedIn 个人资料数据。随后调用该函数打印出完整的资料信息。

使用以下命令测试脚本:

node readProfile.js

输出应为:

readProfile.js 的输出

如你所见,生成的脚本按计划打印出了抓取到的 LinkedIn 数据。

任务完成!尝试不同的提示词,直接在 CLI 中测试更多由 LLM 驱动的高级数据工作流

结论

本文演示了如何将 opencode 与 Bright Data 的 Web MCP 连接(现已提供免费层!)。最终你将获得一个工具丰富的 AI 编码代理,能够从网页中提取数据并与之交互。

要构建更复杂的 AI 代理,欢迎探索 Bright Data AI 基础设施提供的全系服务与产品。这些解决方案支持多种代理式场景,包括多种 CLI 集成。

免费注册 Bright Data,开始体验我们的 AI 就绪型网页工具!

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

Antonello Zanini

技术写作

5.5 years experience

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

Expertise
Web 开发 网页抓取 AI 集成