ContextSnap: Screenshots & AI Visual Feedback

About

📸 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