The Evolution

Six months ago, Claude Code did everything. Architecture decisions, UI fixes, debugging, research. One model, one context, one workflow.

It worked, but inefficiently. Claude’s bias for action meant jumping to implementation when I needed strategic thinking. Its lack of visual understanding meant describing UI issues in text. Every task got the same treatment regardless of what it actually needed.

So I started specializing. Codex for architecture when I needed a senior engineer’s perspective. Chrome DevTools MCP when I needed to inspect live elements. Claude stayed focused on implementation.

But there was still a gap.

The Missing Piece

When I tell Claude to “fix the spacing on this button,” it greps for classNames, reads 3-4 files, and makes educated guesses about structure. The translation from “that button” to “line 47 in src/components/Header.tsx” is lossy.

React Grab closes that loop.

Get React Grab

react-grab.com | GitHub

What React Grab Does

Hold Cmd+C, click any element in your React app. React Grab captures:

  • Component hierarchy (which components wrap this element)
  • Source locations (file paths and line numbers)
  • Props and state hints
  • Sibling context

Paste that into Claude Code, and suddenly “fix this button” becomes “fix the Button component at src/components/Header.tsx:47 with these props.”

How it works

React Grab uses bippy to hook into React’s internal fiber tree by pretending to be React DevTools. When you click, it walks up the component tree collecting display names and source locations. No build step required.

The benchmarks are striking:

  • 55% faster agent completion (17.4s → 7.6s average)
  • 89% fewer tool calls (4.4 → 0.5 average)
  • 47% lower cost ($0.04 → $0.02 average)

One test case: editing a table cell went from 32 seconds to 9 seconds. The agent knew exactly where to look.

The Pattern Emerging

The workflow that’s emerged:

  • React Grab: Extract UI context (element hierarchy, source locations)
  • Chrome DevTools MCP: Inspect live elements and debug (disabled until needed)
  • Codex: Architecture decisions (trade-offs, strategic planning)
  • Nano Banana Pro → Gemini: Generate concept art, convert to UI code
  • Claude Code: Orchestrate and implement

Each tool does one thing well. None do everything. Claude coordinates.

By default coding agents cannot access elements on your page. React Grab fixes this: just point and click to provide context.

— Aiden Bai, React Grab creator

The Nano Banana Pro → Gemini pipeline is worth highlighting: generate concept art, then feed it to Gemini to convert into React components. Concept to code without designing in Figma.

When to specialize

Add specialized tools when you notice a pattern: “I keep doing X and it’s inefficient.” React Grab solved my “Claude can’t find the right component” problem. Don’t add tools preemptively.

Limitations

  • React only: Hooks into React’s fiber tree. Vue, Svelte, vanilla JS need different solutions.
  • Development only: Only loads in dev mode by design.
  • Context, not analysis: Tells Claude where things are, not what’s wrong. You still describe the problem.

Try It Yourself

1. Install React Grab

Add to your React app (Next.js example):

// app/layout.tsx
import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script
          src="//unpkg.com/react-grab/dist/index.global.js"
          data-enabled="true"
        />
      </body>
    </html>
  )
}

2. Use It

  1. Run your dev server
  2. Hold Cmd+C and click any element
  3. Paste the captured context into Claude Code
  4. Watch Claude navigate directly to the right file and line

That’s it. No MCP server. No slash command. Just extraction.

What’s Next

The bottleneck in AI-assisted development isn’t capability. It’s communication. Every tool that closes a communication gap makes the whole workflow faster.

What’s next? More specialization, not less. Tools that do one thing extremely well, composed into workflows that handle complex tasks. The “one model to rule them all” era is ending.

Related Posts