[FEATURE] Native Browser Integration for Visual UI Testing and Development

Preflight Checklist

• [x] I have searched existing requests and this feature hasn't been requested yet
• [x] This is a single feature request (not multiple features)

Problem Statement

Problem Statement

When developing web applications with Claude Code, there's currently no native way to visually inspect and test the UI changes being made. The UI development loop often requires manual feedback to Claude Code: copy paste of screenshots / DOM elements (HTML) / CSS / console logs / errors to Claude Code.

Benefits

• Faster Development: Immediate visual feedback without context switching
• Better Debugging: Direct access to computed styles and DOM structure
• Better UX: Claude Code becomes proactive about visual verification
• Lower Barrier: No need for Playwright/Puppeteer knowledge or manual DevTools

inspection

• Native Integration: Part of Claude Code's core workflow, not an afterthought
• Autonomous Problem Solving: Can investigate CSS/layout issues independently

This would significantly improve the front-end development experience with Claude
Code and make it competitive with visual-first development environments.

Proposed Solution

Add native browser integration to Claude Code with commands like:

Simple, built-in commands
claude browser open http://localhost:3000
claude browser screenshot
claude browser refresh
claude browser inspect <selector> # Returns DOM + computed styles
claude browser css <selector> # Returns computed CSS for element

Or even better, integrate it into the tool system so Claude Code can:

• Automatically open a browser when detecting web development work
• Proactively take screenshots when making UI changes
• Inspect DOM/CSS when debugging layout issues
• Directly view the browser state without intermediate scripts

Alternative Solutions

Current Workaround: Playwright

We can currently achieve browser automation using Playwright, but this approach has significant limitations:

What Works

• Opening browsers programmatically
• Taking screenshots via Playwright API
• Automated navigation and interaction

Major Pain Points

1. Heavy Setup Overhead

Every basic browser action requires writing custom scripts:
Just to open a browser and take a screenshot requires:
npx playwright install
Create a script file
Write navigation + screenshot code
Execute the script
Handle the image path

1. Not Part of Natural Workflow

Claude Code doesn't proactively use browser tools during problem-solving. Even when
working on UI issues:

• Claude Code needs to be explicitly asked to take screenshots
• Visual verification isn't part of Claude Code's natural debugging flow
• There's no training/context suggesting "check the browser when working on UI"

1. No DOM/CSS Inspection

This is a critical missing piece:

• Can't inspect computed CSS styles to understand why layouts break
• Can't examine the actual DOM structure rendered in the browser
• Can't see which CSS rules are being applied or overridden
• Must rely on user manually inspecting DevTools and copy-pasting HTML/CSS

1. Indirect Connection

• Can't directly "see" what the user sees
• Screenshot files must be explicitly referenced
• No real-time visual feedback during development

Priority

High - Significant impact on productivity

Feature Category

CLI commands and flags

Use Case Example

1. UI Development: Make CSS changes → automatically see the result
2. Visual Debugging: Investigate layout issues with real-time feedback + DOM

inspection

1. CSS Troubleshooting: Quickly check computed styles and see which rules apply
2. Responsive Testing: Quickly check different viewport sizes
3. Visual Regression: Compare before/after screenshots during refactoring
4. Layout Issues: Inspect flexbox/grid computed properties to debug sizing problems

Additional Context

_No response_