Skip to main content
The GitHub Copilot integration enables React Grab to communicate with the Copilot CLI, allowing you to make targeted UI changes through natural language powered by GitHub’s AI.

​
Prerequisites

You must have the GitHub Copilot CLI installed to use this integration.
Install GitHub Copilot CLI: 
npm install -g @github/copilot-cli

​
Installation

1

Install the package

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

Start the server

The server runs on the default relay port.

​
Quick Start (CLI)

Start the server in the background before running your dev server:
npx @react-grab/copilot@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/copilot/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/copilot/dist/client.global.js"
              strategy="lazyOnload"
            />
          </>
        )}
      </head>
      <body>{children}</body>
    </html>
  );
}

​
ES Module

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

attachAgent();
For better lifecycle management, start the server from your config file:

​
Vite

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

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

​
Next.js

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

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

​
How It Works

┌─────────────────┐      HTTP       ┌─────────────────┐      CLI       ┌─────────────────┐
│                 │                 │                 │                │                 │
│   React Grab    │ ──────────────► │     Server      │ ─────────────► │  Copilot CLI    │
│    (Browser)    │ ◄────────────── │   (Node.js)     │ ◄───────────── │                 │
│                 │       SSE       │                 │                │                 │
└─────────────────┘                 └─────────────────┘                └─────────────────┘
      Client                              Server                            Agent
  1. React Grab sends the selected element context to the server via HTTP POST
  2. Server receives the request and spawns the Copilot CLI process
  3. Copilot CLI processes the request with --silent, --allow-all, and --no-color flags
  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 Copilot”
  3. Enter your prompt describing what you want to change
  4. Watch as GitHub Copilot 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

​
Example Workflow

1

Select the element

Hover over a form input in your UI and press Cmd+C (Mac) or Ctrl+C (Windows/Linux).
2

Trigger Copilot

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

Describe your change

Enter a prompt like:
Add email validation to this input and show error message below
4

Review the changes

Copilot will modify the component file, and you’ll see the changes reflected in your browser.

​
Advanced Configuration

You can customize the Copilot provider with options: 
import { createCopilotAgentProvider } from "@react-grab/copilot/client";

const provider = createCopilotAgentProvider({
  serverUrl: "http://localhost:8080",
  getOptions: () => ({
    model: "gpt-4",           // Specify the AI model
    cwd: "/path/to/project",  // Custom working directory
  }),
});

​
Session Management

The Copilot integration supports session resumption for continued conversations: 
// Sessions are automatically managed
// Each new request in the same session maintains context

​
Undo Support

You can undo the last change made by Copilot: 
// The integration tracks the last session
// Call undo to revert the most recent change

​
CLI Arguments

The integration automatically passes these arguments to the Copilot CLI:
  • -p - The prompt describing the change
  • --silent - Suppress interactive prompts
  • --allow-all - Auto-approve all changes
  • --no-color - Disable color output for parsing
  • --model - Specify the AI model (if provided)
  • --resume - Resume a previous session (if available)

​
Troubleshooting

Make sure you have installed the GitHub Copilot CLI:
npm install -g @github/copilot-cli
Verify it’s installed:
copilot --version
  • Check if the default port is already in use
  • Try killing existing processes: pkill -f "react-grab.*server"
  • Check server logs for error messages
  • Verify you’re logged into GitHub Copilot CLI
  • Check that you have an active Copilot subscription
  • Ensure the Copilot CLI is working: copilot --help
  • 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 the working directory is correct
  • Look for error messages in stderr output

​
Performance Benefits

Using React Grab with GitHub Copilot can make your development workflow up to 3× faster by:
  • Eliminating manual file navigation and component searching
  • Providing precise context about the exact element to modify
  • Reducing back-and-forth by including all relevant information upfront
  • Supporting session continuity for related changes

​
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