Browser to IDE Bridge

This project provides a seamless bridge between your web browser and your IDE (VS Code, Cursor, Windsurf). It allows you to "grab" React components, HTML elements, or generic page content directly from your running web application and send them—along with their code or screenshot—instantly to your IDE's AI chat (like Cursor's AI) or clipboard.

🌟 Overview

The system consists of two parts that work in tandem:

1. VS Code Extension (react-bridge / vs-extension): Acts as a local WebSocket server. It runs inside your editor, listening for connections and handling incoming data from the browser.
2. Browser Extension (web-grab / web-extension): A Chrome extension that injects a selection tool into your web pages. It captures the target element's code/structure and screenshot, then transmits it to the IDE.

✨ Features

• Instance Discovery: The browser extension automatically detects running VS Code instances and their project names. It handles multiple open windows gracefully.
• One-Click Context: Click any element on your webpage to capture:
  • Screenshot: Visual context for the AI.
  • Source Code/Markdown: The actual DOM structure or converted Markdown (via turndown).
  • Component Name: Identifies React components.
• Direct Chat Integration: Automatically pastes the captured context into the active chat input of supported AI editors (Cursor, Windsurf) or copies it to the clipboard.
• Secure & Local: Communication happens strictly over localhost. No data is sent to external cloud servers.
• Smart Locking: Establishes a 1-to-1 session lock between a specific browser tab and an IDE window to prevent cross-talk.

🏗️ Architecture

1. Registry Server (Port 9875): The VS Code extension starts a lightweight HTTP server to announce its presence. Browser extensions query this to find available projects.
2. Bridge Server (Ports 9876-9976): Each VS Code window hosts a WebSocket server on a unique port.
3. Content Script: The browser extension injects a script (grab.ts) into the active tab. It uses react-grab to handle element selection and highlighting.

🚀 Installation & Setup

1. VS Code Extension

1. Open the vs-extension folder.
2. Run npm install to install dependencies.
3. Press F5 or verify the extension is active in your editor.
4. Verify: You should see "React Bridge" status in your status bar or command palette.

2. Browser Extension

1. Open the web-extension folder.
2. Run npm install.
3. Build the extension: npm run build.
4. Open Chrome/Edge and navigate to chrome://extensions.
5. Enable "Developer mode".
6. Click "Load unpacked" and select the web-extension/dist folder.

📖 How to Use

1. Start the Bridge: Ensure your generic VS Code/Cursor project is open. The "React Bridge" server starts automatically (default port 9876).
2. Open Your Web App: Navigate to your localhost or deployed URL in Chrome.
3. Activate Extension: Click the extension icon in the browser toolbar.
4. Connect: A dropdown will appear in the top-right of the page listing available IDE projects. Select the one you want to send context to.
5. Grab Content:
   • Hover over elements on the page to highlight them.
   • Click an element to capture it.
6. Receive in IDE:
   • The IDE will receive the data.
   • If you have a chat window open (e.g., Cursor Chat), the component info and screenshot will be pasted automatically.
   • Otherwise, it will be copied to your clipboard.

🔧 Configuration

VS Code Settings:

• reactBridge.port: Default 9876. The starting port for the bridge server.
• reactBridge.autoConnect: Default true. automatically start server on window load.

🛠️ Troubleshooting

• "No IDE found": Ensure the VS Code extension is running and not blocked by a firewall. Check if http://127.0.0.1:9875/instances returns JSON.
• Connection Failed: If ports are blocked, check your system's firewall or try changing the default port in VS Code settings.
• Not Pasting: Ensure you have focus in the Chat input area. If automation fails, the extension will copy content to the clipboard instead.

---

Development:

• vs-extension/src/extension.ts: Main entry point for the IDE server.
• web-extension/src/content/grab.ts: Main logic for the browser interactions.
• web-extension/src/content/bridge.ts: Message relay between isolated world (Chrome API) and main world (DOM access).