SuperAPI AI Directory
Partner with us中文AI newsFavorites
All toolsAI agentshai-browser

hai-browser

Let coding agents drive VS Code's Integrated Browser alongside you: snapshots, mouse and keyboard, forms, tabs, screenshots, console and network logs, a visible agent cursor, and click-to-source for Rea

Open website

About this tool

H/Ai (hai-browser) is a VS Code extension designed to let coding agents share VS Code's built-in browser tabs with you. You can find it on GitHub:https://github.com/SnapBlock/hai-browser。

Purpose

H/Ai lets you and AI agents collaborate in the same browser tab: the agent can read page content, click and type using real input, take screenshots, and view console and network logs, while you can watch and take over at any time. In addition, you can point to an element on the page, and H/Ai will open the line of code that renders that element, while the agent receives the same element information (source code location, HTML, styles, screenshot), enabling tasks like "make this button match the heading style".

Main capabilities

  • Shared browser tab: the agent and you operate the same tab, and the agent can read the page, click, type, and take screenshots, and view the console.
  • Visible agent cursor: while the agent is working, a purple pointer slides to where it clicks, hovers, drags, or types, and shows a ripple when clicking, so you can follow along. This cursor does not receive events and does not appear in snapshots or agent screenshots.
  • Click to jump to source code: with optional framework plugins (React/Vite, Next.js with Turbopack, or webpack), HTML elements are tagged with their source code location, and clicking an element opens the corresponding file line in VS Code.
  • Select element: the agent can read the current selection via browser_get_selection, or wait for you to select an element.
  • Tab management: the agent can only see tabs it opened itself or that you shared with it.
  • Snapshots, screenshots, and logs: the agent receives a page snapshot after each operation, and can request a screenshot or skip the snapshot.
  • Security features: the agent API only listens on 127.0.0.1 and uses a per-window token; snapshots and selected element HTML do not include password values or cc-* fields; browser_evaluate is disabled by default.

Usage

  1. Install the extension: search for "H/Ai Browser" in the VS Code Extensions view, or run code --install-extension hai-browser.hai-browser. You can also download hai-browser.vsix and then run code --install-extension hai-browser.vsix, or use a one-line install script:
    • 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. Open a folder in VS Code and trust it (the extension does not run in Restricted Mode). H/Ai will ask "Let Claude Code use this browser?", and you click "Connect Claude Code". You can also run "H/Ai: Connect Claude Code" at any time.
  3. Launch claude in that folder (using the VS Code terminal is most convenient), and ask it to open your app, for example "open http://localhost:5173 and check whether the registration form works". Or share an already open tab: "Share Browser Tab with Agent" (also in the status bar).
  4. For GitHub Copilot (agent mode in VS Code), no setup is needed; H/Ai automatically registers the MCP server.
  5. For other MCP clients such as Codex CLI, Gemini CLI, and Cline, run "H/Ai: Connect Other Agents", select your agent, and H/Ai will copy the settings to the clipboard. For example:
    • codex mcp add hai-browser -- node ~/.hai-browser/mcp/index.mjs
    • gemini mcp add --scope user hai-browser node ~/.hai-browser/mcp/index.mjs
    • For JSON-config clients such as Cline, add:{"mcpServers": {"hai-browser": {"command": "node", "args": ["/Users/<you>/.hai-browser/mcp/index.mjs"]}}}

Use Cases

  • Collaborate with a coding agent to debug or develop a web application.
  • Need the agent to operate in a real browser environment and view the results.
  • Want the agent to be able to locate the source code directly based on page elements for modifications.

Limitations

  • Requires VS Code 1.119+ (built-in browser and JavaScript debugger). VSCodium and Windsurf also work; they install H/Ai from Open VSX. Cursor and Antigravity are not currently supported (Cursor has no built-in browser, and Antigravity is based on VS Code 1.107).
  • Requires an MCP client (such as Claude Code, GitHub Copilot, Codex CLI, Gemini CLI, Cline, etc.).
  • Building from source requires Node.js 20+ (users installing may not need this; H/Ai will fall back to the VS Code runtime).
  • Click-to-jump-to-source currently supports React with Vite and Next.js with Turbopack or webpack; other frameworks are not currently supported (Vue and Svelte are planned).
  • The agent can only see shared tabs and cannot see your other tabs.
  • Page content is untrusted: web pages may contain prompt injection text, so you should only share trusted tabs, and for sensitive operations it is recommended to use a separate profile.

Other Information

  • License: MIT, free. You bring your own agent (such as a Claude Code subscription, API key, etc.); H/Ai adds no cost and requires no account.
  • Privacy: no hosted browser, no servers of ours, no telemetry. The agent sends what it reads to its model provider, just as with other tools.
  • Status: prototype (stages 0-2). See docs/plan.md.
  • Repository structure: packages/extension (VS Code extension), packages/mcp (stdio MCP server), packages/vite-plugin, packages/next-plugin, packages/protocol, and examples.

Related tools

Browse category