Media
4 items
Description
Annotate bugs in the browser. Let Claude Code fix them. 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