DevLensPro

Product Introduction

1. Definition: DevLensPro is a privacy-first, open-source Chrome extension (technical category: AI-powered developer tool) that integrates with Claude Code via the Model Context Protocol (MCP). It enables real-time UI inspection, capturing HTML/CSS, React components, console logs, and screenshots for AI-driven debugging.
2. Core Value Proposition: Eliminates manual UI issue reporting by enabling developers to Option+Click any browser element, instantly sharing contextual data with Claude Code for autonomous bug fixes—accelerating debugging workflows by 5–10x.

Main Features

1. MCP Protocol Integration: Syncs browser actions with Claude Code via WebSocket (port 7007). Captures element-specific data (CSS selector, dimensions, React Fiber source paths) and routes tasks to Claude’s CLI terminal for immediate analysis.
2. React/Vue Component Detection: Uses Fiber internals to identify React components, providing source file paths and props. Supports JavaScript frameworks (Angular, Vue) via DOM inspection.
3. Offline-First Architecture: Processes data 100% locally—no cloud dependency. Captures full-page screenshots with element highlighting, console logs (errors/warnings), and computed CSS properties via Chrome DevTools Protocol.
4. Ralph Autonomous Agent Compatibility: Triggers Ralph (Claude’s AI agent) to execute fixes, generate PRs, and validate changes via Playwright—enabling hands-free feature development.
5. URL-to-Codebase Mapping: Auto-links browser URLs to local project folders (e.g., https://myapp.com/dashboard → ~/projects/myapp/src/app/dashboard), ensuring Claude edits the correct codebase.

Problems Solved

1. Pain Point: Manual UI bug reporting wastes 30+ minutes per issue describing elements (e.g., "Button with class .pricing-card misaligned"). DevLensPro reduces this to 30 seconds via direct element pointing.
2. Target Audience:
   • Frontend developers using React/Next.js/Vue.
   • Teams using Claude Code for AI-assisted development.
   • Privacy-conscious engineers requiring offline-capable tools.
3. Use Cases:
   • CSS Debugging: Fix layout issues in 10 minutes by pointing at elements.
   • Feature Development: Scaffold new UI components via Ralph autonomy (2–8 hours).
   • Cross-Browser Validation: Auto-test fixes with Playwright integration.

Unique Advantages

1. Differentiation: Unlike generic devtools (e.g., Chrome Inspect), DevLensPro feeds structured context (JSON metadata + visuals) directly into Claude’s AI workflow—competitors lack MCP protocol integration or Ralph compatibility.
2. Key Innovation: Patented URL-to-local-folder mapping ensures AI always references the correct codebase. Combined with Fiber-based React detection, it achieves 100% context accuracy—unmatched in AI debugging tools.

Frequently Asked Questions (FAQ)

1. Does DevLensPro work with React?
   Yes, it auto-detects React components via Fiber internals, providing component names, props, and source file paths for precise edits.
2. Is my data sent to the cloud?
   No, DevLensPro operates 100% locally. Data stays on-device, with optional cloud relay only for VPS setups (using devlens cloud --room ID).
3. How does pricing work?
   Free tier includes 5 tasks/month. Pro plan (€9.99/month) offers unlimited tasks, Ralph integration, and Playwright validation—billed via token-based access (Clerk authentication).
4. Can I use DevLensPro without Claude Code?
   No, it requires Claude Code v1.0.34+ and MCP protocol for task routing. Setup is automated via npx -y @devlenspro/mcp-server install.
5. What browsers/frameworks are supported?
   Chrome only. Supports JavaScript frameworks (React, Vue, Angular) via DOM/CSS analysis, with React offering deepest integration.