Grab element context
for AI assistants
Select any element on a webpage and copy its context (HTML, styles, component info) in a format optimized for Claude, ChatGPT, and Cursor.
Element Selection
3D DOM View
How it works
Three simple steps to get element context for your AI assistant
Hold to activate
Hold the shortcut keys to enter selection mode. A crosshair cursor appears and you can hover over any element.
Click or drag to select
Click on any element to select it, or drag to box-select multiple elements at once. A tooltip shows element info.
Paste into AI
Context is automatically copied to clipboard in Markdown format. Paste it directly into Claude, ChatGPT, or Cursor.
Features
Everything you need to get better AI responses about web elements
Smart element selection
Crosshair cursor with real-time element highlighting and tooltip preview.
3D DOM visualization
Press Ctrl+Shift+3 to see the page in 3D. Debug z-index and stacking context issues.
React & Vue support
Automatically extracts component names, props, and source file locations.
Computed styles
Captures layout, spacing, typography, and visual styles of selected elements.
Custom shortcuts
Configure your preferred modifier key combinations in the popup settings.
One-click copy
Copies formatted Markdown to clipboard instantly. No extra steps needed.
Ready to improve your AI workflow?
Free to use, no account required.
Add to Chrome — It's free