Skip to main content

​
Quick Start

Get React Grab running in your project in under 2 minutes.
Make sure you’re in your project root directory (where next.config.ts or vite.config.ts is located) before running the installation command.

​
Installation

1

Run the initialization command

Open your terminal and run:
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
2

Start your development server

Start your development server as usual:
npm run dev
3

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:
<a class="ml-auto inline-block text-sm" href="#">
  Forgot your password?
</a>
in LoginForm at components/login-form.tsx:46:19
4

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.

​
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
The copied format is optimized for coding agents to understand context quickly and accurately.

​
Connect to MCP (Optional)

For tighter integration with agents that support the Model Context Protocol: 
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
React Grab only runs in development mode (NODE_ENV === "development"). You won’t see it in production builds.

​
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 for framework-specific setup

​
Next Steps

Installation Guide

Learn about manual installation and advanced configuration

Try the Demo

See React Grab in action on the official website

Build docs developers (and LLMs) love

Get started for freeTalk to us