ContextSnap: Screenshots & AI Visual Feedback

Element-snapping screenshot tool with AI visual feedback queue — capture, annotate, and process UI feedback via MCP.

📸 ContextSnap: Screenshots & AI Visual Feedback ContextSnap is a developer tool that turns UI feedback into a structured, AI-readable queue. Activate it on any page, hover over elements, capture annotated screenshots, and build up a queue of feedback items — each with a CSS selector, React component name, source file, line number, URL, and comment. An included MCP server lets AI coding agents read, claim, and resolve items directly from the queue. ⚡ HOW IT WORKS Press Ctrl+Shift+1 (Mac: Cmd+Shift+1) to enter comment mode, or Ctrl+Shift+2 (Mac: Cmd+Shift+2) to enter screenshot mode. An element highlight overlay appears over the page. - In comment mode, hover over any element and press C to open a comment dialog. Type your feedback and press Enter. ContextSnap captures a screenshot and saves the element's selector, React component, and your comment to the queue. - In screenshot mode, hover over any element and press Enter to capture it, S to capture it with scroll (full-height), or F for a full-page capture. While in either mode you can switch between them without exiting using the same shortcuts. Press Arrow Up to select a meaningful ancestor element, Arrow Down to return to the previous child or descend into children. Press Q to toggle the queue side panel, and Escape to exit the current mode. ⌨️ KEYBOARD SHORTCUTS - Ctrl+Shift+1 / Cmd+Shift+1 — Enter comment mode - Ctrl+Shift+2 / Cmd+Shift+2 — Enter screenshot mode - C — Open comment dialog on the hovered element (comment mode) - Enter — Capture the hovered element (screenshot mode) - S — Capture the element with scroll (screenshot mode) - F — Full-page capture (screenshot mode) - Arrow Up / Arrow Down — Navigate the DOM hierarchy - Q — Toggle the queue panel - Escape — Exit the current mode 🗂️ THE QUEUE PANEL Press Q in comment mode, or open the Dashboard from the extension icon, to view your captured items. Each item shows: • A thumbnail of the captured element • The CSS selector • The React component name with source file and line number (when source maps are available) • Your comment • A status label — pending, in progress, done, or skipped You can copy any individual item as Markdown, copy the entire queue at once, skip or unskip items to defer them, delete items individually, or clear the whole queue. 🤖 MCP INTEGRATION ContextSnap includes a Python MCP server that exposes the queue over the Model Context Protocol. Once configured, any MCP-compatible AI agent — such as Claude Desktop, Cursor, or Wibey — can read and work through your feedback queue without any copy-pasting. Available MCP tools: • get_items — list all queued items, optionally filtered by status • get_item — fetch a single item by ID • claim_item — mark an item as in-progress and receive its full payload • post_item — add an item to the queue programmatically • clear_queue — flush all items • get_stats — get queue counts by status To set up: open the Dashboard, download server.py, and paste the MCP config snippet shown on the page into your agent's MCP settings. The queue panel displays a live "MCP Connected" badge when the server is reachable. 🔒 PERMISSIONS ContextSnap requests only what it needs: • activeTab — read the current page • scripting — inject the hover overlay • storage — persist the queue locally • downloads — save server.py • clipboardWrite — copy queue items • commands — register keyboard shortcuts No data leaves your machine except through the local MCP server you run yourself. 👤 WHO IS THIS FOR? - Frontend developers doing design-review QA - Teams doing async UI review who need more than a screenshot in Slack - AI-assisted coding workflows where an LLM agent handles UI feedback tickets - Design-to-code pipelines that require structured, element-level context