How it works Features Pricing FAQ Docs Add to Chrome — Free
Integration · MCP Native

HAVI + VS Code

Capture a screenshot, highlight an element, or tail console errors. Your VS Code session pulls it in via MCP, so your agent has the browser context without leaving the editor.

Add to Chrome — Free Setup guide
HAVI
❯_
VS Code
How it works

Connected in four steps.

  1. Install the Chrome extension
    Add HAVI from the Chrome Web Store and sign in with a magic link. Free tier, no card.
  2. Run /havi-setup in VS Code
    One command wires the hosted MCP server into your session — no binary, no daemon.
  3. Annotate in the browser
    Open your app, press ⌘⇧S, and mark the element you mean.
  4. VS Code pulls it in via MCP
    Your agent reads the annotation as a tool-call result: selector, viewport, console, and all.
What gets captured

Everything VS Code needs to act on it.

Screenshot

Image of the selected element or region.

CSS selector

The exact element you clicked, as a stable selector.

URL & viewport

Full page URL plus width × height and DPR.

Console errors

JS errors captured at the moment of annotation.

Failed requests

XHR / fetch failures, status codes and URLs.

Git context

Branch, commit and worktree, enriched server-side.

Give VS Code your browser context.

Install the extension, run one command, and start capturing browser context for VS Code.

Add to Chrome — Free Read the docs