Claude Element Inspector
Select DOM elements in Chrome and send them to Claude Code for AI-assisted coding.
Features
- WebSocket Server: Receives element data from the Chrome extension
- Element Info Panel: Displays selected element details (tag, classes, styles, selector)
- Claude Code Integration: Send element context to Claude Code with natural language instructions
- Framework Detection: Recognizes React, Vue, Svelte, and Angular components
Requirements
Usage
- Open your project in VSCode
- The WebSocket server starts automatically on port 54321
- Install the Chrome extension "Claude Code Element Picker"
- Browse your web app and press Alt+P to enable the picker
- Click any element to select it
- View element details in the VSCode sidebar
- Enter your instruction (e.g., "Change this button to green")
- Click "Send to Claude Code"
Commands
| Command |
Description |
Claude Inspector: Start Element Inspector Server |
Start the WebSocket server |
Claude Inspector: Stop Element Inspector Server |
Stop the WebSocket server |
Claude Inspector: Send Selected Element to Claude Code |
Send current element to Claude |
Claude Inspector: Show Element Panel |
Open the Element Inspector panel |
Settings
| Setting |
Default |
Description |
claude-inspector.port |
54321 |
WebSocket server port |
claude-inspector.autoStart |
true |
Auto-start server on activation |
How It Works
Chrome Extension VSCode Extension Claude Code
│ │ │
│ 1. Select element │ │
│ ──────────────────────► │ │
│ (WebSocket) │ │
│ │ 2. Display info │
│ │ ◄────────────── │
│ │ │
│ │ 3. Send to Claude │
│ │ ─────────────────────►│
│ │ (Terminal CLI) │
│ │ │
│ │ 4. Modify code │
│ │ ◄─────────────────────│
Keyboard Shortcuts (Chrome Extension)
| Shortcut |
Action |
Alt + P |
Toggle element picker |
Esc |
Cancel selection |
Click |
Select element |
License
MIT
| |
