MCP Compatible

See your browser
through your IDE's eyes

Real-time DOM, CSS, layout inspection, screenshot capture, and Figma design comparison. Your IDE AI agent sees exactly what users see. Zero code changes.

View on GitHub Quick Start
$ npx browser-lens-mcp
0
MCP Tools
0
Resources
0
AI Prompts
0
Data Sources

How It Works

Chrome Extension or Bookmarklet captures everything. WebSocket streams it. MCP serves it to your IDE.

Architecture Captures

Quick Start

Three steps. Under two minutes. Zero code changes.

1

Add MCP server to your IDE

Works with Cursor, VS Code, Claude Code, Windsurf, OpenCode, Zed, and any MCP client.

.cursor/mcp.json 
// Cursor, Windsurf, OpenCode
{
  "mcpServers": {
    "mcp-browser-lens": {
      "command": "npx",
      "args": ["-y", "browser-lens-mcp@latest"]
    }
  }
}
2

Connect your browser

Recommended: Chrome Extension

Persists across page reloads. Auto-connects on every page.

1. chrome://extensions
2. Enable Developer Mode
3. Load unpacked → select:
   node_modules/browser-lens-mcp/extension/
Alternative: Bookmarklet

Zero install. One click per page load.

1. Open http://localhost:3202
2. Drag bookmarklet to bar
3. Click on any page
[BrowserLens] WebSocket connected to ws://localhost:3203
[BrowserLens] DOM captured: 250 elements
[BrowserLens] Screenshot OK: 1440x900
3

Ask your AI agent

@browser-lens Describe this page's UI layout and structure
@browser-lens Compare .hero-button with Figma: fontSize 16px, borderRadius 8px
@browser-lens Take a screenshot and audit the design
@browser-lens Show all CSS variables on this page
@browser-lens Suggest CSS fixes for the comparison

Screenshots via CDP

100% reliable screenshots using Chrome DevTools Protocol. No CORS, no CSP — captures exactly what you see.

trigger_screenshot
Full viewport capture. Returns PNG image directly to IDE chat.
screenshot_element
Capture specific element by CSS selector. Cropped to just that component.
Setup: Launch browser with remote debugging
Brave (Mac)
/Applications/Brave\ Browser.app/Contents/MacOS/Brave\ Browser --remote-debugging-port=9222
Chrome (Mac)
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222
Chrome (Linux)
google-chrome --remote-debugging-port=9222
Verify: curl http://127.0.0.1:9222/json/version
Auto-scans ports 9222, 9229, 9333. Set MCP_BROWSER_LENS_CDP_PORT for custom port.

Figma Design Comparison

Compare live UI against any design tool's specs. Get scores, diffs, and copy-paste CSS fixes.

Figma Comparison Flow

31 MCP Tools

Everything your AI agent needs to understand, inspect, and fix your UI.

Live Browser Commands

trigger_screenshot · screenshot_element · live_query_element

DOM Inspection

get_dom_tree · inspect_element · query_selector · get_element_hierarchy · get_elements_summary

CSS Analysis

get_computed_styles · get_css_variables · get_typography · get_color_palette

Layout & Spacing

get_layout_info · get_spacing_analysis · get_responsive_info

Visual & Screenshots

get_page_screenshot · get_all_screenshots · describe_ui · capture_screenshot_with_analysis

Design Comparison

compare_with_figma · get_comparison_history · suggest_css_fixes · get_visual_diff_report

Page Analysis

get_full_page_analysis · get_design_tokens · inspect_feature_area · get_connection_status

General

get_page_info · get_dom_mutations · get_accessibility_info · clear_data

Chrome Extension

Auto-connect on every page load. Persists across browser reloads.

1
Open Extensions
Navigate to chrome://extensions
2
Developer Mode
Enable the toggle in the top-right corner
3
Load Unpacked
Select node_modules/browser-lens-mcp/extension/
🔌
Auto-Connect
Persists across reloads
Configurable via popup
Works on all pages
Extension
Auto-connect · Persist reload · Popup config
Bookmarklet
Zero install · One click per page · Any browser

IDE Configuration

Works with every MCP-compatible IDE. Here's where to put the config.

Antigravity~/.gemini/antigravity/mcp_config.json
... → MCP Servers → Manage → View raw config
Cursor.cursor/mcp.json
VS Code.vscode/mcp.json
Claude Code~/.claude.json
Windsurf~/.codeium/windsurf/mcp_config.json
OpenCode~/.config/opencode/config.json
Zed~/.config/zed/settings.json