react-grab

> 前端框架

开源

为您的代理复制任何 UI 元素

7.5K stars0 点赞0 次浏览

访问官网 GitHub

工具介绍

为您的代理复制任何 UI 元素

React Grab

Copy any UI element for your agent.

React Grab points agents to the actual source behind each selection. Agents are 2× faster and more accurate when using React Grab.

Website →

Quick Start

Run this at your project root:

bash

npx grab@latest init

How It Works

React Grab turns a browser selection into source context your agent can use:

Hover any UI element in your app.
Press ⌘C or Ctrl+C.
Paste the copied context into your agent.

The copied context includes the selected element and its component stack with source locations:

txt

[<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 cannot use the CLI, install React Grab manually for your framework:

Next.js (App router)

Add this inside your app/layout.tsx:

javascript

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:

javascript

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 at the top of your main entry file (e.g., src/main.tsx):

typescript

if (import.meta.env.DEV) {
  import("react-grab");
}

Webpack

First, install React Grab:

bash

npm install react-grab

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

typescript

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

Build your own React Grab

Build a custom interface with the selection engine from react-grab/primitives. Use its APIs for hit testing, source context, page freezing, clipboard access, and editor navigation.

Customize hit testing

Scope hit testing to a container or replace the default element filter with your own rules.

typescript

import { getElementAtPoint, isElementGrabbable } from "react-grab/primitives";

export const getPickerTarget = (
  event: PointerEvent,
  appElement: Element,
  toolbarElement: Element,
): Element | null =>
  getElementAtPoint(event.clientX, event.clientY, {
    container: appElement,
    filter: (candidate) => isElementGrabbable(candidate) && !toolbarElement.contains(candidate),
  });