react-grab — Browser Element Context for AI Agents
Keyword: react-grab · grab · element context · copy component to ai
Point at any UI element in your browser, press Cmd/Ctrl+C, and instantly copy its React
component name, source file path, and HTML markup to clipboard — ready for your AI coding agent.
When to use this skill
- Set up react-grab in a React project (Next.js, Vite, Webpack) for AI-assisted development
- Point at UI elements and copy precise component context to Claude Code / Cursor / Copilot / Gemini
- Add react-grab MCP server so your AI agent can receive element context programmatically
- Configure react-grab with a custom plugin for project-specific workflows (Jira, Figma, etc.)
- Use the programmatic API (
getElementContext, freeze) for automation or test tooling
- Remove react-grab from a project or a specific agent integration
Instructions
- Run
bash scripts/install.sh (or npx -y grab@latest init) to install react-grab in your project
- Start your dev server — react-grab is dev-only and never ships to production
- Open your app in a browser, hover over any element, and press Cmd+C (Mac) / Ctrl+C (Win)
- Paste the clipboard content into your AI coding agent (Claude Code / Cursor / Copilot / Gemini)
- Optionally run
bash scripts/add-agent.sh mcp to enable MCP tool access for programmatic use
For detailed API and framework-specific setup, see references/api.md.
Examples
Copy element context to Claude Code
# 1. Start your app
npm run dev
# 2. Hover over a button in the browser
# 3. Press Cmd+C (Mac) or Ctrl+C (Win/Linux)
# Clipboard now contains:
#
# in LoginForm at components/login-form.tsx:46:19
#
# <button class="btn-primary" type="submit">
# Log in
# </button>
# 4. Paste into Claude Code — it knows exactly where the component lives
Set up MCP integration
npx -y grab@latest add mcp
Add custom plugin action
import { registerPlugin } from "react-grab";
registerPlugin({
name: "open-in-figma",
actions: [{
id: "figma",
label: "Find in Figma",
shortcut: "F",
onAction: (ctx) => {
window.open(`figma://search?q=${ctx.componentName}`);
},
}],
});
Quick Start
npx -y grab@latest init
npx -y grab@latest add mcp
npx -y grab@latest add claude-code
After installation, hover over any element in your browser during development and press:
- Mac:
Cmd+C
- Windows/Linux:
Ctrl+C
Output copied to clipboard:
in LoginForm at components/login-form.tsx:46:19
<a class="ml-auto text-sm underline-offset-4 hover:underline">
Forgot your password?
</a>
Paste directly into your AI coding agent prompt — no file searching needed.
Installation
Auto-detect (Recommended)
npx -y grab@latest init
Detects your framework (Next.js App Router / Pages Router / Vite / TanStack Start / Webpack)
and package manager (npm / yarn / pnpm / bun) automatically.
Manual installation by framework
Next.js App Router (app/layout.tsx):
import Script from 'next/script'
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
{process.env.NODE_ENV === "development" && (
<Script
src="//unpkg.com/react-grab/dist/index.global.js"
crossOrigin="anonymous"
strategy="beforeInteractive"
/>
)}
</body>
</html>
)
}
Next.js Pages Router (pages/_document.tsx):
import Script from 'next/script'
{process.env.NODE_ENV === "development" && (
<Script
src="//unpkg.com/react-grab/dist/index.global.js"
crossOrigin="anonymous"
strategy="beforeInteractive"
/>
)}
Vite (index.html):
<script type="module">
if (import.meta.env.DEV) {
await import('//unpkg.com/react-grab/dist/index.global.js');
}
</script>
Webpack (entry file):
if (process.env.NODE_ENV === 'development') {
import('react-grab');
}
Package install (for programmatic use):
npm install react-grab
Install react-grab via skill scripts
bash scripts/install.sh
bash scripts/install.sh --framework next-app
bash scripts/add-agent.sh claude-code
bash scripts/add-agent.sh cursor
bash scripts/add-agent.sh mcp
Core Usage
Keyboard shortcut
In development mode:
- Hover over any React element in the browser
- Press Cmd+C (Mac) or Ctrl+C (Windows/Linux)
- The context is copied to clipboard
Output format:
in <ComponentName> at <file-path>:<line>:<col>
<element-html>
Floating toolbar
A draggable toolbar appears in the corner of your browser when react-grab is active:
- Click to toggle activation on/off
- Drag to any screen edge
- Collapse when not needed
Multi-element selection (drag)
Click and drag across multiple elements to capture all their contexts at once. Each element's
component stack and HTML is included in the clipboard output.
Programmatic API
import { getGlobalApi } from "react-grab";
const api = getGlobalApi();
api.activate();
api.deactivate();
api.toggle();
await api.copyElement(document.querySelector('.my-button'));
const source = await api.getSource(element);
console.log(source.filePath);
console.log(source.lineNumber);
console
