React Grab

React Grab

Copy elements on your app as context for

Cursor,

Claude,

etc

Activate

Hold ⌘C

By default coding agents cannot access elements on your page. React Grab fixes this - just point and click to provide context!

Agent

Which one?

You

make the button bigger!

With

React Grab

:

• Hold ⌘C and click to grab the element 
• Use with any tool you want: Cursor, Claude Code, OpenCode
• Just a single script tag (it's just JavaScript!)

View on GitHub

Install using Cursor

Install

Get started in 1 minute by adding this script tag to your app:

<script
  src="//unpkg.com/react-grab/dist/index.global.js"
  crossorigin="anonymous"
  data-enabled="true"
></script>

If you're using a React framework or build tool:

Next.js (App Router)

Add this inside of your app/layout.tsx:

import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        {process.env.NODE_ENV === "development" && (
          <Script
            src="//unpkg.com/react-grab/dist/index.global.js"
            crossOrigin="anonymous"
            strategy="beforeInteractive"
            data-enabled="true"
          />
        )}
      </head>
      <body>{children}</body>
    </html>
  )
}