HAVI – Human-Agent Visual Interface

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.) • Anyone tired of pasting screenshots into chat and re-explaining where the problem is ═══════════════════════════════════════ PRIVACY ═══════════════════════════════════════ • No analytics, no tracking, no telemetry, no advertising. • No background page monitoring — captures happen only when you actively trigger them. • Full privacy policy: https://havi.handgemacht.ai/privacy ═══════════════════════════════════════ SETUP (about 5 minutes) ═══════════════════════════════════════ 1. Install the extension. 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. Built by handgemacht.ai.