react-grab

React Grab is a development tool for React apps that helps AI coding assistants make more targeted edits to your code. When you are using a tool like Cursor or a similar AI agent to change your app's appearance, the agent normally has to guess which file and which lines correspond to the button or section you want to change.

React Grab removes that guessing. You hover over any element on the page in your browser, press Cmd+C or Ctrl+C, and the tool copies a structured block of context: the HTML for the selected element, the exact file path and line number where that element lives in your source code, the surrounding code lines, and the React component tree above it. You then paste that block into your AI agent's chat, and the agent can start editing the right place right away.

Setup is a single terminal command at your project root. The README also includes manual installation instructions for Next.js, Vite, and Webpack. React Grab only loads in development mode, so it has no effect on your production build.

The tool supports plugins, which let you add custom actions to a right-click context menu or a toolbar. A plugin can trigger any JavaScript function when you select an element: logging it, freezing the hover state for inspection, or anything else you define. Plugins register and unregister cleanly, so they can be tied to React component lifecycles.

React Grab is open-source under an MIT license and is written in TypeScript. Benchmarks linked from the README suggest edits made with it are about twice as fast compared to working without the extra source context.