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

# React Grab

> Select context for coding agents directly from your website

<div className="flex items-center gap-4 mb-8">
  <img src="https://media.brand.dev/038041ff-5ddd-470c-b496-37038fdce60a.png" alt="React Grab" className="w-16 h-16" />

  <div>
    <h1 className="text-4xl font-bold mb-2">React Grab</h1>
    <p className="text-xl text-gray-400">Select context for coding agents directly from your website</p>
  </div>
</div>

Point at any element and press **⌘C** (Mac) or **Ctrl+C** (Windows/Linux) to copy the file name, React component, and HTML source code. React Grab makes tools like Cursor, Claude Code, and Copilot run up to **3× faster** and more accurate.

## Get Started

Install React Grab in your project with a single command.

<CardGroup cols={2}>
  <Card title="Quick Start" icon="rocket" href="/quickstart">
    Get up and running in 2 minutes
  </Card>

  <Card title="Installation Guide" icon="download" href="/installation">
    Detailed installation instructions
  </Card>
</CardGroup>

## Key Features

<CardGroup cols={2}>
  <Card title="One-Keystroke Extraction" icon="keyboard">
    Press Cmd+C or Ctrl+C while hovering to instantly copy element context with file paths and component names
  </Card>

  <Card title="Visual Overlay System" icon="eye">
    Selection box, drag selection, and crosshair for precise element targeting
  </Card>

  <Card title="AI Agent Integration" icon="robot">
    Built-in support for Cursor, Claude Code, Copilot, and OpenCode with streaming responses
  </Card>

  <Card title="Plugin System" icon="puzzle-piece">
    Extend functionality with custom actions, lifecycle hooks, and agent providers
  </Card>

  <Card title="MCP Server Support" icon="server">
    Model Context Protocol integration for seamless AI workflows
  </Card>

  <Card title="Automatic Detection" icon="magnifying-glass">
    React Fiber debugging and source mapping for accurate component identification
  </Card>
</CardGroup>

## Framework Support

React Grab works with all major React frameworks and build tools.

<CardGroup cols={3}>
  <Card title="Next.js" icon="N" href="/guides/nextjs">
    App Router and Pages Router
  </Card>

  <Card title="Vite" icon="bolt" href="/guides/vite">
    Fast modern build tool
  </Card>

  <Card title="Webpack" icon="cube" href="/guides/webpack">
    Traditional bundler setup
  </Card>
</CardGroup>

## Integrations

Connect React Grab with your favorite coding tools.

<CardGroup cols={2}>
  <Card title="MCP Server" icon="server" href="/integrations/mcp">
    Model Context Protocol integration
  </Card>

  <Card title="Cursor" icon="arrow-pointer" href="/integrations/cursor">
    AI-first code editor
  </Card>

  <Card title="Claude Code" icon="message-code" href="/integrations/claude-code">
    Anthropic's Claude integration
  </Card>

  <Card title="GitHub Copilot" icon="github" href="/integrations/copilot">
    GitHub's AI pair programmer
  </Card>
</CardGroup>

## Community

<CardGroup cols={2}>
  <Card title="GitHub Repository" icon="github" href="https://github.com/aidenybai/react-grab">
    View source code and contribute
  </Card>

  <Card title="Discord Community" icon="discord" href="https://discord.com/invite/G7zxfUzkm7">
    Join the discussion
  </Card>
</CardGroup>


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