Skip to content

aidenybai/react-grab

BranchesTags

Repository files navigation

React Grab

size version downloads

Select context for coding agents directly from your website

How? Point at any element and it'll send the file name, React component, and HTML source code.

It makes tools like Cursor, Claude Code, Copilot run up to 3× faster and more accurate.

Try out a demo! →

react-grab-demo.mp4

Install

Install using Cursor

Run this command to install React Grab into your project. Ensure you are running at project root (e.g. where the next.config.ts or vite.config.ts file is located).

npx grab@latest init

Manual Installation

If you're using a React framework or build tool, view instructions below:

Next.js (App router)

Add this inside of your app/layout.tsx:

import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html>
      <head>
        {/* put this in the <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>
  );
}

Next.js (Pages router)

Add this into your pages/_document.tsx:

import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html lang="en">
      <Head>
        {/* put this in the <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

Your index.html could look like this:

<!doctype html>
<html lang="en">
  <head>
    <script type="module">
      // first npm i react-grab
      // then in head:
      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>

Webpack

First, install React Grab:

npm install react-grab

Then add this at the top of your main entry file (e.g., src/index.tsx or src/main.tsx):

if (process.env.NODE_ENV === "development") {
  import("react-grab");
}

Coding agent integration

React Grab can send selected element context directly to your coding agent. This enables a workflow where you select a UI element and an agent automatically makes changes to your codebase.

This means no copying and pasting - just select the element and let the agent do the rest. Learn more →

Claude Code

Server Setup

The server runs on port 4567 and interfaces with the Claude Agent SDK. Add to your package.json:

{
  "scripts": {
    "dev": "npx @react-grab/claude-code@latest && next dev"
  }
}

Client Setup

<script src="//unpkg.com/react-grab/dist/index.global.js"></script>
<!-- add this in the <head> -->
<script src="//unpkg.com/@react-grab/claude-code/dist/client.global.js"></script>

Or using Next.js Script component in your 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"
              strategy="beforeInteractive"
            />
            <Script
              src="//unpkg.com/@react-grab/claude-code/dist/client.global.js"
              strategy="lazyOnload"
            />
          </>
        )}
      </head>
      <body>{children}</body>
    </html>
  );
}
Cursor CLI

You must have the cursor-agent CLI installed.

Server Setup

The server runs on port 5567 and interfaces with the cursor-agent CLI. Add to your package.json:

{
  "scripts": {
    "dev": "npx @react-grab/cursor@latest && next dev"
  }
}

Client Setup

<script src="//unpkg.com/react-grab/dist/index.global.js"></script>
<!-- add this in the <head> -->
<script src="//unpkg.com/@react-grab/cursor/dist/client.global.js"></script>

Or using Next.js Script component in your 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"
              strategy="beforeInteractive"
            />
            <Script
              src="//unpkg.com/@react-grab/cursor/dist/client.global.js"
              strategy="lazyOnload"
            />
          </>
        )}
      </head>
      <body>{children}</body>
    </html>
  );
}
OpenCode

Server Setup

The server runs on port 6567 and interfaces with the OpenCode CLI. Add to your package.json:

{
  "scripts": {
    "dev": "npx @react-grab/opencode@latest && next dev"
  }
}

Note: You must have OpenCode installed (npm i -g opencode-ai@latest).

Client Setup

<script src="//unpkg.com/react-grab/dist/index.global.js"></script>
<!-- add this in the <head> -->
<script src="//unpkg.com/@react-grab/opencode/dist/client.global.js"></script>

Or using Next.js Script component in your 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"
              strategy="beforeInteractive"
            />
            <Script
              src="//unpkg.com/@react-grab/opencode/dist/client.global.js"
              strategy="lazyOnload"
            />
          </>
        )}
      </head>
      <body>{children}</body>
    </html>
  );
}
Codex

Server Setup

The server runs on port 7567 and interfaces with the OpenAI Codex SDK. Add to your package.json:

{
  "scripts": {
    "dev": "npx @react-grab/codex@latest && next dev"
  }
}

Note: You must have Codex installed (npm i -g @openai/codex).

Client Setup

<script src="//unpkg.com/react-grab/dist/index.global.js"></script>
<!-- add this in the <head> -->
<script src="//unpkg.com/@react-grab/codex/dist/client.global.js"></script>

Or using Next.js Script component in your 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"
              strategy="beforeInteractive"
            />
            <Script
              src="//unpkg.com/@react-grab/codex/dist/client.global.js"
              strategy="lazyOnload"
            />
          </>
        )}
      </head>
      <body>{children}</body>
    </html>
  );
}
Gemini

Server Setup

The server runs on port 8567 and interfaces with the Gemini CLI. Add to your package.json:

{
  "scripts": {
    "dev": "npx @react-grab/gemini@latest && next dev"
  }
}

Note: You must have Gemini CLI installed.

Client Setup

<script src="//unpkg.com/react-grab/dist/index.global.js"></script>
<!-- add this in the <head> -->
<script src="//unpkg.com/@react-grab/gemini/dist/client.global.js"></script>

Or using Next.js Script component in your 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"
              strategy="beforeInteractive"
            />
            <Script
              src="//unpkg.com/@react-grab/gemini/dist/client.global.js"
              strategy="lazyOnload"
            />
          </>
        )}
      </head>
      <body>{children}</body>
    </html>
  );
}
Amp

Server Setup

The server runs on port 9567 and interfaces with the Amp SDK. Add to your package.json:

{
  "scripts": {
    "dev": "npx @react-grab/amp@latest && next dev"
  }
}

Note: You must have an Amp API key set via AMP_API_KEY environment variable.

Client Setup

<script src="//unpkg.com/react-grab/dist/index.global.js"></script>
<!-- add this in the <head> -->
<script src="//unpkg.com/@react-grab/amp/dist/client.global.js"></script>

Or using Next.js Script component in your 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"
              strategy="beforeInteractive"
            />
            <Script
              src="//unpkg.com/@react-grab/amp/dist/client.global.js"
              strategy="lazyOnload"
            />
          </>
        )}
      </head>
      <body>{children}</body>
    </html>
  );
}

Extending React Grab

React Grab provides an public customization API. Check out the type definitions to see all available options for extending React Grab.

import { init } from "react-grab/core";

const api = init({
  theme: {
    enabled: true, // disable all UI by setting to false
    hue: 180, // shift colors by 180 degrees (pink → cyan/turquoise)
    crosshair: {
      enabled: false, // disable crosshair
    },
    elementLabel: {
      enabled: false, // disable element label
    },
  },

  onElementSelect: (element) => {
    console.log("Selected:", element);
  },
  onCopySuccess: (elements, content) => {
    console.log("Copied to clipboard:", content);
  },
  onStateChange: (state) => {
    console.log("Active:", state.isActive);
  },
});

api.activate();
api.copyElement(document.querySelector(".my-element"));
console.log(api.getState());

Resources & Contributing Back

Want to try it out? Check the our demo.

Looking to contribute back? Check the Contributing Guide out.

Want to talk to the community? Hop in our Discord and share your ideas and what you've build with React Grab.

Find a bug? Head over to our issue tracker and we'll do our best to help. We love pull requests, too!

We expect all contributors to abide by the terms of our Code of Conduct.

→ Start contributing on GitHub

License

React Grab is MIT-licensed open-source software.

Thank you to Andrew Luetgers for donating the grab npm package name.

About

Select context for coding agents directly from your website

react-grab.com

Topics

react ai coding react-grab

Resources

Readme

License

MIT license

Contributing

Contributing
Activity

Stars

3.4k stars

Watchers

10 watching

Forks

145 forks
Report repository

Contributors 10

Languages