README.md
Your browser's UI, deeply understood by your IDE's AI agent.
browser-lens-mcp
Your browser's UI, deeply understood by your IDE's AI agent.How It Works
Browser Lens connects your IDE's AI agent to any running web page. Ask about any UI element and get its exact styles, layout, screenshot, and fix suggestions — with zero code changes.
The flow:
- Bookmarklet runs in your browser, captures DOM, CSS, layout, screenshots
- WebSocket streams data in real-time + receives commands from server
- MCP server stores and indexes everything, exposes 30 tools, 12 resources, 5 prompts
- IDE AI agent queries tools via stdio — inspect any element, take screenshots on demand, compare with Figma
Key Capabilities
| Capability | How It Works |
|---|---|
| Deep Element Inspection | live_query_element sends a command to the browser to capture ANY element by CSS selector — even deeply nested ones not in the auto-capture |
| On-Demand Screenshots | trigger_screenshot tells the browser to take a fresh screenshot NOW and returns the image directly to your IDE |
| Figma Comparison | compare_with_figma compares live CSS values against design specs, scores 0-100, generates copy-paste CSS fixes |
| Full Page Analysis | get_full_page_analysis returns structure, design tokens, typography, colors, spacing, accessibility in one call |
| Feature Area Inspection | inspect_feature_area inspects a specific UI section (header, sidebar, form) with all child details |
What Gets Captured
| Category | Data | Details |
|---|---|---|
| DOM | Full tree + element details | Tags, classes, attributes, text, semantic structure |
| CSS | Computed styles | Every CSS property for any element via selector |
| CSS | Variables | All --* custom properties from :root and stylesheets |
| CSS | Typography | Font families, sizes, weights, line-heights with usage counts |
| CSS | Colors | Text, background, border colors with hex values and counts |
| Layout | Box model | Width, height, padding, margin, border dimensions |
| Layout | Flex & Grid | Direction, wrap, gap, template columns/rows |
| Layout | Spacing | Margin/padding analysis, spacing scale, inconsistencies |
| Visual | Screenshots | On-demand viewport capture as PNG, returned as image |
| Visual | Figma comparison | Compare element against design specs with score + diff |
| A11y | Accessibility | ARIA labels, roles, alt text, headings, landmarks |
| Responsive | Viewport | Dimensions, DPR, active media queries, breakpoints |
| Mutations | DOM changes | Attribute changes, added/removed nodes in real-time |
Quick Start
Step 1 — Configure your IDE
Cursor
File: .cursor/mcp.json
{
"mcpServers": {
"browser-lens": {
"command": "npx",
"args": ["-y", "browser-lens-mcp@latest"]
}
}
}
VS Code (Copilot)
File: .vscode/mcp.json
{
"servers": {
"browser-lens": {
"type": "stdio",
"command": "npx",
"args": ["-y", "browser-lens-mcp@latest"]
}
}
}
Antigravity (Google)
File: ~/.gemini/antigravity/mcp_config.json
Open via:
...menu (top right) → MCP Servers → Manage MCP Servers → View raw config
{
"mcpServers": {
"browser-lens": {
"command": "npx",
"args": ["-y", "browser-lens-mcp@latest"],
"env": {
"MCP_BROWSER_LENS_PORT": "3300",
"MCP_BROWSER_LENS_WS_PORT": "3301",
"MCP_BROWSER_LENS_CDP_PORT": "9222"
}
}
}
}
After saving, click Refresh in Manage MCP Servers.
Usage in Antigravity chat:
@browser-lens Chụp screenshot cho tôi xem
@browser-lens/css-colors Show me the color palette
/
Tools (5)
live_query_elementCaptures DOM, styles, and details for a specific element by CSS selector.trigger_screenshotTakes a fresh screenshot of the current viewport and returns it to the IDE.compare_with_figmaCompares live CSS values against design specs and generates fix suggestions.get_full_page_analysisReturns a comprehensive analysis of page structure, design tokens, and accessibility.inspect_feature_areaInspects a specific UI section including all child details.Environment Variables
MCP_BROWSER_LENS_PORTPort for the MCP server communicationMCP_BROWSER_LENS_WS_PORTPort for the WebSocket connectionMCP_BROWSER_LENS_CDP_PORTPort for the Chrome DevTools Protocol connectionConfiguration
claude_desktop_config.json
{"mcpServers": {"browser-lens": {"command": "npx", "args": ["-y", "browser-lens-mcp@latest"]}}}Try it
→Inspect the header element and tell me if the padding matches our design system.
→Take a screenshot of the current page and identify any accessibility issues in the navigation menu.
→Compare the CSS of the primary button with the provided Figma spec and suggest fixes.
→Analyze the full page and list all typography inconsistencies found in the computed styles.
→Find the CSS variables used for the background colors on this page.