SuperAPI AI 工具集
合作ENAI 行业资讯收藏
全部工具AI智能体hai-browser

hai-browser

H/Ai 是一款 VS Code 扩展，让编码代理（如 Claude Code、GitHub Copilot、Codex CLI、Gemini CLI、Cline 等 MCP 代理）与你共享 VS Code 内置浏览器标签页。代理可以读取页面、执行真实点击和输入、截图、查看控制台和网络日志，并显示一个紫色代理光标，让你随时观察和接管。你还可以指向页面元素，直接跳转到渲染它的源代码行，同时将该元素信息（源代码位置、HTML、样式、截图）传给代理。项目为 MIT 许可，免费使用，本地运行，无托管服务和遥测。

访问官网

工具介绍

H/Ai（hai-browser）是一个 VS Code 扩展，旨在让编码代理与你共享 VS Code 的内置浏览器标签页。你可以在 GitHub 上找到它：https://github.com/SnapBlock/hai-browser。

用途

H/Ai 让你和 AI 代理在同一个浏览器标签页中协作：代理可以读取页面内容、使用真实输入进行点击和输入、截图、查看控制台和网络日志，而你可以随时观看并接管操作。此外，你可以指向页面上的某个元素，H/Ai 会打开渲染该元素的代码行，同时代理会获得相同的元素信息（源代码位置、HTML、样式、截图），从而实现“让这个按钮匹配标题样式”等操作。

主要能力

  • 共享浏览器标签页：代理和你操作同一个标签页，代理可以读取页面、点击、输入、截图、查看控制台。
  • 可见代理光标：代理工作时，一个紫色指针会滑动到它点击、悬停、拖拽或输入的位置，并在点击时显示波纹，方便你跟随。该光标不会接收事件，也不会出现在快照或代理截图中。
  • 点击跳转源代码：通过可选的框架插件（React/Vite、Next.js with Turbopack 或 webpack），HTML 元素会被标记其源代码位置，点击元素即可在 VS Code 中打开对应文件行。
  • 选择元素：代理可以通过 browser_get_selection 读取当前选择，或等待你选择元素。
  • 标签页管理：代理只能看到它自己打开的或你共享给它的标签页。
  • 快照、截图和日志：代理执行每个操作后都会收到页面快照，可以请求截图或跳过快照。
  • 安全特性：代理 API 仅监听 127.0.0.1，使用每窗口令牌；快照和选中元素 HTML 不包含密码值或 cc-* 字段；browser_evaluate 默认禁用。

使用方式

  1. 安装扩展：在 VS Code 扩展视图中搜索“H/Ai Browser”，或运行 code --install-extension hai-browser.hai-browser。也可以下载 hai-browser.vsix 后运行 code --install-extension hai-browser.vsix，或使用一行安装脚本：
    • macOS / Linux：curl -fsSL https://raw.githubusercontent.com/SnapBlock/hai-browser/main/scripts/install.sh | sh
    • Windows (PowerShell)：irm https://raw.githubusercontent.com/SnapBlock/hai-browser/main/scripts/install.ps1 | iex
  2. 在 VS Code 中打开文件夹并信任它（扩展不在受限模式下运行）。H/Ai 会询问“让 Claude Code 使用此浏览器？”，点击“连接 Claude Code”。也可以随时运行“H/Ai: Connect Claude Code”。
  3. 在该文件夹中启动 claude（使用 VS Code 终端最方便），并要求它打开你的应用，例如“打开 http://localhost:5173 并检查注册表单是否工作”。或者共享已打开的标签页：“Share Browser Tab with Agent”（也在状态栏中）。
  4. 对于 GitHub Copilot（VS Code 中的代理模式），无需设置，H/Ai 会自动注册 MCP 服务器。
  5. 对于 Codex CLI、Gemini CLI、Cline 等其他 MCP 客户端，运行“H/Ai: Connect Other Agents”，选择你的代理，H/Ai 会将设置复制到剪贴板。例如：
    • codex mcp add hai-browser -- node ~/.hai-browser/mcp/index.mjs
    • gemini mcp add --scope user hai-browser node ~/.hai-browser/mcp/index.mjs
    • 对于 Cline 等 JSON 配置客户端，添加：{"mcpServers": {"hai-browser": {"command": "node", "args": ["/Users/<you>/.hai-browser/mcp/index.mjs"]}}}

适用场景

  • 与编码代理协作调试或开发 Web 应用。
  • 需要代理在真实浏览器环境中操作并查看结果。
  • 希望代理能够基于页面元素直接定位到源代码进行修改。

限制

  • 需要 VS Code 1.119+（内置浏览器和 JavaScript 调试器）。VSCodium 和 Windsurf 也可以，它们从 Open VSX 安装 H/Ai。Cursor 和 Antigravity 暂不支持（Cursor 没有内置浏览器，Antigravity 基于 VS Code 1.107）。
  • 需要 MCP 客户端（如 Claude Code、GitHub Copilot、Codex CLI、Gemini CLI、Cline 等）。
  • 从源代码构建需要 Node.js 20+（安装用户可能不需要，H/Ai 会回退到 VS Code 运行时）。
  • 点击跳转源代码目前支持 React with Vite 和 Next.js with Turbopack 或 webpack，其他框架暂不支持（Vue 和 Svelte 计划中）。
  • 代理只能看到共享的标签页，无法看到你的其他标签页。
  • 页面内容不可信：网页可能包含提示注入文本，应只共享可信标签页，敏感操作建议使用独立配置文件。

其他信息

  • 许可证：MIT，免费。你自带代理（如 Claude Code 订阅、API 密钥等），H/Ai 不增加费用，无需账户。
  • 隐私：没有托管浏览器、没有我们的服务器、没有遥测。代理将其读取的内容发送给其模型提供商，如同使用其他工具一样。
  • 状态：原型（阶段 0-2）。参见 docs/plan.md。
  • 仓库结构：packages/extension（VS Code 扩展）、packages/mcp（stdio MCP 服务器）、packages/vite-plugin、packages/next-plugin、packages/protocol，以及示例。

同类工具

查看分类