Bridge between RenderDraw Lens Chrome extension and AI coding tools. Auto-manages MCP server, routes annotations to AI assistants, and applies fixes automatically.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Bridge between the Lens Chrome extension and AI coding tools in VS Code.
Lens Bridge connects your browser-based visual feedback to your editor. Annotations captured in the Lens Chrome extension flow directly into VS Code, where AI assistants (Claude Code, Copilot, Continue, Cline) can read, resolve, and reply to them via MCP.
Features
Auto-start MCP server — Launches the local bridge server (port 4848) when VS Code opens
Status bar integration — Live connection state and pending annotation counts at a glance
Flow mode — Annotations route to AI tools automatically; fixes apply without confirmation
Queue mode — Review each AI-generated fix in a webview before applying or rejecting
AI tool detection — Auto-detects Claude Code, Copilot, Continue, and Cline; routes annotations by severity
MCP tools — Exposes lens_get_pending, lens_get_session, lens_acknowledge, lens_resolve, lens_dismiss, and lens_reply for any MCP-capable agent
How It Works
Capture — Use the Lens Chrome extension to click elements and describe visual bugs, QA checks, or video direction notes
Bridge — Lens Bridge receives annotations over HTTP/SSE from the Chrome extension
Route — Annotations are routed to available AI tools based on severity (blocking, important, suggestion, cosmetic)
Fix — AI assistants read annotations via MCP, generate fixes, and resolve them
Review — In Queue mode, review each fix in the built-in webview before it touches your code
Requirements
Lens Chrome Extension — Install from the Chrome Web Store or load the dist/ folder as an unpacked extension
VS Code 1.96+
Extension Settings
Setting
Default
Description
lensBridge.port
4848
HTTP port for Chrome extension communication
lensBridge.autoStart
true
Auto-start server when VS Code opens
lensBridge.mode
queue
Default mode: flow (auto-apply) or queue (review first)
lensBridge.flow.autoApply
true
Auto-apply fixes in Flow mode
lensBridge.flow.autoResolve
true
Auto-resolve after successful apply in Flow mode
lensBridge.routing.blocking
auto
AI tool for blocking annotations
lensBridge.routing.important
auto
AI tool for important annotations
lensBridge.routing.suggestion
auto
AI tool for suggestions
lensBridge.routing.cosmetic
auto
AI tool for cosmetic issues
Commands
Lens Bridge: Toggle MCP Server — Start or stop the bridge server
Lens Bridge: Switch to Flow Mode — Auto-apply incoming fixes
Lens Bridge: Switch to Queue Mode — Review fixes before applying
Lens Bridge: Open Fix Queue — Open the queue webview panel
Lens Bridge: Apply Next Fix — Apply the next pending fix
Lens Bridge: Apply All Queued Fixes — Apply all pending fixes at once
Lens Bridge: Show Pending Annotations — Display annotation counts by severity
MCP Integration
When the bridge server is running, any MCP-capable tool in your editor can use the lens_* tools to interact with annotations. The server also supports SSE for real-time updates back to the Chrome extension.
See the main repository for full MCP setup instructions across Claude Code, Cursor, Windsurf, and other tools.
