Skip to main content

​
Overview

The grab add command connects React Grab to your coding agent, enabling seamless context sharing. It supports legacy agent integrations and MCP server installation.

​
Usage

grab add [agent]

​
Arguments

ArgumentDescription
[agent]Optional agent name: cursor, claude, copilot, windsurf, or mcp

​
Options

OptionAliasDescriptionDefault
--yes-ySkip confirmation promptsfalse
--cwd <cwd>-cWorking directoryCurrent directory

​
Examples

​
Interactive Mode

Run without arguments to choose from available options: 
grab add
1

Select connection mode

Choose between MCP or legacy agent:
? How would you like to connect?
❯ MCP Server (recommended)
  Legacy Agent Integration
2

Select agent (if legacy)

Choose your coding agent:
? Which agent would you like to connect?
❯ Cursor
  Claude Desktop
  GitHub Copilot
  Windsurf
  Skip
3

Review changes

Preview the file changes:
--- app/layout.tsx
+++ app/layout.tsx
@@ -10,6 +10,7 @@
       <Script
         src="//unpkg.com/react-grab/dist/index.global.js"
+        data-agent="cursor"
         crossOrigin="anonymous"
       />
     )}
4

Apply changes

Confirm to install the agent integration:
? Apply these changes? (Y/n)

​
Add Specific Agent

Specify the agent directly: 
grab add cursor

​
Non-Interactive Mode

Install an agent without prompts: 
grab add cursor --yes

​
MCP Server Installation

When selecting MCP, the CLI will:
1

Detect installed agents

Scan for supported agents on your system:
Scanning for agents...
✔ Found: Cursor, Claude Desktop
2

Configure MCP server

Automatically add the MCP server to agent configs:
{
  "mcpServers": {
    "react-grab": {
      "command": "npx",
      "args": ["-y", "@react-grab/mcp-server"]
    }
  }
}
3

Update React Grab

Add MCP metadata to your React Grab installation:
--- package.json
+++ package.json
@@ -5,6 +5,7 @@
   "dependencies": {
     "react": "^18.0.0",
+    "@react-grab/mcp-server": "^0.0.1",
     "react-grab": "^0.0.1"
   }
4

Restart agents

Success! MCP server has been configured.
Restart your agents to activate.

​
Agent Replacement

If you already have an agent installed, you can:
  1. Replace — Remove the existing agent and install the new one
  2. Add alongside — Keep both agents installed
  3. Cancel — Abort the operation

​
Example

grab add claude
Output: 
⚠ Cursor is already installed.

? How would you like to proceed?
❯ Replace with Claude Desktop
  Add Claude Desktop alongside existing
  Cancel

​
Output Example

$ grab add cursor
✿ React Grab 0.0.1

✔ Preflight checks.
✔ Adding Cursor.

--- app/layout.tsx
+++ app/layout.tsx
@@ -10,6 +10,7 @@
       <Script
         src="//unpkg.com/react-grab/dist/index.global.js"
+        data-agent="cursor"
         crossOrigin="anonymous"
       />
     )}

? Apply these changes? (Y/n)

✔ Installing @react-grab/cursor.
✔ Applying changes to app/layout.tsx.
✔ Applying changes to package.json.

Success! Cursor has been added.
Make sure to start the agent server before using it.

​
Troubleshooting

​
React Grab Not Installed

✖ Preflight checks.

✗ React Grab is not installed.
Run react-grab init first to install React Grab.
Solution: Run grab init first.

​
Agent Already Installed

⚠ Cursor is already installed.
Solution: Choose to replace or add alongside the existing agent.

​
Invalid Agent Name

✗ Invalid agent: unknown
Available agents: cursor, claude, copilot, windsurf
Solution: Use one of the supported agent names.

​
Supported Agents

AgentNameDescription
CursorcursorCursor IDE integration
Claude DesktopclaudeClaude Desktop app integration
GitHub CopilotcopilotGitHub Copilot integration
WindsurfwindsurfWindsurf IDE integration
MCP ServermcpModel Context Protocol server (recommended)

Build docs developers (and LLMs) love

Get started for freeTalk to us