DevLensPro connects your browser directly to Claude Code via MCP protocol, allowing developers to point at UI elements and have AI automatically fix code issues. The tool captures comprehensive context including screenshots, CSS, HTML, console logs, and React component information to provide Claude with everything needed to understand and resolve problems.

Key features include Chrome Extension integration with Option+Click functionality for element selection, MCP Protocol for native Claude Code integration, Ralph compatibility for autonomous development, React component detection via Fiber inspection, real-time WebSocket synchronization, and 100% local processing that keeps all data on your machine. The extension captures complete HTML element data with CSS selectors and computed styles, full-page screenshots with highlighted elements, browser console logs including errors and warnings, AI-enhanced task descriptions, and URL-based project mapping.

The workflow operates through a simple point-and-click process: Option+Click any element in your browser, which captures screenshot, CSS, selector and URL context, syncs via real-time WebSocket to Claude Code, enables AI analysis to locate code needing fixes, and allows Ralph autonomous task execution with PR generation. Each task is linked to its URL, with Claude Code automatically mapping URLs to local project folders so it always knows which codebase to edit.

Benefits include eliminating the back-and-forth of describing UI issues, providing 5-10x faster debugging workflows, achieving 100% context accuracy, and reducing average issue reporting time to 30 seconds. Use cases range from quick CSS bug fixes taking about 10 minutes to new feature development spanning 2-8 hours and full project development requiring 1-2 days for complex work.

Target users are developers working with Claude Code who need to debug and fix UI issues efficiently. The tool integrates seamlessly with Claude Code via MCP protocol and works with Ralph autonomous agent for hands-free development. Setup options include local development on the same machine or remote VPS setups with cloud relay connections.