HAVI – Human-Agent Visual Interface

Capture visual annotations on any web page; your AI coding agent pulls the full context in via MCP.

HAVI — Human-Agent Visual Interface The bridge between human visual feedback and AI coding agents. If you've ever shipped a screenshot to your AI agent in Slack and watched it guess at what you meant, HAVI is for you. Capture annotations directly on any web page, attach a comment, and your local AI coding agent sees them the moment you save — with the screenshot, the targeted DOM element, the page URL, and the viewport already attached. ═══════════════════════════════════════ WHAT IT DOES ═══════════════════════════════════════ • One-shortcut capture — press Ctrl+Shift+A (or ⌘+Shift+A on macOS) on any page and start annotating. • Drawing tools — rectangles, arrows, freeform highlights, and text labels powered by Fabric.js. • Region selection — pick a precise area of the page with resizable handles, not just "the whole tab". • Element-aware — every annotation stores a CSS selector for the targeted element, so an agent or test can resolve it later. • Side panel browser — list, filter, and manage your annotations directly inside Chrome. • Self-hosted — annotations go to a server you run, not to a third party. No accounts, no telemetry. • W3C Web Annotation format — your annotations are portable, standards-based JSON, not a proprietary blob. ═══════════════════════════════════════ THE AGENT BRIDGE (the H–A in HAVI) ═══════════════════════════════════════ HAVI ships with a companion MCP server (Model Context Protocol). When your local Claude Code session is running, every annotation you create lands in the agent's context within seconds — including the screenshot, the comment, the URL, the viewport, and any console errors collected from the page. Capture a misaligned button on your dashboard. Type "fix this and add a regression test." Switch to your terminal — the agent already has it. ═══════════════════════════════════════ WHO IT'S FOR ═══════════════════════════════════════ • Developers building web apps with AI coding agents (Claude Code, etc.) • Small teams that want a private, self-hosted alternative to commercial visual feedback tools • Anyone tired of pasting screenshots into chat and re-explaining where the problem is ═══════════════════════════════════════ PRIVACY ═══════════════════════════════════════ • No data goes to the publisher. All annotations go to a server URL you configure (defaults to http://localhost:8090). • No analytics, no tracking, no telemetry, no advertising. • No background page monitoring — captures happen only when you actively trigger them. • Optional remote server is opt-in: you grant host permission for one specific URL, revocable from chrome://extensions. • Full privacy policy: https://github.com/handgemacht-ai/havi/blob/main/PRIVACY.md ═══════════════════════════════════════ SETUP (about 5 minutes) ═══════════════════════════════════════ 1. Install the extension. 2. Run the open-source HAVI server on your own machine (a single binary or `just up && just server`). 3. Open the side panel, confirm the server URL. 4. Press Ctrl+Shift+A on any page and capture your first annotation. 5. Optional: hook the bundled MCP server into your Claude Code config for the agent bridge. Server source code, installation guide, and documentation: https://github.com/handgemacht-ai/havi ═══════════════════════════════════════ OPEN SOURCE ═══════════════════════════════════════ HAVI is fully open source. Read the code, run your own server, fork it, contribute back. Repository: https://github.com/handgemacht-ai/havi Issues: https://github.com/handgemacht-ai/havi/issues License: see repository Built by handgemacht.ai.