Skip to main content
React Grab integrates seamlessly with Next.js, supporting both the App Router and Pages Router.

​
Automatic Installation

The easiest way to install React Grab in your Next.js project:
1

Run the CLI

Navigate to your project root (where next.config.ts is located) and run:
npx -y grab@latest init
The CLI will automatically detect your Next.js setup and router type.
2

Verify the installation

Start your development server:
npm run dev
Hover over any UI element and press ⌘C (Mac) or Ctrl+C (Windows/Linux) to copy its context.

​
Manual Installation

If you prefer to set up React Grab manually or the automatic installation doesn’t work for your setup: 
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"
          />
        )}
      </head>
      <body>{children}</body>
    </html>
  );
}
Make sure to wrap the Script component in a process.env.NODE_ENV === "development" check to ensure React Grab only loads in development mode.

​
Router Detection

The CLI automatically detects your Next.js router type:
  • App Router: Looks for app/layout.tsx or app/layout.js
  • Pages Router: Looks for pages/_document.tsx or pages/_document.js
If you have a custom setup, use the manual installation guide.

​
Verification

After installation, verify React Grab is working:
1

Start your dev server

npm run dev
2

Open your app in the browser

Navigate to any page in your Next.js application.
3

Test the copy functionality

Hover over any UI element and press:
  • ⌘C (Cmd+C) on Mac
  • Ctrl+C on Windows/Linux
You should see the element’s context copied to your clipboard, including:
  • File name and line number
  • React component name
  • HTML source code

​
Common Issues

Ensure you’re adding the Script component inside the <head> tag, not in the <body>. The strategy="beforeInteractive" ensures it loads before your app hydrates.
Make sure you’re importing Script from next/script, not next/document. The Script component in Pages Router should still be imported from next/script.
React Grab is designed for development only. The process.env.NODE_ENV === "development" check prevents it from loading in production builds.

​
Next Steps

Connect to Your Agent

Set up React Grab with Cursor, Claude, or other AI coding agents

Configure Options

Customize activation keys, context limits, and more

Build docs developers (and LLMs) love

Get started for freeTalk to us