Your agent wants to know where that button lives

What it does

React Grab is a development-side browser utility that turns any hovered UI element into a clipboard snippet containing its component stack and precise source location. Copy an element and you get annotated context—something like [<a ...> in LoginForm (at components/login-form.tsx:46:19)]—ready to paste into an agent. It is designed for React codebases running in local development.

The interesting bit

Instead of dumping raw DOM HTML, it resolves the React tree back to source files and line numbers, effectively handing your agent a map rather than a mystery. The built-in plugin API also lets you register custom context-menu actions or toolbar items, so you can extend the inspector without touching core code.

Key highlights

• Copies the selected element plus its React component stack and exact source file location to the clipboard.
• Claims agents work 2× faster and more accurately when given this source context instead of raw HTML.
• Extensible via a plugin API for custom context-menu actions, toolbar buttons, and lifecycle hooks.
• Loads only in development; it never ships to production.
• Works with Next.js App/Pages routers, Vite, and Webpack.

Verdict

Worth a look if you spend your days describing React UI elements to an agent and want to stop typing “the blue button in the top left.” Skip it if you are not using React or if your agent already has full codebase RAG.