> ## 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.

# Quick Start

> Get started with React Grab in 2 minutes

# Quick Start

Get React Grab running in your project in under 2 minutes.

<Note>
  Make sure you're in your project root directory (where `next.config.ts` or `vite.config.ts` is located) before running the installation command.
</Note>

## Installation

<Steps>
  <Step title="Run the initialization command">
    Open your terminal and run:

    ```bash theme={null}
    npx -y grab@latest init
    ```

    The CLI will automatically:

    * Detect your framework (Next.js, Vite, TanStack Start, or Webpack)
    * Identify your package manager (npm, yarn, pnpm, or bun)
    * Install the necessary dependencies
    * Configure your project files
  </Step>

  <Step title="Start your development server">
    Start your development server as usual:

    <CodeGroup>
      ```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
      ```
    </CodeGroup>
  </Step>

  <Step title="Try it out">
    Open your application in a browser and hover over any UI element. Press:

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

    The element's context will be copied to your clipboard:

    ```js theme={null}
    <a class="ml-auto inline-block text-sm" href="#">
      Forgot your password?
    </a>
    in LoginForm at components/login-form.tsx:46:19
    ```
  </Step>

  <Step title="Paste into your coding agent">
    Paste the copied context into your favorite coding agent:

    * Cursor
    * Claude Code
    * GitHub Copilot
    * Any other AI coding assistant

    Your agent now has the exact file path, component name, and HTML structure to work with.
  </Step>
</Steps>

## What Gets Copied?

When you select an element, React Grab copies three pieces of information:

1. **HTML Structure** - The rendered HTML with all classes and attributes
2. **Component Name** - The React component that renders this element
3. **File Location** - Exact file path and line number

<Tip>
  The copied format is optimized for coding agents to understand context quickly and accurately.
</Tip>

## Connect to MCP (Optional)

For tighter integration with agents that support the Model Context Protocol:

```bash theme={null}
npx -y grab@latest add mcp
```

This enables your agent to automatically access React Grab context without manual copying.

## Verify Installation

To verify React Grab is working:

1. Open your browser's developer console
2. Look for the React Grab activation indicator when hovering over elements
3. Try pressing ⌘C/Ctrl+C on an element
4. Paste somewhere to see the captured context

<Warning>
  React Grab only runs in development mode (`NODE_ENV === "development"`). You won't see it in production builds.
</Warning>

## Troubleshooting

### Nothing happens when I press ⌘C/Ctrl+C

* Make sure you're hovering over an element first
* Check that your development server is running
* Verify React Grab was installed correctly by checking your layout/entry file

### The wrong component name is shown

* This can happen with HOCs or wrapper components
* Try selecting a child element for more specific context

### Installation failed

If automatic installation fails:

1. Check you're in the correct directory (project root)
2. Try running with `--force` flag: `npx -y grab@latest init --force`
3. See [Manual Installation](/installation#manual-installation) for framework-specific setup

## Next Steps

<CardGroup cols={2}>
  <Card title="Installation Guide" icon="book" href="/installation">
    Learn about manual installation and advanced configuration
  </Card>

  <Card title="Try the Demo" icon="play" href="https://react-grab.com">
    See React Grab in action on the official website
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.