React Grab


Select context for coding agents directly from your website

How? Point at any element and press ⌘C (Mac) or Ctrl+C (Windows/Linux) to copy the file name, React component, and HTML source code.

It makes tools like Cursor, Claude Code, Copilot run up to 3× faster and more accurate.

$3

!React Grab Demo

Install

Run this command to install React Grab into your project. Ensure you are running at project root (e.g. where the next.config.ts or vite.config.ts file is located).

``html
npx -y grab@latest init
`

Usage

Once installed, hover over any UI element in your browser and press:

- ⌘C (Cmd+C) on Mac
- Ctrl+C on Windows/Linux

This copies the element's context (file name, React component, and HTML source code) to your clipboard ready to paste into your coding agent. For example:

`js

Forgot your password?

in LoginForm at components/login-form.tsx:46:19
`

Manual Installation

If you're using a React framework or build tool, view instructions below:

#### Next.js (App router)

Add this inside of your app/layout.tsx:

`jsx
import Script from "next/script";

export default function RootLayout({ children }) {
return (


{/ put this in the /}
{process.env.NODE_ENV === "development" && (
src="//unpkg.com/react-grab/dist/index.global.js"
crossOrigin="anonymous"
strategy="beforeInteractive"
/>
)}

{children}

);
}
`

#### Next.js (Pages router)

Add this into your pages/_document.tsx:

`jsx
import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
return (


{/ put this in the /}
{process.env.NODE_ENV === "development" && (
src="//unpkg.com/react-grab/dist/index.global.js"
crossOrigin="anonymous"
strategy="beforeInteractive"
/>
)}