Chrome extension that captures UI context from webpages and sends it to AI coding tools via AiBridge and AiBridge cursor extension.

• Element Selection: Click to select elements, Shift+click to add to group, Alt+click to select parent
• Context Extraction: Captures HTML, CSS, accessibility info, and screenshots with bounding boxes
• AiBridge Integration: Send context directly to Claude Code, Cursor, or other AI tools
• Clipboard Support: Copy formatted prompt when AiBridge is unavailable

Coming soon.

1. Clone or download this repository
2. Run npm install && npm run build
3. Open chrome://extensions/ in Chrome
4. Enable "Developer mode"
5. Click "Load unpacked" and select the dist folder

1. Click the ContextBox icon in Chrome toolbar
2. Click "Start Selection" to enable selection mode
3. Click elements on the page to select them (numbered boxes appear)
4. Add instructions in the popup that appears near selections
5. Press Enter or click Send (if AiBridge connected) or Copy

• Click: Select/deselect element
• Shift+Click: Add element to current group
• Alt+Click: Select parent element
• Enter: Send (if connected) or Copy
• Escape: Clear all selections

ContextBox works best with AiBridge for direct AI tool integration.

Install AiBridge:

# macOS/Linux/WSL
curl -fsSL https://raw.githubusercontent.com/MobAI-App/aibridge/main/install.sh | bash

Launch your AI tool through AiBridge:

aibridge claude    # Claude Code
aibridge codex     # Codex
aibridge gemini    # Gemini CLI

Install the AiBridge Cursor extension (also available in the Cursor marketplace as AiBridge). The extension runs the bridge server automatically within Cursor.

ContextBox automatically detects AiBridge on http://127.0.0.1:9999. Without AiBridge, use the Copy button to copy the prompt to clipboard.

In the popup:

• Include HTML snippets: Include element HTML in context
• Include computed styles: Include CSS properties
• Include accessibility info: Include ARIA attributes
• AiBridge URL: Change if using custom port (default: http://127.0.0.1:9999)

npm install        # Install dependencies
npm run build      # Build extension
npm run watch      # Watch mode

For a similar experience on mobile devices, check out MobAI.

ContextBox:

• 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 (passwords, tokens, etc.)
• Does not collect or transmit any analytics

MIT License - see LICENSE