Using React Grab to speed up AI-assisted coding
When you're using AI tools to help write code, the biggest problem usually isn't the AI itself. It's the context you give it. How many times have you asked an AI assistant to make a change, only to watch it struggle, search through the wrong files, or completely misunderstand what you wanted?
React Grab solves this problem for React applications. Created by Aiden Bai (who also built Million.js and React Scan), it lets you click on any element in your running React app and instantly copy its exact location in your source code. You can then paste this into any AI prompt, and the AI knows exactly where to look.
This article shows you what React Grab does, how it works under the hood, and why it makes working with AI so much faster and cheaper.
The problem with AI in existing codebases
When you ask an AI to change something in your codebase, it has to play detective. Think about a simple example: you have a button that says "count is 0" and you want to change it to "counter is 0". You might write: "Find the button that displays the count and change 'count' to 'counter'."
Here's what the AI has to do. First, it searches through all your files looking for .js, .jsx, .ts, or .tsx extensions. In a big project, that could be thousands of files. Then it searches inside those files for the word "count".
But "count" appears everywhere in code. There are variables called count, functions like setCount, comments about counting, and finally the actual UI text. The AI has to figure out which one you mean. After some trial and error, it makes its best guess.
This whole process burns through tokens. The AI needs to read multiple files just to figure out where your button is. More tokens means higher costs and slower responses.
With complex apps, it gets even worse. Try describing a deeply nested component with specific styling, and you'll write paragraphs. The AI still might not find it.
How React Grab provides AI with super-vision
React Grab changes the game. Instead of making the AI search, you just point to what you want. It's like giving the AI GPS coordinates instead of vague directions.
When you select an element with React Grab, it doesn't just copy the text. It grabs information from React's internal structure and creates a neat package of data that tells the AI exactly where that element lives in your code.
The anatomy of React Grab's metadata
The data goes to your clipboard in a format that's easy for AI to understand. It wraps everything in <selected_element> tags and includes two main things.
The HTML Frame shows what the element looks like in the browser, with its HTML tag, attributes, and text. This gives the AI a visual reference.
The Code Location is the important part. It tells the AI the exact file path, line number, and column number where this element is defined.
Here's what you get when you click on an h1 tag:
<selected_element>
## HTML Frame:
<h1>Vite + React</h1>
## Code Location:
at h1 in //localhost:5173/src/App.jsx
</selected_element>
With this info, the AI doesn't waste time searching. It opens src/App.jsx and makes the change. Faster, cheaper, and more accurate.
Installing React Grab
You can add React Grab with a simple script tag in your index.html:
<script src="//www.react-grab.com/script.js" crossorigin="anonymous"></script>
This works, but it's not the best way if you're using modern build tools like Vite or Next.js.
Development-only execution for safety
React Grab digs into React's internal APIs. These can change between versions, and you definitely don't want debugging tools running in production.
The safe way is to only load React Grab when you're developing. Here's how to do it in Vite or Create React App:
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";
// Only load react-grab in development
if (import.meta.env.DEV) {
import("react-grab");
}
ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
This if statement means React Grab only runs on your development server. When you build for production, Vite removes this code entirely through tree-shaking.
Using React Grab with simple components
Once it's installed and your dev server is running, press Command + C on Mac or Control + C on Windows/Linux. You'll see a purple crosshair, and elements turn purple when you hover over them.
Click any element, and it copies the metadata to your clipboard. Now you can paste it into your AI prompt.
Let's say you want to change that button text from "count" to "counter". Your prompt becomes:
Change the button text from "count" to "counter".
<selected_element>
## HTML Frame:
<button>count is 0</button>
## Code Location:
at button in //localhost:5173/src/App.jsx:22:7
at div in //localhost:5173/src/App.jsx:21:5
</selected_element>
The AI sees exactly where to go. It opens src/App.jsx, line 22, and makes the change. No searching, no guessing.
Handling complex UI with React Grab
Simple examples are nice, but React Grab becomes essential on real, messy projects. Imagine you need to reduce spacing between some platform icons on a game showcase card.
Without React Grab, you'd write something like: "On the showcase page, find the component that renders game cards. Inside each card, below the title and image, there's a row of icons for supported platforms. Find the CSS for the container and reduce the gap or margin between icons."
That's confusing and might not even work.
With React Grab, you just click on the icon container and write:
Decrease the spacing of these console icons.
<selected_element>
## HTML Frame:
<div class="styles-module__platforms___38M1t...">(10 elements)</div>
## Code Location:
at div (Server)
at div (Server)
...
</selected_element>
Done. And the cost drops by more than half (from around $0.06 to $0.02), because the AI doesn't need to read the entire page structure.
How React Grab taps into React's internals
React Grab uses a library called bippy (also by Aiden Bai) that taps into React's internals. Understanding this helps you use it safely.
The React Fiber architecture
Every React app has something called the Fiber architecture. A "fiber" is just a JavaScript object that holds information about a component: its props, state, and children. All these fibers connect in a tree that represents your entire app.
In development mode, React adds debug info to each fiber, including the source file, line number, and column where the component was written. But this Fiber tree is private. React doesn't promise it'll stay the same between versions, so directly accessing it is risky.
That's what bippy does. It hacks into these internals.
The DevTools disguise
Normally, web apps can't access React's fiber tree. But the React DevTools browser extension can. So bippy pretends to be DevTools. It hooks into the same global variables that DevTools uses.
Once connected, React Grab takes your clicked element, finds its fiber, walks up the tree to all its parents, reads the source locations from each one, and formats everything nicely.
The risks involved
Because this uses private, undocumented APIs, it's fragile. A React update could change how fibers work or how DevTools connects. That might break React Grab or, worse, cause weird bugs in your app.
This is why you must only run it in development. Never let it into your production build. The conditional import I showed earlier keeps you safe.
React Grab vs. modern AI tooling
You might think tools like Cursor's "Instant Grep" or Cognition's "SWE-grep" are getting so good at searching code that React Grab isn't needed anymore.
These tools are impressive, but they still search. React Grab points. Pointing is always faster than searching, no matter how smart the search is. It lets the AI focus on the actual task instead of finding the code.
The numbers prove it. Tests on the popular shadcn/ui dashboard show React Grab consistently uses fewer tokens, costs less, and runs faster than letting the AI search on its own.
Customizing React Grab behavior
React Grab has an init API that lets you customize how it works. You can change colors, disable features, or add your own logic:
import { init } from "react-grab/core";
const api = init({
theme: {
enabled: true,
hue: 180, // Change colors from pink to cyan
},
crosshair: {
enabled: false, // Turn off the crosshair
},
// Run custom code when someone selects an element
onElementSelect: (element) => {
console.log("Selected:", element);
},
onCopySuccess: (elements, content) => {
console.log("Copied to clipboard:", content);
// Maybe send this to an API or open your IDE
},
});
You could even build your own tools on top of this, like automatically opening the selected file in your editor.
Final thoughts
React Grab changes how you work with AI on React projects. Instead of writing long descriptions and hoping the AI finds the right code, you just click what you want and paste. The AI gets perfect context every time.
Yes, it uses React's private APIs, which means you need to be careful to only use it in development. But if you do that, the benefits are huge. You'll save time, save money on AI tokens, and get better results.
If you're using AI to build or maintain React apps, React Grab is one of those tools that quickly becomes essential. It's the difference between fumbling around in the dark and turning on the lights.
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.