How it works Features Pricing FAQ Docs Add to Chrome — Free
MCP Native·W3C Standard·EU-Hosted

One shortcut captures
the whole bug report.

Press ⌘⇧S on any page. HAVI captures the screenshot, CSS selector, URL, viewport, console errors, and network failures. Your agent pulls the bundle into your Claude Code session via MCP.

Add to Chrome — Free
Annotate
Capture
Collect
Agent fixes
Resolved
acme.store/checkout
390×844
Acme Store
Checkout · Step 2 of 3
Subtotal€48.00
Shipping€4.90
Total€52.90
1 button.primary
Secured by Acme Pay
Press ⌘⇧S on any page
HAVI · Annotations
havi.handgemacht.ai
1 CTA misaligned on mobile Draft
selector .checkout__cta > button.primary
viewport 390 × 844 · DPR 3
layout CLS 0.24 · shifted 96px
2 "Apply promo" does nothing Synced
selector .cart__promo > button
console TypeError: onApply is not a function
network POST /promo → 500
capturing context…
Claude Code terminal: a HAVI annotation arrives via MCP, the agent reads the checkout styles, fixes the flex alignment, tests pass, and the annotation is resolved with a commit link

Works on localhost  ·  EU-hosted  ·  GDPR compliant  ·  One ⌘⇧S shortcut

Demo

Watch the demo.

Five browser annotations become five fixes in a single Claude Code pass — capture, MCP handoff, and resolve, end to end.

Music: "Digital Lemonade" Kevin MacLeod (incompetech.com) — Licensed under Creative Commons: By Attribution 4.0 License
Works with
W3C Web Annotation standard  ·  EU-hosted  ·  GDPR compliant  ·  No tracking
The status quo

The screenshot workflow is broken.

You spot a visual bug, screenshot it, and switch to your agent — then copy-paste every finding by hand: the URL, the selector, the viewport, the console error that already vanished.

Run a few test environments or worktrees at once and it turns into guesswork: which annotation belonged to which Claude session? You lose the thread, and the agent fixes the wrong thing.

Before
  • ✗ Screenshot — pixels only
  • ✗ No selector, no URL, no viewport
  • ✗ Copy-paste every finding by hand
  • ✗ Which worktree? Which Claude session?
  • ✗ 4 round-trips, wrong fix
After — with HAVI
  • ✓ Annotation + 6 context fields
  • ✓ Console + network captured automatically
  • ✓ Tagged to its branch & worktree
  • ✓ Pulled into the right Claude session via MCP
  • ✓ One pass. Resolved.
How it works

Annotate. Capture. Collect. Resolve.

One shortcut moves a visual bug from your browser to your agent, with the context it needs to fix it in one pass.

01 Annotate

Press ⌘⇧S on any page

Draw a box, drop an arrow, select the element, type a comment — or skip it and let the captured context speak.

⌘⇧S
02 Capture

Full context, automatically

CSS selector, page URL, viewport, console errors, failed network requests and Core Web Vitals — captured at the moment you annotate.

.cta > button 390×844 console: 1 GET /rates → 502
03 Collect

Ready in Claude Code

Your agent pulls it in via MCP when you start triaging. No copy-paste, no tab-switching, no re-describing the bug.

browser MCP agent
04 Resolve

The agent resolves and links the commit

The agent reads the full context, fixes the code, and calls resolve. Your side panel flips to "Resolved", linked to the commit.

Resolved → #a1b2c3d
Why HAVI

Structured context with every annotation.

Each annotation carries what the agent needs to act on, auto-generated and portable.

Element-aware capture

The agent knows exactly which element you mean.

HAVI auto-generates the CSS selector for the element under your cursor. No more "the button in the top right."

.checkout__cta > button.primary
viewport 390×844 · DPR 3
Automatic context

DevTools travels with every annotation.

Console errors, 4xx/5xx requests, LCP, CLS and FID — captured the moment you annotate.

● error TypeError: layout undefined
● 502 GET /rates
● vitals CLS 0.24 · LCP 2.9s

One shortcut.

⌘⇧S annotate anything
MCP-native context

Each session pulls only its own worktree's annotations.

Every annotation carries the worktree it came from. When you run the review prompt in Claude Code, the session pulls that worktree's open annotations — the full bundle — via MCP. No copy-paste, no guessing which session it belongs to.

HAVI synced
❮ mcp havi.annotation #1 .wt/checkout
Git-aware context

Connect your project and annotations carry their git context.

Once your dev server is hooked up, every annotation carries the branch, commit, worktree and dev-server port your dev server booted with. See the entry-points guide →

├─ branch   feat/checkout-mobile
├─ commit   #a1b2c3d
├─ worktree .wt/checkout
└─ devport :5173
Bidirectional resolve

Fixes flow back to your side panel.

When the agent commits a fix it calls resolve. Your side panel updates with the commit link — what was fixed and when.

Pending Resolved · #a1b2c3d
W3C standard · no lock-in

Portable JSON-LD you can export anytime.

Stored in the W3C Web Annotation format. Export everything through the API anytime — migrate it or query it elsewhere. 

{
  "@context": "http://www.w3.org/ns/anno.jsonld",
  "type": "Annotation",
  "target": {
    "selector": { "type": "CssSelector",
      "value": ".checkout__cta > button.primary" },
    "source": "https://acme.store/checkout"
  },
  "body": "CTA misaligned on mobile (390×844)",
  "havi:state": "resolved",
  "havi:commit": "a1b2c3d"
}
Pricing

Start free. Upgrade when you need to.

One hosted product, three plans: a free personal workspace, unlimited annotations on Pro, and team workspaces with members, roles, and branch & worktree filtering.

All prices include 20% Austrian VAT (USt). B2B customers with a valid EU VAT number may qualify for reverse charge.

Free Personal

€0 /mo
  • ✓25 annotations / month
  • ✓Personal workspace
  • ✓Magic-link + Google
  • ✓No credit card
Start Free
Recommended

Pro Personal

€9 /mo incl. VAT
  • ✓Unlimited annotations
  • ✓Personal workspace
  • ✓Magic-link + Google
  • ✓Priority support
Get Pro

Team

€19 /member/mo
  • ✓Unlimited annotations
  • ✓Team workspaces + members
  • ✓Branch & worktree filtering
  • ✓Priority support
Start Team

No credit card · Cancel anytime · GDPR compliant · All prices incl. 20% VAT · Billed in EUR

FAQ

Questions, answered.

On EU-hosted infrastructure with data residency inside the European Union. Annotations, screenshots and context are stored under GDPR — no ad-tech, no third-party analytics, no selling or sharing. Privacy-first teams can run under a signed data processing agreement (DPA).
A pasted screenshot is pixels with no structured context — the agent can't know the element, URL, console state or viewport. HAVI delivers all six as structured data the agent reads directly. It also writes back: the annotation flips to "resolved" with a commit link when the fix lands. A pasted screenshot has no resolution state.
Claude Code is the primary integration and receives annotations via MCP. MCP (Model Context Protocol) is an open standard that lets agents receive structured tool results — think a typed API call your agent reads, not pasted text. Claude Code, Cursor and VS Code GitHub Copilot all support MCP. If your agent supports MCP tools, HAVI works with it.
No lock-in by design. Every annotation is stored in the W3C Web Annotation format (JSON-LD) — a standard, portable schema — and you can export everything through the API at any time. Take it with you, migrate it, or query it directly.
Creating new annotations is blocked. Viewing, editing, filtering and resolving existing annotations keep working — you never lose access to your data. Upgrade to a paid plan to remove the cap.
Yes. It works on any page Chrome can open — including localhost, staging, and internal tools behind a VPN. Your annotations are stored on EU-hosted infrastructure, and your agent pulls them into Claude Code via MCP. Nothing requires a public URL.
You can export everything via the API before or after cancelling. After cancellation your annotations are retained for 30 days so you can change your mind, then permanently deleted. Because the format is standard W3C JSON-LD, your data stays usable anywhere.
Yes — 25 annotations per month, no credit card, no time limit. It's a real free tier, not a trial. Upgrade to a paid plan only when you need unlimited annotations, team workspaces, or branch and worktree filtering.

Stop describing bugs.
Start resolving them.

Sign in with a magic link, load the Chrome extension, press ⌘⇧S on any page. Your first annotation is ready for Claude Code with full context — no copy-paste.

Add to Chrome — Free See how it works

EU-hosted  ·  GDPR compliant  ·  Free tier, no card