> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/aidenybai/react-grab/llms.txt
> Use this file to discover all available pages before exploring further.
# Installation
> Detailed installation guide for React Grab
# 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:
```bash theme={null}
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:
```bash theme={null}
npx -y grab@latest init [options]
```
* `-y, --yes` - Skip confirmation prompts
* `-f, --force` - Force overwrite existing configuration
* `-a, --agent ` - Connect to your agent (cursor, claude, copilot, mcp)
* `-k, --key ` - Set custom activation key (e.g., Meta+K, Ctrl+Shift+G, Space)
* `--skip-install` - Skip package installation
* `-c, --cwd ` - Specify working directory
### Examples
```bash Auto-confirm everything theme={null}
npx -y grab@latest init --yes
```
```bash Custom activation key theme={null}
npx -y grab@latest init --key "Meta+K"
```
```bash Install with MCP integration theme={null}
npx -y grab@latest init --agent mcp
```
```bash Force reinstall theme={null}
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`:
```jsx app/layout.tsx theme={null}
import Script from "next/script";
export default function RootLayout({ children }) {
return (
{process.env.NODE_ENV === "development" && (
)}
{children}
);
}
```
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`:
```jsx pages/_document.tsx theme={null}
import { Html, Head, Main, NextScript } from "next/document";
export default function Document() {
return (
{process.env.NODE_ENV === "development" && (
)}
);
}
```
### Vite
Add this to your `index.html`:
```html index.html theme={null}
```
Vite's `import.meta.env.DEV` ensures React Grab only loads in development mode.
### Webpack
First, install the package:
```bash npm theme={null}
npm install react-grab
```
```bash yarn theme={null}
yarn add react-grab
```
```bash pnpm theme={null}
pnpm add react-grab
```
```bash bun theme={null}
bun add react-grab
```
Add this at the top of your main entry file (e.g., `src/index.tsx` or `src/main.tsx`):
```tsx src/index.tsx theme={null}
if (process.env.NODE_ENV === "development") {
import("react-grab");
}
```
## Package Managers
React Grab works with all major package managers:
```bash npm theme={null}
npm install react-grab
```
```bash yarn theme={null}
yarn add react-grab
```
```bash pnpm theme={null}
pnpm add react-grab
```
```bash bun theme={null}
bun add react-grab
```
## Verification
After installation, verify React Grab is working:
```bash npm theme={null}
npm run dev
```
```bash yarn theme={null}
yarn dev
```
```bash pnpm theme={null}
pnpm dev
```
```bash bun theme={null}
bun dev
```
Navigate to your application in a browser (usually `http://localhost:3000` or `http://localhost:5173`).
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.
Paste the clipboard content into a text editor. You should see output like:
```js theme={null}
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:
```bash theme={null}
npx -y grab@latest init
```
You'll be prompted to select which project to install React Grab into. To skip the prompt:
```bash theme={null}
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:
```bash theme={null}
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:
```bash theme={null}
npx -y grab@latest init --agent cursor
```
Supported agents:
* `cursor` - Cursor AI
* `claude` - Claude Code
* `copilot` - GitHub Copilot
* `mcp` - Model Context Protocol
## Next Steps
Learn how to use React Grab effectively
View source code and contribute
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.