The bridge between your browser and Claude Code. Option+Click any element, and Claude instantly knows what to fix. Works with Ralph for fully autonomous development.
DevLensPro connects your browser directly to Claude Code via MCP protocol
Option+Click any element in your browser
Screenshot, CSS, selector & URL captured
Real-time WebSocket to Claude Code
Claude locates the code to fix
Autonomous task execution & PR
Each task is linked to its URL. Claude Code automatically maps URLs to your local project folders, so it always knows which codebase to edit.
Claude receives everything needed to locate and fix the element: CSS selector, computed styles, text content, position, and React component info.
Everything you need to supercharge your Claude Code workflow
One-click install from Chrome Web Store. Option+Click to select any element instantly.
Native integration with Claude Code via Model Context Protocol. No additional setup needed.
Works seamlessly with Ralph autonomous agent for hands-free bug fixing and feature development.
Automatically detects React components and provides source file locations via Fiber inspection.
WebSocket connection ensures instant task delivery to Claude Code as you click.
All data stays on your machine. No cloud required. Privacy-first architecture.
Works on local machines or with remote VPS development servers
Browser and Claude Code on the same machine. Zero configuration needed.
Browser local, Claude Code on VPS. Uses cloud relay for connection.
Install the Chrome Extension
Get it from Chrome Web Store
Configure MCP Server
Start Using
Restart Claude Code, then Option+Click any element in your browser!
DevLensPro is completely free. No accounts, no limits, no catch.
Everything you need, completely free
Install in 30 seconds. Start fixing UI bugs with AI assistance immediately.