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:
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:
[<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:
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 at the top of your main entry file (e.g., src/main.tsx):
if (import.meta.env.DEV) {
import("react-grab");
}
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");
}
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.
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),
});
Add data-react-grab-ignore to your picker interface so hit testing skips its subtree.
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 让你在运行中的 React 应用里把鼠标悬停在任意界面元素上，按下 Cmd+C 或 Ctrl+C，就能复制该元素精确的源代码位置和组件栈，然后直接粘贴到你的 AI 编程助手中作为上下文。