Test This In Your Stack

One command inClean rollbackLow commitment

SandboxedInstalls to ~/.claude — isolated from your projects. One command to remove.

Fastest way to find out if react-grab belongs in your setup.

Copy the install command, run a real test, and back it out cleanly if it slows you down.

Try now

git clone https://github.com/aidenybai/react-grab ~/.claude/agents/react-grab

Run this first. You will know quickly if the workflow earns a permanent slot.

Back out

rm -rf ~/.claude/agents/react-grab

No messy cleanup loop. If it misses, remove it and keep moving.

Install Location

~/  └─ .claude/      ├─ commands/      ├─ agents/      │   └─ react-grab/ ← installs here      └─ settings.json

README

React Grab

Select context for coding agents directly from your website

How? Point at any element and press ⌘C (Mac) or Ctrl+C (Windows/Linux) to copy 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! →

Install

Run this command at your project root (where next.config.ts or vite.config.ts is located):

npx -y grab@latest init

Connect to MCP

npx -y grab@latest add mcp

Usage

Once installed, hover over any UI element in your browser and press:

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

This copies the element's context (file name, React component, and HTML source code) to your clipboard ready to paste into your coding agent. For example:

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

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>
        {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>
        {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

Add this to your index.html:

<!doctype html>
<html lang="en">
  <head>
    <script type="module">
      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");
}

Plugins

React Grab can be extended with plugins. A plugin can add context menu actions, toolbar menu items, lifecycle hooks, and theme overrides.

window.__REACT_GRAB__.registerPlugin({
  name: "my-plugin",
  hooks: {
    onElementSelect: (element) => {
      console.log("Selected:", element.tagName);
    },
  },
});

In React, register inside a useEffect after React Grab loads:

useEffect(() => {
  const api = window.__REACT_GRAB__;
  if (!api) return;

  api.registerPlugin({
    name: "my-plugin",
    actions: [
      {
        id: "my-action",
        label: "My Action",
        shortcut: "M",
        onAction: (context) => {
          console.log("Action on:", context.element);
          context.hideContextMenu();
        },
      },
    ],
  });

  return () => api.unregisterPlugin("my-plugin");
}, []);

Actions use a target field to control where they appear. Omit target (or set "context-menu") for the right-click menu, or set "toolbar" for the toolbar dropdown:

actions: [
  {
    id: "inspect",
    label: "Inspect",
    shortcut: "I",
    onAction: (ctx) => console.dir(ctx.element),
  },
  {
    id: "toggle-freeze",
    label: "Freeze",
    target: "toolbar",
    isActive: () => isFrozen,
    onAction: () => toggleFreeze(),
  },
];

A plugin can provide any combination of:

actions — context menu and/or toolbar items in a single array (use target: "toolbar" for toolbar items)
hooks — lifecycle callbacks like onActivate, onElementSelect, onCopySuccess, transformCopyContent, etc. (see PluginHooks)
theme — partial theme overrides (see Theme)
options — override default options like activationMode or keyHoldDuration
setup(api) — a function that receives the full ReactGrabAPI and can return additional config or a cleanup function

See packages/react-grab/src/types.ts for the full Plugin, PluginHooks, and PluginConfig interfaces.

Resources & Contributing Back

Want to try it out? Check out our demo.

Looking to contribute back? Check out the Contributing Guide.

Want to talk to the community? Hop in our Discord and share your ideas and what you've built 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.

Test This In Your Stack

One command inClean rollbackLow commitment

SandboxedInstalls to ~/.claude — isolated from your projects. One command to remove.

Fastest way to find out if react-grab belongs in your setup.

Copy the install command, run a real test, and back it out cleanly if it slows you down.

Try now

git clone https://github.com/aidenybai/react-grab ~/.claude/agents/react-grab

Run this first. You will know quickly if the workflow earns a permanent slot.

Back out

rm -rf ~/.claude/agents/react-grab

No messy cleanup loop. If it misses, remove it and keep moving.

Install Location

~/  └─ .claude/      ├─ commands/      ├─ agents/      │   └─ react-grab/ ← installs here      └─ settings.json

README

React Grab

Select context for coding agents directly from your website

How? Point at any element and press ⌘C (Mac) or Ctrl+C (Windows/Linux) to copy 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! →

Install

Run this command at your project root (where next.config.ts or vite.config.ts is located):

npx -y grab@latest init

Connect to MCP

npx -y grab@latest add mcp

Usage

Once installed, hover over any UI element in your browser and press:

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

This copies the element's context (file name, React component, and HTML source code) to your clipboard ready to paste into your coding agent. For example:

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

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>
        {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>
        {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

Add this to your index.html:

<!doctype html>
<html lang="en">
  <head>
    <script type="module">
      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");
}

Plugins

React Grab can be extended with plugins. A plugin can add context menu actions, toolbar menu items, lifecycle hooks, and theme overrides.

window.__REACT_GRAB__.registerPlugin({
  name: "my-plugin",
  hooks: {
    onElementSelect: (element) => {
      console.log("Selected:", element.tagName);
    },
  },
});

In React, register inside a useEffect after React Grab loads:

useEffect(() => {
  const api = window.__REACT_GRAB__;
  if (!api) return;

  api.registerPlugin({
    name: "my-plugin",
    actions: [
      {
        id: "my-action",
        label: "My Action",
        shortcut: "M",
        onAction: (context) => {
          console.log("Action on:", context.element);
          context.hideContextMenu();
        },
      },
    ],
  });

  return () => api.unregisterPlugin("my-plugin");
}, []);

Actions use a target field to control where they appear. Omit target (or set "context-menu") for the right-click menu, or set "toolbar" for the toolbar dropdown:

actions: [
  {
    id: "inspect",
    label: "Inspect",
    shortcut: "I",
    onAction: (ctx) => console.dir(ctx.element),
  },
  {
    id: "toggle-freeze",
    label: "Freeze",
    target: "toolbar",
    isActive: () => isFrozen,
    onAction: () => toggleFreeze(),
  },
];

A plugin can provide any combination of:

actions — context menu and/or toolbar items in a single array (use target: "toolbar" for toolbar items)
hooks — lifecycle callbacks like onActivate, onElementSelect, onCopySuccess, transformCopyContent, etc. (see PluginHooks)
theme — partial theme overrides (see Theme)
options — override default options like activationMode or keyHoldDuration
setup(api) — a function that receives the full ReactGrabAPI and can return additional config or a cleanup function

See packages/react-grab/src/types.ts for the full Plugin, PluginHooks, and PluginConfig interfaces.

Resources & Contributing Back

Want to try it out? Check out our demo.

Looking to contribute back? Check out the Contributing Guide.

Want to talk to the community? Hop in our Discord and share your ideas and what you've built 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.

react-grab

What You Are Adopting

Test This In Your Stack

About

README

React Grab

Try out a demo! →

Install

Connect to MCP

Usage

Manual Installation

Next.js (App router)

Next.js (Pages router)

Vite

Webpack

Plugins

Resources & Contributing Back

License

Tech Stack

Reviews0

auto_awesomeYour strongest next moves after react-grab

react-grab

What You Are Adopting

Test This In Your Stack

About

README

React Grab

Try out a demo! →

Install

Connect to MCP

Usage

Manual Installation

Next.js (App router)

Next.js (Pages router)

Vite

Webpack

Plugins

Resources & Contributing Back

License

Tech Stack

Reviews0

auto_awesomeYour strongest next moves after react-grab