SnapBlock/hai-browser

Share VS Code's integrated browser with **Claude Code**, **GitHub Copilot**, **Codex CLI**, **Gemini CLI**, **Cline** or any other MCP agent. You and the agent work in the same browser tab: it reads the page, clicks and types with real input, takes screenshots and watches the console, while you watch and take over at any time.
Point at an element and H/Ai opens the line of code that rendered it, and the agent gets the same element (source location, HTML, styles, screenshot), so *"make this button match the header"* just works.
> Status: **prototype** (phases 0–2). See docs/plan.md.
How it works
- The extension attaches to an integrated-browser tab through VS Code's built-in JavaScript debugger (editor-browser debug type) and asks it for a Chrome DevTools Protocol proxy (extension.js-debug.requestCDPProxy). This uses only stable, public APIs, so it works in published extensions.
- Each VS Code window runs a localhost-only WebSocket server and writes a lockfile (~/.hai-browser/sessions/ .json, mode 0600) with its port and a random token.
- hai-browser-mcp picks the window whose workspace contains the agent's working directory and forwards tool calls to it.
Everything runs on your machine. There is no hosted service and no telemetry.
Requirements
- VS Code **1.119+** (integrated browser + built-in JavaScript debugger). **VSCodium** and **Windsurf** work too; they install H/Ai from Open VSX. **Cursor** and **Antigravity** don't yet: Cursor ships without VS Code's integrated browser, and Antigravity is based on VS Code 1.107.
- Claude Code, GitHub Copilot, Codex CLI, Gemini CLI, Cline or another MCP client
- Node.js **20+** to build from source (installed users can do without it; H/Ai falls back to VS Code's runtime)
Install
1. Install the extension: search for **H/Ai Browser** in VS Code's Extensions view, or run code --install-extension hai-browser.hai-browser. You can also download hai-browser.vsix from the latest release and run code --install-extension hai-browser.vsix, or use the one-line installer:
2. Open a folder in VS Code and trust it (the extension does not run in Restricted Mode). H/Ai asks **"let Claude Code use this browser?"**. Click **Connect Claude Code**. You can run it again any time with **H/Ai: Connect Claude Code**.
3. Start claude in that folder (VS Code's terminal is easiest) and ask it to open your app, e.g. *"open http://localhost:5173 and check the signup form works"*. Or share a tab you already have open with **H/Ai: Share Browser Tab with Agent** (also in the status bar).
The MCP server ships inside the extension. Connecting copies it to ~/.hai-browser/mcp/index.mjs (kept up to date when the extension updates) and runs claude mcp add --scope user hai-browser -- node ~/.hai-browser/mcp/index.mjs. If Node.js 20+ isn't on your PATH, it uses VS Code's own runtime instead.
Other agents
- **GitHub Copilot (agent mode in VS Code):** nothing to set up. H/Ai registers its MCP server with VS Code, so its tools show up in the chat's tools list.
- **Codex CLI, Gemini CLI, Cline and other MCP clients:** run **H/Ai: Connect Other Agents**, pick your agent, and H/Ai copies the setup to your clipboard. It's the same server either way (the path exists once H/Ai has run in VS Code):
For JSON-configured clients such as Cline, add {"mcpServers": {"hai-browser": {"command": "node", "args": ["/Users/ /.hai-browser/mcp/index.mjs"]}}} with your real home path.
Setup from source
Install that VSIX (or press **F5**, "Run hai-browser extension", in this repo) and connect as above. Pushing a v* tag that matches the extension's version builds the VSIX, attaches it to a GitHub release, and publishes it to the VS Code Marketplace (repo secret VSCE_PAT) and Open VSX (OVSX_PAT) when those secrets are set.
The npm plugins publish separately through npm trusted publishing (no token): bump the plugin's version, then push a tag named @ , e.g. hai-browser-vite@0.0.2. .github/workflows/npm-publish.yml checks the tag matches and runs npm publish.