How it works Features Pricing FAQ Docs Add to Chrome — Free
HAVI + ❯ VS Code Copilot

HAVI works alongside VS Code Copilot.

VS Code Copilot reads your code. HAVI captures what's in your browser: screenshots, the exact selector you clicked, console errors, and failed requests. Your VS Code Copilot session pulls them in via MCP.

Add to Chrome — Free Compare features
The gap

VS Code Copilot reads your code. HAVI shows it the browser.

Your agent has your code but not the rendered page. Here's what each side gives it.

❯ VS Code Copilot alone
  • ✓ Full codebase & file context
  • ✓ Inline edits and chat in the editor
  • ✕ No screenshot of the rendered page
  • ✕ No CSS selector for the broken element
  • ✕ Console errors lost on app-switch
With HAVI added
  • ✓ Screenshot of the bug — full page or region
  • ✓ Exact CSS selector you clicked
  • ✓ Console errors & failed requests
  • ✓ URL, viewport & DPR for the breakpoint
  • ✓ Pulled in over MCP — no copy-paste
Side by side

Feature comparison

Capability VS Code Copilot HAVI
Screenshot pulled into the session via MCP Manual paste ✓ Automatic
Exact CSS selector of the element ✕ ✓
Console errors captured automatically ✕ ✓
Failed network requests attached ✕ ✓
Viewport & DPR context ✕ ✓
Works inside your editor ✓ Native ✓ Via MCP
W3C Web Annotation, exportable ✕ ✓
EU-hosted, GDPR-compliant — ✓

Not an either/or. HAVI speaks MCP, so it plugs into VS Code Copilot the same way it plugs into Claude Code. Keep your editor; HAVI adds the browser context.

Setup

Add HAVI to VS Code Copilot in two steps.

  1. Install the Chrome extension
    Free tier, magic-link sign-in, no card. Hosted — no binary or daemon.
  2. Add the MCP server
    Point your MCP config at https://havi.handgemacht.ai/api/mcp with your setup code, and capture away.

Keep VS Code Copilot. Add browser context.

Install the extension, connect over MCP, and start capturing browser context for your agent.

Add to Chrome — Free Read the docs