Skip to main content

​
Installation

React Grab can be installed automatically using the CLI or manually for more control. The easiest way to install React Grab is using the CLI tool: 
npx -y grab@latest init
Run this command from your project root directory (where next.config.ts or vite.config.ts is located).

​
What the CLI Does

The initialization command automatically:
  1. Detects your framework - Identifies Next.js, Vite, TanStack Start, or Webpack
  2. Detects your package manager - Works with npm, yarn, pnpm, or bun
  3. Installs dependencies - Adds react-grab package
  4. Configures your project - Modifies necessary files to load React Grab in development
  5. Shows a diff - Previews all changes before applying them

​
CLI Options

Customize the installation with these flags: 
npx -y grab@latest init [options]
  • -y, --yes - Skip confirmation prompts
  • -f, --force - Force overwrite existing configuration
  • -a, --agent <agent> - Connect to your agent (cursor, claude, copilot, mcp)
  • -k, --key <key> - Set custom activation key (e.g., Meta+K, Ctrl+Shift+G, Space)
  • --skip-install - Skip package installation
  • -c, --cwd <cwd> - Specify working directory

​
Examples

npx -y grab@latest init --yes

​
Manual Installation

If you prefer manual installation or the automatic setup doesn’t work for your setup, follow the framework-specific instructions below.

​
Next.js (App Router)

Add this to your app/layout.tsx:
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"
          />
        )}
      </head>
      <body>{children}</body>
    </html>
  );
}
The beforeInteractive strategy ensures React Grab loads before your application, capturing all component renders.

​
Next.js (Pages Router)

Add this to your pages/_document.tsx:
pages/_document.tsx
import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html lang="en">
      <Head>
        {process.env.NODE_ENV === "development" && (
          <Script
            src="//unpkg.com/react-grab/dist/index.global.js"
            crossOrigin="anonymous"
            strategy="beforeInteractive"
          />
        )}
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

​
Vite

Add this to your index.html:
index.html
<!doctype html>
<html lang="en">
  <head>
    <script type="module">
      if (import.meta.env.DEV) {
        import("react-grab");
      }
    </script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>
Vite’s import.meta.env.DEV ensures React Grab only loads in development mode.

​
Webpack

1

Install React Grab

First, install the package:
npm install react-grab
2

Import in your entry file

Add this at the top of your main entry file (e.g., src/index.tsx or src/main.tsx):
src/index.tsx
if (process.env.NODE_ENV === "development") {
  import("react-grab");
}

​
Package Managers

React Grab works with all major package managers: 
npm install react-grab

​
Verification

After installation, verify React Grab is working:
1

Start your development server

npm run dev
2

Open your application

Navigate to your application in a browser (usually http://localhost:3000 or http://localhost:5173).
3

Test element selection

Hover over any UI element and press:
  • ⌘C on Mac
  • Ctrl+C on Windows/Linux
You should see a visual indicator when hovering, and the context should be copied to your clipboard.
4

Verify clipboard content

Paste the clipboard content into a text editor. You should see output like:
<button class="btn btn-primary">
  Click me
</button>
in Button at components/Button.tsx:12:5
If React Grab doesn’t appear, check:
  • You’re running in development mode
  • The script is loading (check browser network tab)
  • No console errors are present
  • You’re hovering before pressing the activation key

​
Monorepo Support

For monorepos, the CLI automatically detects all React projects: 
npx -y grab@latest init
You’ll be prompted to select which project to install React Grab into. To skip the prompt: 
npx -y grab@latest init -c path/to/specific/project

​
Agent Integration

Connect React Grab to your coding agent:

​
MCP Integration

For agents supporting Model Context Protocol: 
npx -y grab@latest add mcp
This configures your agent to automatically access React Grab context.

​
Manual Agent Setup

When installing, you can specify an agent: 
npx -y grab@latest init --agent cursor
Supported agents:
  • cursor - Cursor AI
  • claude - Claude Code
  • copilot - GitHub Copilot
  • mcp - Model Context Protocol

​
Next Steps

Quick Start

Learn how to use React Grab effectively

GitHub Repository

View source code and contribute

Build docs developers (and LLMs) love

Get started for freeTalk to us