在本教程中,你将了解:
- opencode 是什么,它提供哪些功能,以及为什么不应与 Crush 混淆。
- 如何通过扩展网页交互与数据提取能力让它更加强大。
- 如何在 CLI 中将 opencode 连接到 Bright Data 的 MCP 服务器,打造强大的 AI 编码代理。
开始吧!
什么是 opencode?
opencode 是一个为终端打造的开源 AI 编码代理,具体可作为:
- 你的 CLI 中的 TUI(终端用户界面)。
- 在 Visual Studio Code、Cursor 等中的 IDE 集成。
- 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 代理来:
- 即时抓取一个 LinkedIn 个人主页以收集真实的资料数据。
- 将数据本地存为一个 JSON 文件。
- 创建一个 Node.js 脚本加载并处理该数据。
按照以下步骤操作!
注意:本教程部分聚焦通过 CLI 使用 opencode。不过,你也可以采用类似的设置将其直接集成到 IDE 中,详见官方文档。
前提条件
开始之前,请确认你具备以下条件:
- macOS 或 Linux 环境(Windows 用户需使用 WSL)。
- 一个 Claude Pro 或 Max 订阅,或一个Anthropic 账户(有余额并拥有 API key)(本教程以 Anthropic API key 为例,但你也可以配置任何其他受支持的 LLM)。
- 本地安装 Node.js(推荐最新 LTS 版本)。
- 一个已准备好 API key 的 Bright Data 账号。
暂时无需担心 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 已可使用。
步骤二:配置 LLM
opencode 可连接多种 LLM,但推荐使用 Anthropic 的模型。请确保你拥有 Claude Max 或 Pro 订阅,或一个带有余额和 API key 的 Anthropic 账户。
下面演示如何通过 API key 将 opencode 连接到你的 Anthropic 账户,但任何其他受支持的 LLM 集成也同样可行。
使用 /exit
命令关闭 opencode 窗口,然后使用以下命令启动与 LLM 提供商的认证:
opencode auth login
系统会让你选择一个 AI 模型提供商:
按 Enter
选择 “Anthropic”,然后选择 “Manually enter API key(手动输入 API key)” 选项:
粘贴你的 Anthropic API key 并按回车:
LLM 配置完成。重启 opencode,运行 /models
命令,即可选择一个 Anthropic 模型。例如,选择 “Claude Opus 4.1”:
按 Enter
,你应会看到:
可以看到,opencode 现在正在使用你配置的 Anthropic Claude Opus 4.1 模型运行。干得好!
步骤三:初始化你的 opencode 项目
使用 cd
命令进入你的项目目录,并在其中启动 opencode:
cd <path_to_your_project_folder>
opencode
运行 /init
命令以初始化一个 opencode 项目。输出大致如下:
具体而言,/init
命令会创建一个 AGENTS.md
文件。类似于 CLAUDE.md
或 Cursor 的规则,它为 opencode 提供自定义指令。这些指令会被包含到 LLM 的上下文中,以便根据你的项目定制其行为。
在你的 IDE(如 Visual Studio Code)中打开 AGENTS.md
文件,你应能看到:
根据你的需要进行定制,以指导 AI 编码代理在你的项目目录中应如何运作。
提示:请将 AGENTS.md
文件提交到项目的 Git 仓库中。
步骤四:测试 Bright Data 的 Web MCP
在尝试将你的 opencode 代理与 Bright Data Web 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 账号中自动创建两个默认 Zone:
mcp_unlocker
:用于 Web Unlocker。mcp_browser
:用于 Browser API。
Web MCP 需要这两个 Zone 来驱动其提供的所有工具。
要确认上述两个 Zone 已创建,请登录你的 Bright Data 账号。在控制台中,进入“Proxies & Scraping Infrastructure”页面。在表格中你应能看到这两个 Zone:
注意:如果你的 API token 没有 Admin 权限,这些 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
重要:启用 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
执行。你应会看到类似如下的行为:
尽管该 GIF 经过加速,实际步骤如下:
- Claude Opus 模型先制定一个计划。
- 计划的第一步是获取 LinkedIn 数据。为此,LLM 选择合适的 MCP 工具(
web_data_linkedin_person_profile
,在 CLI 中显示为Brightdata_web_data_linkedin_person_profile
),并从提示词中提取正确的参数(https://it.linkedin.com/in/antonello-zanini
)。 - LLM 通过 LinkedIn 抓取工具获取目标数据,并更新计划。
- 将数据保存到本地的
profile.json
文件中。 - 创建一个 Node.js 脚本(名为
readProfile.js
)来读取profile.json
并打印其内容。 - 最后展示已执行步骤的摘要,并附上运行该 Node.js 脚本的说明。
在本示例中,任务生成的最终输出如下所示:
互动结束时,你的工作目录中应包含如下文件:
├── AGENTS.md
├── opencode.json
├── profile.json # <-- created by the CLI
└── readProfile.js # <-- created by the CLI
太棒了!现在检查这些文件是否包含预期的数据与逻辑。
步骤七:查看并测试输出
在 Visual Studio Code 中打开项目目录,先查看 profile.json
文件:
重要:profile.json
中的数据来自 Bright Data 的 LinkedIn Scraper,通过专用的 web_data_linkedin_person_profile
MCP 工具采集的真实 LinkedIn 数据。这不是 Claude 模型臆造或生成的内容!
LinkedIn 数据已成功获取,你可以通过检查提示词中提到的公开 LinkedIn 个人页面来进行验证:
注意:抓取 LinkedIn 以其强大的反爬保护而臭名昭著。普通的 LLM 难以可靠地完成这一任务,这也从侧面证明了通过 Bright Data Web MCP 集成后,你的编码代理变得多么强大。
接下来,看看 readProfile.js
文件:
可以看到,代码定义了一个 readProfileData()
函数,用于从 profile.json
读取 LinkedIn 个人资料数据。随后调用该函数打印出完整的资料信息。
使用以下命令测试脚本:
node readProfile.js
输出应为:
如你所见,生成的脚本按计划打印出了抓取到的 LinkedIn 数据。
任务完成!尝试不同的提示词,直接在 CLI 中测试更多由 LLM 驱动的高级数据工作流。
结论
本文演示了如何将 opencode 与 Bright Data 的 Web MCP 连接(现已提供免费层!)。最终你将获得一个工具丰富的 AI 编码代理,能够从网页中提取数据并与之交互。
要构建更复杂的 AI 代理,欢迎探索 Bright Data AI 基础设施提供的全系服务与产品。这些解决方案支持多种代理式场景,包括多种 CLI 集成。
免费注册 Bright Data,开始体验我们的 AI 就绪型网页工具!
支持支付宝等多种支付方式