Skip to main content
The Claude Code integration enables React Grab to communicate with the Claude Agent SDK, allowing you to make UI changes through natural language using Claude’s powerful AI capabilities.

​
Installation

1

Install the package

npm install @react-grab/claude-code
# or
pnpm add @react-grab/claude-code
# or
bun add @react-grab/claude-code
# or
yarn add @react-grab/claude-code
2

Start the server

The server runs on port 4567 by default.

​
Quick Start (CLI)

Start the server in the background before running your dev server:
npx @react-grab/claude-code@latest && pnpm run dev
The server will run as a detached background process. Stopping your dev server (Ctrl+C) won’t stop the React Grab server.
To stop it:
pkill -f "react-grab.*server"
3

Add the client to your app

Choose your framework:

​
Script Tag

<script src="//unpkg.com/react-grab/dist/index.global.js"></script>
<script src="//unpkg.com/@react-grab/claude-code/dist/client.global.js"></script>

​
Next.js

Using the Script component in your 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/react-grab/dist/index.global.js"
              strategy="beforeInteractive"
            />
            <Script
              src="//unpkg.com/@react-grab/claude-code/dist/client.global.js"
              strategy="lazyOnload"
            />
          </>
        )}
      </head>
      <body>{children}</body>
    </html>
  );
}

​
ES Module

import { attachAgent } from "@react-grab/claude-code/client";

attachAgent();
For better lifecycle management, start the server from your config file. This ensures the server stops when your dev server stops:

​
Vite

// vite.config.ts
import { startServer } from "@react-grab/claude-code/server";

if (process.env.NODE_ENV === "development") {
  startServer();
}

​
Next.js

// next.config.ts
import { startServer } from "@react-grab/claude-code/server";

if (process.env.NODE_ENV === "development") {
  startServer();
}

​
How It Works

┌─────────────────┐      HTTP       ┌─────────────────┐      SDK       ┌─────────────────┐
│                 │  localhost:4567 │                 │                │                 │
│   React Grab    │ ──────────────► │     Server      │ ─────────────► │   Claude Code   │
│    (Browser)    │ ◄────────────── │   (Node.js)     │ ◄───────────── │     (Agent)     │
│                 │       SSE       │                 │                │                 │
└─────────────────┘                 └─────────────────┘                └─────────────────┘
      Client                              Server                            Agent
  1. React Grab sends the selected element context to the server via HTTP POST
  2. Server receives the request and forwards it to Claude Code via the Agent SDK
  3. Claude Code processes the request and streams responses back
  4. Server relays status updates to the client via Server-Sent Events (SSE)

​
Usage

Once installed, you can:
  1. Select an element in your browser by hovering over it with React Grab active
  2. Right-click or use the context menu to choose “Edit with Claude Code”
  3. Enter your prompt describing what you want to change
  4. Watch as Claude Code makes the changes in real-time
The integration automatically provides:
  • The selected element’s HTML structure
  • Component name and file location
  • Line numbers for precise targeting
  • Full context for accurate modifications

​
Example Workflow

1

Select the element

Hover over any UI element in your browser and press Cmd+C (Mac) or Ctrl+C (Windows/Linux).
2

Trigger Claude Code

Right-click and choose “Edit with Claude Code” from the context menu.
3

Describe your change

Enter a prompt like:
Add a loading spinner to this button when it's clicked
4

Review the changes

Claude Code will modify the component file intelligently, and you’ll see the changes in your browser.

​
Advanced Configuration

You can customize the Claude Code provider: 
import { createClaudeCodeAgentProvider } from "@react-grab/claude-code/client";

const provider = createClaudeCodeAgentProvider({
  serverUrl: "http://localhost:4567",
  // Add custom configuration here
});

​
Why Use Claude Code with React Grab?

Claude Code excels at:
  • Understanding context: Claude can understand complex UI patterns and relationships
  • Making intelligent changes: Goes beyond simple edits to suggest architectural improvements
  • Following best practices: Applies React and TypeScript best practices automatically
  • Handling edge cases: Considers accessibility, responsiveness, and error states

​
Troubleshooting

  • Check if port 4567 is already in use
  • Try killing existing processes: pkill -f "react-grab.*server"
  • Ensure you have the Claude Agent SDK configured
  • Verify the Claude Agent SDK is properly installed
  • Check server logs for API errors
  • Ensure you have valid API credentials
  • Verify the client script is loaded in your browser
  • Check browser console for connection errors
  • Ensure the server is running before loading your app
  • Check that your files are writable
  • Verify Claude Code has permissions to modify files
  • Look for error messages in the server logs

​
Performance Benefits

Using React Grab with Claude Code can make your development workflow up to 3× faster by:
  • Providing precise element context without manual file searching
  • Reducing the need for follow-up questions from the AI
  • Enabling direct, targeted modifications instead of broad refactoring
  • Including file paths and line numbers for instant navigation

​
Next Steps

Quick Start

Get started with React Grab

Plugin API

Learn about the plugin system

Build docs developers (and LLMs) love

Get started for freeTalk to us