# react-grab

> Select context for coding agents directly from your website

Latest version **0.2.0** (published 2026-08-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-grab
pnpm add react-grab
yarn add react-grab
bun add react-grab
```

Provides the command `react-grab`.

## Health

**Score 75/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2026-08-16 |
| First published | 2025-10-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 1013.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 7700 |
| Author | Aiden Bai |
| Maintainers | abai |
| Keywords | agent, context, grab, react, react-grab |

## Links

- npm: https://www.npmjs.com/package/react-grab
- Repository: https://github.com/aidenybai/react-grab
- Homepage: https://react-grab.com
- Issues: https://github.com/aidenybai/react-grab/issues
- npm.io page: https://npm.io/package/react-grab

## Dependencies (2)

- [bippy](https://npm.io/package/bippy.md) ^0.6.1
- [@react-grab/cli](https://npm.io/package/@react-grab/cli.md) 0.2.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.2.0 (latest) — 2026-08-16
- 0.2.0-dev.ea4bbec (dev) — 2026-08-22
- 0.1.0-beta.13 (beta) — 2026-02-02
- 0.2.0-dev.38d4995 — 2026-08-22
- 0.2.0-dev.e04c66e — 2026-08-22
- 0.2.0-dev.bc0c7d0 — 2026-08-19
- 0.2.0-dev.77b13f2 — 2026-08-16
- 0.2.0-dev.0afed86 — 2026-08-16
- 0.2.0-dev.23bce0e — 2026-08-16
- 0.1.50-dev.f8c2c71 — 2026-08-09
- 0.1.50-dev.b1a08ec — 2026-08-04
- 0.1.50-dev.cf9533f — 2026-08-03
- 0.1.50-dev.f350003 — 2026-08-02
- 0.1.50-dev.65db899 — 2026-08-01
- 0.1.50-dev.f4086d9 — 2026-07-31
- … 270 more at https://npm.io/package/react-grab/versions

## README

# <img src="https://github.com/aidenybai/react-grab/blob/main/.github/public/logo.png?raw=true" width="60" align="center" /> React Grab

[![version](https://img.shields.io/npm/v/react-grab?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/react-grab)
[![downloads](https://img.shields.io/npm/dt/react-grab.svg?style=flat&colorA=000000&colorB=000000)](https://npmjs.com/package/react-grab)

Copy any UI element for your agent.

React Grab points agents to the actual source behind each selection. Agents are [**2× faster**](https://react-grab.com/benchmarks) and more accurate when using React Grab.

[**Website →**](https://react-grab.com)

## Quick Start

Run this at your project root:

```bash
npx grab@latest init
```

## How It Works

React Grab turns a browser selection into source context your agent can use:

1. Hover any UI element in your app.
2. Press **⌘C** or **Ctrl+C**.
3. Paste the copied context into your agent.

The copied context includes the selected element and its component stack with source locations:

```txt
[<a class="ml-auto inline-block text-sm" href="#">Forgot your password?</a> in LoginForm (at components/login-form.tsx:46:19)]
```

## Manual Installation

If you cannot use the CLI, install React Grab manually for your framework:

#### Next.js (App router)

Add this inside your `app/layout.tsx`:

```jsx
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>
  );
}
```

#### 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 (
    <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>
  );
}
```

#### Vite

Add this at the top of your main entry file (e.g., `src/main.tsx`):

```tsx
if (import.meta.env.DEV) {
  import("react-grab");
}
```

#### 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");
}
```

## Build your own React Grab

Build a custom interface with the selection engine from `react-grab/primitives`. Use its APIs for hit testing, source context, page freezing, clipboard access, and editor navigation.

### Customize hit testing

Scope hit testing to a container or replace the default element filter with your own rules.

```typescript
import { getElementAtPoint, isElementGrabbable } from "react-grab/primitives";

export const getPickerTarget = (
  event: PointerEvent,
  appElement: Element,
  toolbarElement: Element,
): Element | null =>
  getElementAtPoint(event.clientX, event.clientY, {
    container: appElement,
    filter: (candidate) => isElementGrabbable(candidate) && !toolbarElement.contains(candidate),
  });
```

Add `data-react-grab-ignore` to your picker interface so hit testing skips its subtree.

## Resources & Contributing Back

Want to try it out? Check out [our demo](https://react-grab.com).

Looking to contribute back? Check out the [Contributing Guide](https://github.com/aidenybai/react-grab/blob/main/CONTRIBUTING.md).

Want to talk to the community? Hop in our [Discord](https://discord.com/invite/G7zxfUzkm7) and share your ideas and what you've built 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._

---
_Source: https://npm.io/package/react-grab · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._