@gicm/react-grab
v1.0.0
Published
Click any element, copy context for AI coding agents. Works with Claude Code, Cursor, Copilot.
Maintainers
kermit247Readme
@gicm/react-grab
Click any element in your React app, copy context for AI coding agents.
Works with: Claude Code, Cursor, Copilot, Windsurf, Zed, and more.
Why?
Without context, AI coding agents waste time searching your codebase. React Grab gives them the exact file:line location instantly.
- 55% faster Claude Code task completion
- One click to copy element context
- Exact location - file, line, column
- Zero config - just add script tag
Quick Start
Next.js (App Router)
// 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/@gicm/react-grab"
data-auto-init
strategy="beforeInteractive"
/>
)}
</head>
<body>{children}</body>
</html>
);
}Vite
<!-- index.html -->
<head>
<script type="module">
if (import.meta.env.DEV) {
import("@gicm/react-grab").then(({ init }) => init());
}
</script>
</head>CDN
<script src="//unpkg.com/@gicm/react-grab" data-auto-init></script>Usage
- Hold ⌘/Ctrl + C
- Click any element
- Paste into Claude Code / Cursor
That's it! The element's context (HTML, classes, React component stack with file:line) is copied to your clipboard.
What Gets Copied
<selected_element>
<button class="px-4 py-2 bg-blue-500 text-white rounded">
Sign In
</button>
at Button in components/ui/button.tsx:23:5
at div in components/auth/login-form.tsx:45:9
at LoginForm in components/auth/login-form.tsx:12:3
at AuthPage in app/auth/page.tsx:8:5
</selected_element>Configuration
import { init } from "@gicm/react-grab";
const grab = init({
// Keyboard shortcut (default: 'c')
shortcutKey: "c",
// Theme
theme: {
enabled: true,
hue: 280, // Purple (try 200 for blue, 150 for green)
},
// gICM API for component suggestions (optional)
gicmApiUrl: "http://localhost:8000",
showSuggestions: true,
// Callbacks
onSelect: (context) => console.log("Selected:", context),
onCopy: (context, text) => console.log("Copied:", text),
});
// Later: cleanup
grab.destroy();API
const grab = init(config);
grab.activate(); // Manually activate grab mode
grab.deactivate(); // Deactivate
grab.grab(element); // Get context for element
grab.copy(element); // Copy element to clipboard
grab.getState(); // Get current state
grab.configure({}); // Update config
grab.destroy(); // CleanupWith gICM Suggestions
If you have the gICM Context Engine running, React Grab can show matching component suggestions:
<script
src="//unpkg.com/@gicm/react-grab"
data-auto-init
data-gicm-api="http://localhost:8000"
></script>Requirements
- React 16.8+ (with development mode for file:line info)
- Modern browser with ES2020 support
License
MIT