ContextBox

About

ContextBox captures UI context from webpages and sends it to AI coding tools.

HOW IT WORKS
1. Click the ContextBox icon and start selection mode
2. Click elements on the page to select them (numbered boxes appear)
3. Add instructions describing what you want
4. Press Enter to send to your AI tool or copy to clipboard

FEATURES
• Element Selection - Click to select, Shift+click to group, Alt+click for parent
• Rich Context - Captures HTML, CSS, accessibility info, and annotated screenshots
• AiBridge Integration - Send directly to Claude Code, Cursor, Codex, or Gemini CLI
• Privacy Focused - All processing is local, no data collection

KEYBOARD SHORTCUTS
• Click: Select/deselect element
• Shift+Click: Add to current group
• Alt+Click: Select parent element
• Enter: Send or copy
• Escape: Clear selections

AIBRIDGE SETUP
For direct AI tool integration install:
• AiBridge CLI: https://github.com/MobAI-App/aibridge
• Cursor Extension: Search "AiBridge" in Cursor marketplace or install from Github https://github.com/MobAI-App/ai-bridge-cursor-extension

Without AiBridge, use the Copy button to paste context manually.

PRIVACY
• Only activates when you click "Start Selection"
• Processes data locally in your browser
• Only sends data to AiBridge on your local machine
• Automatically redacts sensitive attributes
• No analytics or data collection