Installation

React Grab can be installed automatically using the CLI or manually for more control.

Automatic Installation (Recommended)

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:

Detects your framework - Identifies Next.js, Vite, TanStack Start, or Webpack
Detects your package manager - Works with npm, yarn, pnpm, or bun
Installs dependencies - Adds react-grab package
Configures your project - Modifies necessary files to load React Grab in development
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

npx -y grab@latest init --key "Meta+K"

npx -y grab@latest init --agent mcp

npx -y grab@latest init --force

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

Install React Grab

First, install the package:

npm install react-grab

yarn add react-grab

pnpm add react-grab

bun add react-grab

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

yarn add react-grab

pnpm add react-grab

bun add react-grab

Verification

After installation, verify React Grab is working:

Start your development server

npm run dev

yarn dev

pnpm dev

bun dev

Open your application

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

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.

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

Get Started

Core Concepts

Guides

Integrations

Advanced

Installation

Installation

Automatic Installation (Recommended)

What the CLI Does

CLI Options

Examples

Manual Installation

Next.js (App Router)

Next.js (Pages Router)

Vite

Webpack

Package Managers

Verification

Monorepo Support

Agent Integration

MCP Integration

Manual Agent Setup

Next Steps

Quick Start

GitHub Repository

​Installation

​Automatic Installation (Recommended)

​What the CLI Does

​CLI Options

​Examples

​Manual Installation

​Next.js (App Router)

​Next.js (Pages Router)

​Vite

​Webpack

​Package Managers

​Verification

​Monorepo Support

​Agent Integration

​MCP Integration

​Manual Agent Setup

​Next Steps

Quick Start

GitHub Repository

Installation

Automatic Installation (Recommended)

What the CLI Does

CLI Options

Examples

Manual Installation

Next.js (App Router)

Next.js (Pages Router)

Vite

Webpack

Package Managers

Verification

Monorepo Support

Agent Integration

MCP Integration

Manual Agent Setup

Next Steps