Built for Claude Code Users

Point at UI.
Let Claude Fix It.

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.

Download ExtensionSee How It Works
Free & Open Source
MCP Protocol
Works Offline
DevLensPro - AI-powered debugging for Claude Code. Point, click, fix. | Product HuntFeatured on There's an AI for That
Claude Code Terminal
Complete Workflow

From Click to Fix in Seconds

DevLensPro connects your browser directly to Claude Code via MCP protocol

Point & Click

Option+Click any element in your browser

Capture Context

Screenshot, CSS, selector & URL captured

MCP Sync

Real-time WebSocket to Claude Code

AI Analysis

Claude locates the code to fix

Ralph Executes

Autonomous task execution & PR

URL-Based Project Management

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.

Task URL:
https://myapp.com/dashboard
Maps to:
~/projects/myapp/src/app/dashboard

Full Element Context

Claude receives everything needed to locate and fix the element: CSS selector, computed styles, text content, position, and React component info.

{
"selector": ".pricing-card button",
"tagName": "BUTTON",
"cssProperties": { ... },
"innerText": "Subscribe"
}
Features

Built for Agentic Development

Everything you need to supercharge your Claude Code workflow

Chrome Extension

Easy manual install in Developer Mode. Option+Click to select any element instantly.

MCP Protocol

Native integration with Claude Code via Model Context Protocol. No additional setup needed.

Ralph Compatible

Works seamlessly with Ralph autonomous agent for hands-free bug fixing and feature development.

React Detection

Automatically detects React components and provides source file locations via Fiber inspection.

Real-time Sync

WebSocket connection ensures instant task delivery to Claude Code as you click.

100% Local

All data stays on your machine. No cloud required. Privacy-first architecture.

What Extension Captures

Complete Context for AI

Every click captures rich data that Claude needs to understand and fix your UI

HTML Element

Complete DOM info: tag name, CSS selector, class names, dimensions, and position.

selector:
.pricing-card button
tagName:
BUTTON

Screenshot

Full-page screenshot with highlighted element. Claude sees exactly what you see.

Viewport capture with highlight

Console Logs

Errors, warnings, and logs from the browser console. Perfect for debugging.

✕ TypeError: undefined
⚠ Deprecation warning
ℹ User clicked button

AI Comments

Type your description, click AI Enhance to get a structured, detailed task description.

Your input:
"button looks weird"
✨ AI Enhanced:
"Fix button alignment: padding-left differs from padding-right..."

Computed Styles

All CSS properties actually applied to the element (colors, fonts, margins, flexbox, grid).

React Detection

Auto-detects React components via Fiber internals. Gets component name and source file path.

URL + Project Mapping

Page URL is captured and mapped to your local project folder, so Claude knows where to edit.

MCP Commands

Full CLI Reference

All commands available via devlens CLI

Setup Commands

Configure MCP for your IDE

devlens installRecommended

Auto-install: configures MCP + Ralph + API key

devlens config claude

Configure MCP for Claude Code specifically

devlens config cursor

Configure MCP for Cursor IDE

devlens config windsurf

Configure MCP for Windsurf IDE

Runtime Commands

Start the MCP server

devlens startLocal Mode

Start MCP server on localhost:7007

devlens cloud --room IDCloud Mode

Connect to relay server with room ID (for VPS setups)

devlens generate-key

Generate API key for cloud authentication

MCP Tools for Claude

Tools Claude Code can call via MCP protocol

get-pointed-element

Get the DOM element you Option+Clicked

list-tasks

List all tasks from your DevLensPro cloud

get-task

Get detailed info about a specific task

update-task

Mark task status: in_progress, resolved

complete-task

Mark task as resolved with resolution note

get-status

Check MCP server connection and user info

One Command Install

The easiest way to get started. Configures everything automatically.

$ npx -y @devlenspro/mcp-server install
Use Cases

Built for Real Developer Workflows

From quick debugging sessions to multi-day feature development

Quick Debugging

Fix a CSS bug in 10 minutes. Point at the broken element, describe the issue, and Claude applies the fix instantly.

~10 minutes per fix

New Feature Development

Build entire features with Ralph. Point at existing UI for context, describe what you want, and let Claude scaffold the new code.

2-8 hours per feature

Full Project Development

Kickstart new projects or refactor existing ones. Claude understands your entire codebase through element inspection.

1-2 days for complex work

Save Hours Every Week

DevLensPro eliminates the back-and-forth of describing UI issues. Instead of typing "the button on the pricing page with class .btn-primary", just point at it.

  • ~80% faster bug reporting
  • Zero context switching
  • Playwright validation included
5-10x
Faster debugging workflow
30s
Avg. time to report issue
100%
Context accuracy
Setup Options

Choose Your Setup

Works on local machines or with remote VPS development servers

Recommended

Local Development

Browser and Claude Code on the same machine. Zero config.

$ npx -y @devlenspro/mcp-server install
  • Connects to localhost:7007
  • MCP server with Claude Code
  • Fastest response time

Remote VPS Setup

Browser local, Claude Code on VPS. Cloud relay connection.

$ npx -y @devlenspro/mcp-server install
$ devlens cloud --room YOUR_ROOM_ID
  • Browser to remote server
  • Works through firewalls
  • Custom room IDs

Quick Start

Get running in 3 simple steps. Works in minutes.

1

Download Chrome Extension

2

Run MCP config command

3

Option+Click any element!

Pricing

Simple, Token-Based Pricing

Start free with 5 tasks, then upgrade for unlimited access. Pay only for what you use.

Free
0€/forever

Try DevLensPro with 5 free tasks

  • 5 tasks per month
  • 1 project
  • Chrome extension
  • MCP integration
  • Local mode
  • Community support
Get Started Free
Early Adopter - 50% OFF
Pro
9,99€/month
19,99€Save 10€/month

Unlimited tasks for professional developers. 7-day free trial - no credit card required.

🎉 Early adopter price for the first 50 users only!

  • Unlimited tasks
  • Chrome extension
  • Full MCP integration
  • Local & cloud modes
  • React component detection
  • Works with Ralph
  • Priority support
  • Playwright validation
Get Early Access
Token-Based Access

Sign in with Google via Clerk. Your access token activates immediately. If your subscription lapses, the token expires automatically. No data is stored - your privacy is protected.

FAQ

Frequently Asked Questions

Ready to Supercharge Claude Code?

Install in 30 seconds. Start fixing UI bugs with AI assistance immediately.

Download Extension