Introducing HAVI: Rich browser context for AI coding agents
HAVI captures screenshots, CSS selectors, console errors, and network failures your Claude Code session pulls in via MCP — no local daemon required.
HAVI captures what you see in the browser so your AI coding agent can act on it.
Install the Chrome extension, run /havi-setup in Claude Code once, and
each screenshot, element selector, console error, and failed network request you
capture becomes context your agent pulls in over the Model Context Protocol (MCP).
How it works
Click the HAVI extension icon on any page. It captures a screenshot, identifies the element under your cursor, records the URL and viewport, and packages everything as a W3C Web Annotation. The annotation is stored on HAVI’s hosted service. When you triage, your Claude Code session pulls it in through MCP — no copy-paste, no file uploads, no manual context.
Why MCP?
The Model Context Protocol is an open standard for connecting AI models to external data and tools. HAVI uses MCP so it works with Claude Code, Cursor, GitHub Copilot, VS Code, and any MCP-compatible agent, instead of tying you to one tool.