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 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 initOnce 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>
{/* 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>
);
}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>
);
}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>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");
}React Grab includes an MCP (Model Context Protocol) server that gives AI coding agents direct access to your browser. This enables agents to navigate, click, fill forms, and take screenshots.
Run during project init:
npx -y grab@latest init
# When prompted, choose to add the MCP serverOr add it separately:
npx -y grab@latest add mcp --client cursorSupported clients: cursor, claude-code, vscode, opencode, codex, gemini-cli, windsurf, zed, droid
Or add it manually to your mcp.json file:
{
"mcpServers": {
"react-grab-browser": {
"command": "npx",
"args": ["-y", "grab", "browser", "mcp"]
}
}
}Once configured, your agent has access to:
browser_snapshot- Get ARIA accessibility tree with element refs (e1, e2...)browser_execute- Run Playwright code with helpers likeref('e1').click()
For agents that support skills (like Codex), install the react-grab skill:
npx -y grab@latest add skill
# or
npx -y add-skill aidenybai/react-grabReact Grab uses a plugin system to extend functionality. Check out the type definitions to see all available options.
import { init } from "react-grab/core";
const api = init();
api.activate();
api.copyElement(document.querySelector(".my-element"));
console.log(api.getState());Track element selections with analytics:
api.registerPlugin({
name: "analytics",
hooks: {
onElementSelect: (element) => {
analytics.track("element_selected", { tagName: element.tagName });
},
onDragEnd: (elements, bounds) => {
analytics.track("drag_end", { count: elements.length, bounds });
},
onCopySuccess: (elements, content) => {
analytics.track("copy", { count: elements.length });
},
},
});Add custom actions to the right-click menu:
api.registerPlugin({
name: "custom-actions",
actions: [
{
id: "log-to-console",
label: "Log to Console",
onAction: ({ elements }) => console.dir(elements[0]),
},
],
});Customize the UI appearance:
api.registerPlugin({
name: "theme",
theme: {
hue: 180, // shift colors (pink → cyan)
crosshair: { enabled: false },
elementLabel: { enabled: false },
},
});Create a custom agent that processes selected elements:
api.registerPlugin({
name: "my-custom-agent",
actions: [
{
id: "custom-agent",
label: "Ask AI",
onAction: ({ enterPromptMode }) => enterPromptMode?.(),
agent: {
provider: {
async *send({ prompt, content }, signal) {
yield "Analyzing element...";
const response = await fetch("/api/ai", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ prompt, content }),
signal,
});
yield "Processing response...";
const result = await response.json();
yield `Done: ${result.message}`;
},
},
},
},
],
});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
React Grab is MIT-licensed open-source software.
Thank you to Andrew Luetgers for donating the grab npm package name.
![@cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=64&v=4){kind=small}
![@factory-droid[bot]](https://avatars.githubusercontent.com/in/358017?s=64&v=4){kind=small}
