# react-grab
**Repository Path**: mirrors_trending/react-grab
## Basic Information
- **Project Name**: react-grab
- **Description**: Grab any element on in your app and give it to Cursor, Claude Code, etc
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-11-14
- **Last Updated**: 2026-01-10
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# 
React Grab
[](https://bundlephobia.com/package/react-grab)
[](https://npmjs.com/package/react-grab)
[](https://npmjs.com/package/react-grab)
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**](https://react-grab.com/blog/intro) and more accurate.
### [Try out a demo! →](https://react-grab.com)
## Install
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).
```html
npx grab@latest init
```
## Usage
Once 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:
```js
Forgot your password?
in LoginForm at components/login-form.tsx:46:19
```
## Manual Installation
If you're using a React framework or build tool, view instructions below:
#### Next.js (App router)
Add this inside of your `app/layout.tsx`:
```jsx
import Script from "next/script";
export default function RootLayout({ children }) {
return (
{/* put this in the */}
{process.env.NODE_ENV === "development" && (
)}
{children}
);
}
```
#### Next.js (Pages router)
Add this into your `pages/_document.tsx`:
```jsx
import { Html, Head, Main, NextScript } from "next/document";
export default function Document() {
return (
{/* put this in the */}
{process.env.NODE_ENV === "development" && (
)}
);
}
```
#### Vite
Your `index.html` could look like this:
```html
```
#### Webpack
First, install React Grab:
```bash
npm install react-grab
```
Then add this at the top of your main entry file (e.g., `src/index.tsx` or `src/main.tsx`):
```tsx
if (process.env.NODE_ENV === "development") {
import("react-grab");
}
```
## Coding agent integration
React Grab can send selected element context directly to your coding agent. This enables a workflow where you select a UI element and an agent automatically makes changes to your codebase.
This means **no copying and pasting** - just select the element and let the agent do the rest. [Read more about coding agent integration →](https://react-grab.com/blog/agent)
> **Click to expand** setup instructions for your coding agent:
Claude Code
#### Server Setup
The server runs on port `4567` and interfaces with the Claude Agent SDK. Add to your `package.json`:
```json
{
"scripts": {
"dev": "npx @react-grab/claude-code@latest && next dev"
}
}
```
#### Client Setup
```html
```
Or using Next.js `Script` component in your `app/layout.tsx`:
```jsx
import Script from "next/script";
export default function RootLayout({ children }) {
return (
{process.env.NODE_ENV === "development" && (
<>
)}
{children}
);
}
```
Cursor CLI
You must have the [`cursor-agent` CLI](https://cursor.com/docs/cli/overview) installed.
#### Server Setup
The server runs on port `5567` and interfaces with the `cursor-agent` CLI. Add to your `package.json`:
```json
{
"scripts": {
"dev": "npx @react-grab/cursor@latest && next dev"
}
}
```
#### Client Setup
```html
```
Or using Next.js `Script` component in your `app/layout.tsx`:
```jsx
import Script from "next/script";
export default function RootLayout({ children }) {
return (
{process.env.NODE_ENV === "development" && (
<>
)}
{children}
);
}
```
OpenCode
#### Server Setup
The server runs on port `6567` and interfaces with the OpenCode CLI. Add to your `package.json`:
```json
{
"scripts": {
"dev": "npx @react-grab/opencode@latest && next dev"
}
}
```
> **Note:** You must have [OpenCode](https://opencode.ai) installed (`npm i -g opencode-ai@latest`).
#### Client Setup
```html
```
Or using Next.js `Script` component in your `app/layout.tsx`:
```jsx
import Script from "next/script";
export default function RootLayout({ children }) {
return (
{process.env.NODE_ENV === "development" && (
<>
)}
{children}
);
}
```
Codex
#### Server Setup
The server runs on port `7567` and interfaces with the OpenAI Codex SDK. Add to your `package.json`:
```json
{
"scripts": {
"dev": "npx @react-grab/codex@latest && next dev"
}
}
```
> **Note:** You must have [Codex](https://github.com/openai/codex) installed (`npm i -g @openai/codex`).
#### Client Setup
```html
```
Or using Next.js `Script` component in your `app/layout.tsx`:
```jsx
import Script from "next/script";
export default function RootLayout({ children }) {
return (
{process.env.NODE_ENV === "development" && (
<>
)}
{children}
);
}
```
Gemini
#### Server Setup
The server runs on port `8567` and interfaces with the Gemini CLI. Add to your `package.json`:
```json
{
"scripts": {
"dev": "npx @react-grab/gemini@latest && next dev"
}
}
```
> **Note:** You must have [Gemini CLI](https://github.com/google-gemini/gemini-cli) installed.
#### Client Setup
```html
```
Or using Next.js `Script` component in your `app/layout.tsx`:
```jsx
import Script from "next/script";
export default function RootLayout({ children }) {
return (
{process.env.NODE_ENV === "development" && (
<>
)}
{children}
);
}
```
Amp
#### Server Setup
The server runs on port `9567` and interfaces with the [Amp SDK](https://ampcode.com/manual/sdk). Add to your `package.json`:
```json
{
"scripts": {
"dev": "npx @react-grab/amp@latest && next dev"
}
}
```
> **Note:** You must have an [Amp API key](https://ampcode.com/settings) set via `AMP_API_KEY` environment variable.
#### Client Setup
```html
```
Or using Next.js `Script` component in your `app/layout.tsx`:
```jsx
import Script from "next/script";
export default function RootLayout({ children }) {
return (
{process.env.NODE_ENV === "development" && (
<>
)}
{children}
);
}
```
Factory Droid
#### Server Setup
The server runs on port `10567` and interfaces with the [Factory CLI](https://docs.factory.ai/cli/droid-exec/overview). Add to your `package.json`:
```json
{
"scripts": {
"dev": "npx @react-grab/droid@latest && next dev"
}
}
```
> **Note:** You must have [Factory CLI](https://app.factory.ai) installed (`curl -fsSL https://app.factory.ai/cli | sh`) and `FACTORY_API_KEY` environment variable set.
#### Client Setup
```html
```
Or using Next.js `Script` component in your `app/layout.tsx`:
```jsx
import Script from "next/script";
export default function RootLayout({ children }) {
return (
{process.env.NODE_ENV === "development" && (
<>
)}
{children}
);
}
```
## Extending React Grab
React Grab uses a plugin system to extend functionality. Check out the [type definitions](https://github.com/aidenybai/react-grab/blob/main/packages/react-grab/src/types.ts) to see all available options.
#### Basic Usage
```typescript
import { init } from "react-grab/core";
const api = init();
api.activate();
api.copyElement(document.querySelector(".my-element"));
console.log(api.getState());
```
#### Lifecycle Hooks Plugin
Track element selections with analytics:
```typescript
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 });
},
},
});
```
#### Context Menu Plugin
Add custom actions to the right-click menu:
```typescript
api.registerPlugin({
name: "custom-actions",
actions: [
{
id: "log-to-console",
label: "Log to Console",
onAction: ({ elements }) => console.dir(elements[0]),
},
],
});
```
#### Theme Plugin
Customize the UI appearance:
```typescript
api.registerPlugin({
name: "theme",
theme: {
hue: 180, // shift colors (pink → cyan)
crosshair: { enabled: false },
elementLabel: { enabled: false },
},
});
```
#### Agent Plugin
Create a custom agent that processes selected elements:
```typescript
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}`;
},
},
},
},
],
});
```
## Resources & Contributing Back
Want to try it out? Check the [our demo](https://react-grab.com).
Looking to contribute back? Check the [Contributing Guide](https://github.com/aidenybai/react-grab/blob/main/CONTRIBUTING.md) out.
Want to talk to the community? Hop in our [Discord](https://discord.com/invite/G7zxfUzkm7) and share your ideas and what you've build with React Grab.
Find a bug? Head over to our [issue tracker](https://github.com/aidenybai/react-grab/issues) 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](https://github.com/aidenybai/react-grab/blob/main/.github/CODE_OF_CONDUCT.md).
[**→ Start contributing on GitHub**](https://github.com/aidenybai/react-grab/blob/main/CONTRIBUTING.md)
### License
React Grab is MIT-licensed open-source software.
_Thank you to [Andrew Luetgers](https://github.com/andrewluetgers) for donating the `grab` npm package name._