Loupe — Visual QA for AI

About

Loupe is the missing layer between "I see a bug" and "AI, fix this."

Mark it up in your browser. Loupe captures everything Claude needs — screenshots, DOM context, computed CSS, your voice note — and ships it to your local AI coding assistant in one keystroke. No more pasting screenshots into chat, retyping CSS selectors, or trying to describe "the spacing looks off."

HOW IT WORKS
1. Press Alt+Shift+L on any webpage.
2. Click an element, drag a region, or hold the mic and talk through what's wrong.
3. Press S to send. Loupe captures the full page (scroll + stitch), paints your pins on a hi-res screenshot, crops a focused image per annotation, and writes the whole bundle to your local Loupe MCP server.
4. In Claude Code (or any MCP-compatible AI client), ask: "Show me the latest Loupe annotation." Claude reads the JSON + image and gets to work.

WHAT MAKES LOUPE DIFFERENT
▸ Full-page annotated screenshots, not just viewport snaps. Every pin shows up on a single stitched image with cyan markers — Claude sees the whole picture in context.

▸ Rich DOM context per annotation: unique CSS selector, computed styles, ancestor chain, semantic landmarks, matched stylesheet rules, ARIA info. Enough for Claude to find the element in your source code even when classes are obfuscated.

▸ Voice annotations with live transcription. Speak instead of type — Loupe records audio AND transcribes it server-side via Whisper or Anthropic. Works on every site, even ones that restrict the browser's mic API.

▸ Per-page intel automatically captured: framework detection (Next.js App Router, Remix, SvelteKit, Astro, Solid, Qwik, Angular, plain React/Vue/Svelte), color scheme, breakpoint, meta tags, console errors.

▸ Local-first by default. Annotations live in ~/.loupe/annotations/ on your machine. Nothing leaves your computer unless you opt into transcription or async feedback.

TEAM WORKFLOW — REQUEST LOUPE
Loop in PMs, designers, or QA without giving them Claude Code access:

▸ Click "Request feedback" in the Loupe popup → copy the link
▸ Send to a colleague — they activate it, annotate the live site, submit
▸ Their bundle appears in your popup's Inbox
▸ You Accept (imports to your local MCP, Claude can act) or Reject — you stay the curator
▸ Attribution flows through: Claude sees who made each annotation

KEYBOARD
Alt+Shift+L  — toggle annotation mode
click         — pin an element
drag          — mark a region
mic button    — push-to-talk or click to toggle
↵             — save the current comment
Esc           — discard / exit
S             — send to Claude
C             — copy as Markdown
1-9           — select pin by number
Del           — delete selected pin

REQUIREMENTS
▸ The Loupe MCP server (free, open source): npx -y @useloupe/mcp-server
▸ An MCP-compatible AI client: Claude Code (recommended), Cursor, or any client speaking the MCP protocol
▸ Optional: an OpenAI or Anthropic API key for server-side audio transcription


PRIVACY
Loupe is dormant on every page until you trigger it. There are no analytics, no Loupe accounts, no telemetry, no third-party tracking. Annotations stay on your local disk unless you opt into transcription or async feedback. See the full privacy policy at: https://useloupe.dev/privacy


OPEN SOURCE
Loupe is open source on GitHub. Self-host the MCP server, the native host, and the feedback worker on your own infra if you want to. https://github.com/useloupe/loupe