Copy any UI element for your agent.
React Grab points agents to the actual source behind each selection, so edits are 2× faster and more accurate.
Run this at your project root:
npx grab@latest initReact 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, source location, nearby code, and component stack:
<a class="ml-auto inline-block text-sm" href="#">
Forgot your password?
</a>
// components/login-form.tsx:46
45| <div className="flex items-center">
> 46| <a className="ml-auto inline-block text-sm" href="#">
47| Forgot your password?
48| </a>
in LoginForm (at components/login-form.tsx:46:19)If you cannot use the CLI, install React Grab manually for your framework:
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>
);
}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>
);
}Add this at the top of your main entry file (e.g., src/main.tsx):
if (import.meta.env.DEV) {
import("react-grab");
}First, install React Grab:
npm install react-grabThen 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");
}Use plugins to extend React Grab's built-in UI with context menu actions, toolbar menu items, lifecycle hooks, and theme overrides. Plugins run within React Grab.
Register a plugin using the registerPlugin and unregisterPlugin exports:
import { registerPlugin } from "react-grab";
registerPlugin({
name: "my-plugin",
hooks: {
onElementSelect: (element) => {
console.log("Selected:", element.tagName);
},
},
});In React, register inside a useEffect:
import { registerPlugin, unregisterPlugin } from "react-grab";
useEffect(() => {
registerPlugin({
name: "my-plugin",
actions: [
{
id: "my-action",
label: "My Action",
shortcut: "M",
onAction: (context) => {
console.log("Action on:", context.element);
context.hideContextMenu();
},
},
],
});
return () => 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(),
},
];See packages/react-grab/src/types.ts for the full Plugin, PluginHooks, and PluginConfig interfaces.
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.
React Grab is MIT-licensed open-source software.
Thank you to Andrew Luetgers for donating the grab npm package name.