@houkanshan/react-grab-patch

v0.1.13

Published

15 days ago

Select context for coding agents directly from your website

0High
0Medium
0Low

houkanshan

agent context grab react react-grab

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! →

React Grab Demo

Install

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 -y grab@latest init

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>
        {/* 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");
}

Extending React Grab

React Grab exposes the __REACT_GRAB__ API for extending functionality with plugins, hooks, actions, themes, and custom agents.

See packages/react-grab/src/types.ts and packages/react-grab/src/core/plugin-registry.ts for reference.

Or copy this into an agent to generate a plugin:

Clone https://github.com/aidenybai/react-grab into /tmp

Check these files for reference:

- packages/react-grab/src/types.ts (Plugin and PluginHooks interfaces)
- packages/react-grab/src/core/plugin-registry.ts (implementation)

Plugins are registered via `__REACT_GRAB__.registerPlugin({ name, hooks, actions, theme })`.

Add the code in client-side code (e.g., "use client" in Next.js) inside a useEffect after React Grab loads.

Generate an example plugin that logs when an element is selected.

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.