← 返回信息流

dev.to #ai新闻

5分钟给Claude Code配置远程浏览器

dev.to作者:yz-yu教程AI评分:50/100

本文介绍如何使用 neu-browser-mcp 为 Claude Code 提供远程浏览器支持,解决本地浏览器难以共享、监控和清理的问题。该工具通过 CDP 协议驱动浏览器,并提供实时视图、文件列表和读取功能。教程基于 Kernel 后端,仅需 Node.js 22+、Claude Code 及 Kernel API Key 即可快速部署。

Claude Code 可以驱动真实的浏览器,但本地笔记本上的浏览器难以共享、观察和清理。neu-browser-mcp 为 Claude Code 提供了一个远程浏览器,它可以通过 CDP 创建、驱动并删除该浏览器,同时提供实时视图,你可以打开以观看或接管控制。

本教程使用 Kernel 后端,仅需一个 API 密钥即可运行。它提供实时视图、文件列表和文件读取功能。Kernel 不提供下载链接。

  1. 准备工作
  • Node.js 22 或更高版本
  • Claude Code
  • Kernel API 密钥(KERNEL_API_KEY)
  • agent-browser,用于浏览器控制步骤(安装方法请参阅其 README)
  1. 将服务器添加到 Claude Code
claude mcp add browser \
  --env NEU_BROWSER_BACKEND=kernel \
  --env KERNEL_API_KEY=<your-key> \
  -- npx -y neu-browser-mcp

密钥保留在服务器的环境中。代理永远不会看到它。

  1. 请求启动浏览器

启动 Claude Code 并询问:

使用 agent-browser 创建一个浏览器,打开 https://example.com,并告诉我页面标题。

Claude Code 调用 create_browser,返回 browser_id、connect_command 和 live_view_url。然后它运行 connect_command 并读取页面内容。

  1. 观看或接管

在你的浏览器中打开 live_view_url。你将看到代理所看到的画面。点击页面以接管控制,然后通过告诉 Claude Code 继续操作来交回控制权。

  1. 读取下载的文件

如果页面生成了文件,请询问:

列出浏览器中的文件并读取第一个文件。

list_browser_files 和 read_browser_file 可完成此操作。读取大小限制为 256 KB。

  1. 清理

delete_browser 会停止浏览器。空闲的浏览器也会在后台设置的超时时间后自动结束(Kernel 上默认为一小时)。

此方案无法实现的功能

  • 它不支持点击、输入或导航。代理通过 agent-browser、Playwright 或任何 CDP 客户端来驱动浏览器。
  • 其他后端(nap、browser-use、hyperbrowser)具有不同的功能。README 中的表格列出了它们的具体能力。

仓库地址:https://github.com/neutree-ai/neu-browser-mcp

阅读原文