Media
1 item
Description
Grab the right context for your AI agent: pick any element on a page and copy a ready-to-use prompt. Stop describing UI changes to your AI coding agent in words. Point at the element instead. AgentGrab is a fully open source, local, privacy friendly, free element picker that turns any part of a web page into a complete, ready-to-paste prompt for AI coding agents like Cursor, Claude Code, Cline, ChatGPT and Gemini. Click the element, type what should change, and press Copy — the extension assembles every piece of context your agent needs to find that element in your codebase and edit it correctly. No more "the grey button under the pricing table, second one from the left." ★ HOW IT WORKS 1. Click the AgentGrab icon or press Alt+Shift+E. 2. Hover the page — elements highlight with a live size and selector badge. 3. Click the element you want (or use ↑ / ↓ to step to its parent or child for a pixel-perfect selection). 4. Type what should change, e.g. "make this full width on mobile and use the brand colour." 5. Hit Copy prompt (or Ctrl/Cmd+Enter) and paste it into your AI agent. ★ WHAT GOES INTO THE PROMPT AgentGrab does not just copy a CSS selector. Every generated prompt includes: • Stable CSS selector — prefers data-testid, aria-label, name and semantic attributes over build-generated class hashes, so the selector still maps to your source code. • XPath and a readable DOM path showing the full ancestor trail. • Current markup — the element's outer HTML, cleanly formatted and truncated. • Parent element and a summary of direct children, so the agent understands the structure. • All attributes, including data-* and ARIA attributes. • Visible text content. • Computed styles as actually rendered — display, position, spacing, colours, typography, flex/grid, border radius, shadows and more. • Rendered size and position, plus the viewport dimensions. • Framework source hints — the React, Vue, Svelte or Angular component that rendered the element, including the source file and line number when the page is running a dev build. • Grep strings — a shortlist of distinctive strings the agent can search for in your repository to locate the source instantly. • Built-in instructions telling the agent to find the real source code, confirm the match, apply only the requested change, and say so if it cannot locate the element instead of guessing. • The result is a structured Markdown prompt that lands your agent on the right file the first time — instead of burning turns hunting for the component or editing the wrong instance. ★ BUILT FOR REAL PAGES • Works inside iframes. • Works inside shadow DOM, including web components. • Blocks page clicks while picking, so selecting a link or a submit button will not navigate away. • Keyboard navigation: ↑ / ↓ to move up and down the DOM tree, Enter to select, Esc to cancel. • Preview the full prompt before copying. • Overlay is rendered in an isolated shadow root, so it never inherits or breaks the page's own styling. ★ WHO IT IS FOR • Frontend and full-stack developers using AI coding agents daily. • Vibe coders who want to point at a UI problem instead of explaining it. • Designers and PMs filing precise, actionable UI bug reports. • QA engineers who need stable selectors for tests. • Anyone reviewing a staging site who wants to hand a fix straight to an AI agent. ★ PRIVACY AgentGrab runs entirely in your browser. No account, no sign-up, no servers, no analytics, no tracking. The extension makes zero network requests and sends nothing anywhere — the prompt goes to your clipboard and nowhere else. It only reads the page when you explicitly start the picker, using the minimum permissions required: activeTab, scripting and clipboardWrite. ★ FREE AND OPEN SOURCE AgentGrab is MIT licensed. Read the code, file an issue or contribute: https://github.com/PaulHarrer/agentgrab ★ KEYBOARD SHORTCUTS • Alt+Shift+E — start or stop picking (customisable at chrome://extensions/shortcuts) • ↑ / ↓ — select parent / child element • Enter — select the highlighted element • Ctrl+Enter / Cmd+Enter — copy the prompt • Esc — cancel Grab the right context for your AI agent.