React Grab

React Grab provides a tiny JavaScript snippet that lets developers and coding agents capture DOM elements from a running web app as context. It is designed for scenarios where coding agents cannot access page elements directly — you point, press ⌘C, and the selected element is copied as context for agents such as Cursor, Claude, or OpenCode. Installation is a single script tag for most projects, with guidance for popular React frameworks like Next.js.

• Script tag install — Add a single tag (unpkg distribution) to your app to enable element grabbing instantly.
• Point-and-click capture — Hold ⌘C and click page elements to copy their markup and context for downstream coding agents.
• Agent integrations — Use captured elements with coding assistants such as Cursor, Claude Code, and OpenCode to provide live UI context for code edits and suggestions.
• Framework integration notes — For React frameworks (example shown for Next.js App Router) include the script via your framework's script component during development to avoid injecting in production builds.
• Open-source distribution — The project is published on GitHub and distributed via unpkg for easy inclusion in development environments.

To get started, add the provided script tag to your application's HTML or framework layout, enable the tool in development, then hold the modifier key and click the element you want to provide as context to your coding agent.