Features
Element Screenshots
Click an element in the preview to send it to the AI as an image.
How It Works
The pointer button in the preview toolbar toggles an element picker. When active:
- Hover over the preview — the element under the cursor gets an outline and a tag tooltip (tag name, id, classes).
- Click an element.
- Coodeen snapshots the clicked element's bounding box from the preview and attaches it as a PNG to your next prompt.
The thumbnail appears in the composer. Send the message and the image is delivered as a file part alongside the prompt text.
Requirements
- The picker injects a small script into the preview page. Local dev servers allow this; pages with a strict Content-Security-Policy may block it.
- For the AI to actually see the image, the active model must accept image inputs. If it doesn't, the provider drops the image part silently.
What's Captured
- A cropped PNG of the element's rendered rectangle.
- Tag name,
id, class list, short text excerpt, and a generated CSS selector (#idortag.class.class).
Nothing outside the element's rectangle (plus a few pixels of padding) is captured.