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.
Run this command at your project root (where next.config.ts or vite.config.ts is located):
npx -y grab@latest initnpx -y grab@latest add mcpOnce 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:19If you're using a React framework or build tool, view instructions below:
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>
);
}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 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>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.
Use primitives to build your own element selector from scratch. Unlike plugins, primitives are standalone utility functions that don't depend on React Grab being initialized.
If you're using primitives to build a custom UI and don't want the default React Grab overlay, disable auto-initialization before importing react-grab:
<script>
window.__REACT_GRAB_DISABLED__ = true;
</script>Here's a simple example of how to build your own element selector with hover highlight and one-click inspection:
npm install react-grab@latestimport { useState } from "react";
import {
getElementContext,
freeze,
unfreeze,
openFile,
type ReactGrabElementContext,
} from "react-grab/primitives";
const useElementSelector = (
onSelect: (context: ReactGrabElementContext) => void,
) => {
const [isActive, setIsActive] = useState(false);
const startSelecting = () => {
setIsActive(true);
const highlightOverlay = document.createElement("div");
Object.assign(highlightOverlay.style, {
position: "fixed",
pointerEvents: "none",
zIndex: "999999",
border: "2px solid #3b82f6",
transition: "all 75ms ease-out",
display: "none",
});
document.body.appendChild(highlightOverlay);
const handleMouseMove = ({ clientX, clientY }: MouseEvent) => {
highlightOverlay.style.display = "none";
const target = document.elementFromPoint(clientX, clientY);
if (!target) return;
const { top, left, width, height } = target.getBoundingClientRect();
Object.assign(highlightOverlay.style, {
top: `${top}px`,
left: `${left}px`,
width: `${width}px`,
height: `${height}px`,
display: "block",
});
};
const handleClick = async ({ clientX, clientY }: MouseEvent) => {
highlightOverlay.style.display = "none";
const target = document.elementFromPoint(clientX, clientY);
teardown();
if (!target) return;
freeze();
onSelect(await getElementContext(target));
unfreeze();
};
const teardown = () => {
document.removeEventListener("mousemove", handleMouseMove);
document.removeEventListener("click", handleClick, true);
highlightOverlay.remove();
setIsActive(false);
};
document.addEventListener("mousemove", handleMouseMove);
document.addEventListener("click", handleClick, true);
};
return { isActive, startSelecting };
};
const ElementSelector = () => {
const [context, setContext] = useState<ReactGrabElementContext | null>(null);
const selector = useElementSelector(setContext);
return (
<div>
<button onClick={selector.startSelecting} disabled={selector.isActive}>
{selector.isActive ? "Selecting…" : "Select Element"}
</button>
{context && (
<div>
<p>Component: {context.componentName}</p>
<p>Selector: {context.selector}</p>
<pre>{context.stackString}</pre>
<button
onClick={() => {
const frame = context.stack[0];
if (frame?.fileName) openFile(frame.fileName, frame.lineNumber);
}}
>
Open in Editor
</button>
</div>
)}
</div>
);
};See packages/react-grab/src/primitives.ts for the full ReactGrabElementContext, getElementContext, freeze, unfreeze, and openFile primitives.
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
React Grab is MIT-licensed open-source software.
Thank you to Andrew Luetgers for donating the grab npm package name.