Dom Lens

Grab any element on any website and give it to AI coding agents like Cursor, Claude Code, and OpenCode. DOM Lens solves the problem where coding agents cannot access elements on your page by enabling point-and-click element selection.

🎯 KEY FEATURES:
• Universal compatibility: Works on any website (React, Vue, Svelte, vanilla JS)
• React-aware: Extracts component stack and source locations when React is detected
• Clipboard-ready: Automatically copies grabbed elements with context tags
• Visual feedback: Overlay highlights elements as you hover
• Customizable: Configure hotkeys, hold duration, and AI adapters
• Hold-to-activate: Prevents accidental activation with configurable hold duration

⚡ DEVELOPER-FOCUSED:
• No telemetry or data collection
• Works with any website
• Minimal permissions (activeTab, storage, clipboardWrite)
• Type-safe TypeScript implementation

🎨 CUSTOMIZATION:
• Configure keyboard shortcuts (default: ⌘/Ctrl+C with hold duration)
• Choose AI adapter (Cursor, or clipboard-only mode)
• Adjust hold duration (100-1000ms) to prevent accidental activation
• Settings persist across browser sessions

🔧 HOW IT WORKS:
1. Hold your configured hotkey (default: ⌘/Ctrl+C) for the set duration
2. Hover over any element on the page to see visual feedback
3. Click the element to grab it
4. Element HTML + React component info is automatically copied to clipboard
5. Use with Cursor adapter to automatically open in your AI coding tool

Perfect for developers working with AI coding assistants who need to provide specific UI context for modifications, debugging, or component extraction.