Native Claude Code Integration
DevLensPro was built specifically to work with Claude Code. Click any element in your browser, and Claude instantly knows what you're looking at.
How It Works
1. Point & Click
Activate DevLensPro and click on any element in your browser. The extension captures the complete element context including CSS, selectors, and hierarchy.
2. MCP Protocol
Element data is sent to Claude Code via the Model Context Protocol (MCP), Anthropic's standard for tool integration with AI assistants.
3. AI Assistance
Ask Claude about the element: "Fix the alignment", "Add hover styles", or "What's causing the overflow?". Claude has full context to help.
Why Claude Code + DevLensPro
Natural Language Debugging
Describe issues in plain English and get targeted solutions
Context-Aware Code
Claude generates code that matches your existing patterns
Instant Suggestions
Get CSS fixes and improvements in seconds, not minutes
Autonomous Debugging
Let Claude investigate and fix issues while you focus on building
Example Prompts
"The button I'm pointing at needs a hover effect""Why is this element overflowing its container?""Make this card match our design system""Add a smooth transition to this dropdown""The spacing between these items looks wrong"Quick Setup
Add DevLensPro to your Claude Code configuration in under a minute.
// ~/.claude/settings.json
{
"mcpServers": {
"devlens": {
"command": "npx",
"args": ["-y", "@devlenspro/mcp-server"]
}
}
}