@react-grab/cli 0.1.11 → 0.1.13

package/dist/cli.cjs

@@ -8,12 +8,18 @@ var child_process = require('child_process');
 var fs = require('fs');
 var path = require('path');
 var ni = require('@antfu/ni');
+var os = require('os');
+var process2 = require('process');
 var ora = require('ora');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var pc__default = /*#__PURE__*/_interopDefault(pc);
 var basePrompts__default = /*#__PURE__*/_interopDefault(basePrompts);
+var fs__default = /*#__PURE__*/_interopDefault(fs);
+var path__default = /*#__PURE__*/_interopDefault(path);
+var os__default = /*#__PURE__*/_interopDefault(os);
+var process2__default = /*#__PURE__*/_interopDefault(process2);
 var ora__default = /*#__PURE__*/_interopDefault(ora);
 
 var highlighter = {
@@ -302,7 +308,8 @@ var AGENT_PACKAGES = [
   "@react-grab/codex",
   "@react-grab/gemini",
   "@react-grab/amp",
-  "@react-grab/ami"
+  "@react-grab/ami",
+  "@react-grab/mcp"
 ];
 var detectUnsupportedFramework = (projectRoot) => {
   const packageJsonPath = path.join(projectRoot, "package.json");
@@ -533,6 +540,301 @@ var getPackagesToUninstall = (agent) => {
 };
 var spinner = (text, options) => ora__default.default({ text, isSilent: options?.silent });
 
+// src/utils/install-mcp.ts
+var SERVER_NAME = "react-grab-mcp";
+var PACKAGE_NAME = "@react-grab/mcp";
+var getBaseDir = () => {
+  const homeDir = os__default.default.homedir();
+  if (process2__default.default.platform === "win32") {
+    return process2__default.default.env.APPDATA || path__default.default.join(homeDir, "AppData", "Roaming");
+  }
+  if (process2__default.default.platform === "darwin") {
+    return path__default.default.join(homeDir, "Library", "Application Support");
+  }
+  return process2__default.default.env.XDG_CONFIG_HOME || path__default.default.join(homeDir, ".config");
+};
+var getZedConfigPath = () => {
+  const homeDir = os__default.default.homedir();
+  if (process2__default.default.platform === "win32") {
+    const appData = process2__default.default.env.APPDATA || path__default.default.join(homeDir, "AppData", "Roaming");
+    return path__default.default.join(appData, "Zed", "settings.json");
+  }
+  return path__default.default.join(homeDir, ".config", "zed", "settings.json");
+};
+var getClients = () => {
+  const homeDir = os__default.default.homedir();
+  const baseDir = getBaseDir();
+  const stdioConfig = {
+    command: "npx",
+    args: ["-y", PACKAGE_NAME, "--stdio"]
+  };
+  return [
+    {
+      name: "Cursor",
+      configPath: path__default.default.join(homeDir, ".cursor", "mcp.json"),
+      configKey: "mcpServers",
+      format: "json",
+      serverConfig: stdioConfig
+    },
+    {
+      name: "VS Code",
+      configPath: path__default.default.join(baseDir, "Code", "User", "mcp.json"),
+      configKey: "servers",
+      format: "json",
+      serverConfig: { type: "stdio", ...stdioConfig }
+    },
+    {
+      name: "Claude Code",
+      configPath: path__default.default.join(homeDir, ".claude.json"),
+      configKey: "mcpServers",
+      format: "json",
+      serverConfig: stdioConfig
+    },
+    {
+      name: "Amp",
+      configPath: path__default.default.join(homeDir, ".config", "amp", "settings.json"),
+      configKey: "amp.mcpServers",
+      format: "json",
+      serverConfig: stdioConfig
+    },
+    {
+      name: "Droid",
+      configPath: path__default.default.join(homeDir, ".factory", "mcp.json"),
+      configKey: "mcpServers",
+      format: "json",
+      serverConfig: { type: "stdio", ...stdioConfig }
+    },
+    {
+      name: "Codex",
+      configPath: path__default.default.join(
+        process2__default.default.env.CODEX_HOME || path__default.default.join(homeDir, ".codex"),
+        "config.toml"
+      ),
+      configKey: "mcp_servers",
+      format: "toml",
+      serverConfig: stdioConfig
+    },
+    {
+      name: "Zed",
+      configPath: getZedConfigPath(),
+      configKey: "context_servers",
+      format: "json",
+      serverConfig: { source: "custom", ...stdioConfig, env: {} }
+    },
+    {
+      name: "Windsurf",
+      configPath: path__default.default.join(homeDir, ".codeium", "windsurf", "mcp_config.json"),
+      configKey: "mcpServers",
+      format: "json",
+      serverConfig: stdioConfig
+    }
+  ];
+};
+var ensureDirectory = (filePath) => {
+  const directory = path__default.default.dirname(filePath);
+  if (!fs__default.default.existsSync(directory)) {
+    fs__default.default.mkdirSync(directory, { recursive: true });
+  }
+};
+var indentJson = (json, baseIndent) => json.split("\n").map((line, index) => index === 0 ? line : baseIndent + line).join("\n");
+var insertIntoJsonc = (filePath, content, configKey, serverName, serverConfig) => {
+  if (content.includes(`"${serverName}"`)) return;
+  const serverJson = indentJson(
+    JSON.stringify(serverConfig, null, 2),
+    "      "
+  );
+  const escapedConfigKey = configKey.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  const keyPattern = new RegExp(`"${escapedConfigKey}"\\s*:\\s*\\{`);
+  const keyMatch = keyPattern.exec(content);
+  if (keyMatch) {
+    const insertPosition = keyMatch.index + keyMatch[0].length;
+    const entry = `
+    "${serverName}": ${serverJson},`;
+    fs__default.default.writeFileSync(
+      filePath,
+      content.slice(0, insertPosition) + entry + content.slice(insertPosition)
+    );
+    return;
+  }
+  const lastBrace = content.lastIndexOf("}");
+  if (lastBrace === -1) return;
+  const beforeBrace = content.slice(0, lastBrace).trimEnd();
+  const withoutComments = beforeBrace.replace(/\/\/.*$/, "").trimEnd();
+  const lastChar = withoutComments[withoutComments.length - 1];
+  const needsComma = lastChar !== void 0 && lastChar !== "{" && lastChar !== ",";
+  const section = `${needsComma ? "," : ""}
+  "${configKey}": {
+    "${serverName}": ${serverJson}
+  }`;
+  fs__default.default.writeFileSync(filePath, beforeBrace + section + "\n}\n");
+};
+var installJsonClient = (client) => {
+  ensureDirectory(client.configPath);
+  if (!fs__default.default.existsSync(client.configPath)) {
+    const config = {
+      [client.configKey]: { [SERVER_NAME]: client.serverConfig }
+    };
+    fs__default.default.writeFileSync(client.configPath, JSON.stringify(config, null, 2) + "\n");
+    return;
+  }
+  const content = fs__default.default.readFileSync(client.configPath, "utf8");
+  try {
+    const config = JSON.parse(content);
+    const servers = config[client.configKey] ?? {};
+    servers[SERVER_NAME] = client.serverConfig;
+    config[client.configKey] = servers;
+    fs__default.default.writeFileSync(client.configPath, JSON.stringify(config, null, 2) + "\n");
+  } catch {
+    insertIntoJsonc(
+      client.configPath,
+      content,
+      client.configKey,
+      SERVER_NAME,
+      client.serverConfig
+    );
+  }
+};
+var buildTomlSection = (configKey, serverConfig) => {
+  const lines = [`[${configKey}.${SERVER_NAME}]`];
+  for (const [key, value] of Object.entries(serverConfig)) {
+    if (typeof value === "string") {
+      lines.push(`${key} = "${value}"`);
+    } else if (Array.isArray(value)) {
+      const items = value.map((item) => `"${item}"`).join(", ");
+      lines.push(`${key} = [${items}]`);
+    }
+  }
+  return lines.join("\n");
+};
+var installTomlClient = (client) => {
+  ensureDirectory(client.configPath);
+  const sectionHeader = `[${client.configKey}.${SERVER_NAME}]`;
+  const newSection = buildTomlSection(client.configKey, client.serverConfig);
+  if (!fs__default.default.existsSync(client.configPath)) {
+    fs__default.default.writeFileSync(client.configPath, newSection + "\n");
+    return;
+  }
+  const content = fs__default.default.readFileSync(client.configPath, "utf8");
+  if (!content.includes(sectionHeader)) {
+    fs__default.default.writeFileSync(
+      client.configPath,
+      content.trimEnd() + "\n\n" + newSection + "\n"
+    );
+    return;
+  }
+  const lines = content.split("\n");
+  const resultLines = [];
+  let isInsideOurSection = false;
+  let didInsertReplacement = false;
+  for (const line of lines) {
+    if (line.trim() === sectionHeader) {
+      isInsideOurSection = true;
+      if (!didInsertReplacement) {
+        resultLines.push(newSection);
+        didInsertReplacement = true;
+      }
+      continue;
+    }
+    if (isInsideOurSection && line.startsWith("[")) {
+      isInsideOurSection = false;
+    }
+    if (!isInsideOurSection) {
+      resultLines.push(line);
+    }
+  }
+  fs__default.default.writeFileSync(client.configPath, resultLines.join("\n"));
+};
+var getMcpClientNames = () => getClients().map((client) => client.name);
+var installMcpServers = (selectedClients) => {
+  const allClients = getClients();
+  const clients = selectedClients ? allClients.filter((client) => selectedClients.includes(client.name)) : allClients;
+  const results = [];
+  const installSpinner = spinner("Installing MCP server.").start();
+  for (const client of clients) {
+    try {
+      if (client.format === "toml") {
+        installTomlClient(client);
+      } else {
+        installJsonClient(client);
+      }
+      results.push({
+        client: client.name,
+        configPath: client.configPath,
+        success: true
+      });
+    } catch (error) {
+      const message = error instanceof Error ? error.message : String(error);
+      results.push({
+        client: client.name,
+        configPath: client.configPath,
+        success: false,
+        error: message
+      });
+    }
+  }
+  const successCount = results.filter((result) => result.success).length;
+  const failedCount = results.length - successCount;
+  if (failedCount > 0) {
+    installSpinner.warn(
+      `Installed to ${successCount}/${results.length} agents.`
+    );
+  } else {
+    installSpinner.succeed(`Installed to ${successCount} agents.`);
+  }
+  for (const result of results) {
+    if (result.success) {
+      logger.log(
+        `  ${highlighter.success("\u2713")} ${result.client} ${highlighter.dim("\u2192")} ${highlighter.dim(result.configPath)}`
+      );
+    } else {
+      logger.log(
+        `  ${highlighter.error("\u2717")} ${result.client} ${highlighter.dim("\u2192")} ${result.error}`
+      );
+    }
+  }
+  return results;
+};
+var promptConnectionMode = async () => {
+  const { connectionMode } = await prompts({
+    type: "select",
+    name: "connectionMode",
+    message: "How would you like to connect?",
+    choices: [
+      {
+        title: `MCP ${highlighter.dim("(recommended)")}`,
+        description: "Installs to all supported agents at once",
+        value: "mcp"
+      },
+      {
+        title: "Legacy",
+        description: "Install a per-project agent package",
+        value: "legacy"
+      }
+    ]
+  });
+  return connectionMode;
+};
+var promptMcpInstall = async () => {
+  const clientNames = getMcpClientNames();
+  const { selectedAgents } = await prompts({
+    type: "multiselect",
+    name: "selectedAgents",
+    message: "Select agents to install MCP server for:",
+    choices: clientNames.map((name) => ({
+      title: name,
+      value: name,
+      selected: true
+    }))
+  });
+  if (selectedAgents === void 0 || selectedAgents.length === 0) {
+    return false;
+  }
+  logger.break();
+  const results = installMcpServers(selectedAgents);
+  const hasSuccess = results.some((result) => result.success);
+  return hasSuccess;
+};
+
 // src/utils/templates.ts
 var AGENTS = [
   "claude-code",
@@ -554,6 +856,13 @@ var AGENT_NAMES = {
   ami: "Ami",
   droid: "Droid"
 };
+var getAgentDisplayName = (agent) => {
+  if (agent === "mcp") return "MCP";
+  if (agent in AGENT_NAMES) {
+    return AGENT_NAMES[agent];
+  }
+  return agent;
+};
 var NEXT_APP_ROUTER_SCRIPT = `{process.env.NODE_ENV === "development" && (
           <Script
             src="//unpkg.com/react-grab/dist/index.global.js"
@@ -1307,6 +1616,14 @@ var previewPackageJsonTransform = (projectRoot, agent, installedAgents, packageM
       noChanges: true
     };
   }
+  if (agent === "mcp") {
+    return {
+      success: true,
+      filePath: "",
+      message: "MCP does not use package.json dev script",
+      noChanges: true
+    };
+  }
   const packageJsonPath = path.join(projectRoot, "package.json");
   if (!fs.existsSync(packageJsonPath)) {
     return {
@@ -1868,9 +2185,9 @@ var previewCdnTransform = (projectRoot, framework, nextRouterType, targetCdnDoma
 };
 
 // src/commands/add.ts
-var VERSION = "0.1.11";
+var VERSION = "0.1.13";
 var formatInstalledAgentNames = (agents) => agents.map((agent) => AGENT_NAMES[agent] || agent).join(", ");
-var add = new commander.Command().name("add").alias("install").description("add an agent integration").argument("[agent]", `agent to add (${AGENTS.join(", ")})`).option("-y, --yes", "skip confirmation prompts", false).option(
+var add = new commander.Command().name("add").alias("install").description("connect React Grab to your agent").argument("[agent]", `agent to add (${AGENTS.join(", ")})`).option("-y, --yes", "skip confirmation prompts", false).option(
   "-c, --cwd <cwd>",
   "working directory (defaults to current directory)",
   process.cwd()
@@ -1897,9 +2214,10 @@ var add = new commander.Command().name("add").alias("install").description("add
     const availableAgents = AGENTS.filter(
       (agent) => !projectInfo.installedAgents.includes(agent)
     );
-    if (availableAgents.length === 0) {
+    if (availableAgents.length === 0 && isNonInteractive && !agentArg) {
       logger.break();
-      logger.success("All agent integrations are already installed.");
+      logger.success("All legacy agents are already installed.");
+      logger.log("Run without -y to add MCP.");
       logger.break();
       process.exit(0);
     }
@@ -1933,11 +2251,11 @@ var add = new commander.Command().name("add").alias("install").description("add
           message: "How would you like to proceed?",
           choices: [
             {
-              title: `Replace with ${AGENT_NAMES[agentIntegration]}`,
+              title: `Replace with ${getAgentDisplayName(agentIntegration)}`,
               value: "replace"
             },
             {
-              title: `Add ${AGENT_NAMES[agentIntegration]} alongside existing`,
+              title: `Add ${getAgentDisplayName(agentIntegration)} alongside existing`,
               value: "add"
             },
             { title: "Cancel", value: "cancel" }
@@ -1961,48 +2279,72 @@ var add = new commander.Command().name("add").alias("install").description("add
         logger.warn(`Currently installed: ${installedNames}`);
         logger.break();
       }
-      const { agent } = await prompts({
-        type: "select",
-        name: "agent",
-        message: `Which ${highlighter.info("coding agent")} would you like to connect?`,
-        choices: availableAgents.map((availableAgent) => ({
-          title: AGENT_NAMES[availableAgent],
-          value: availableAgent
-        }))
-      });
-      if (!agent) {
+      const connectionMode = await promptConnectionMode();
+      if (connectionMode === void 0) {
         logger.break();
         process.exit(1);
       }
-      agentIntegration = agent;
-      if (projectInfo.installedAgents.length > 0) {
-        const installedNames = formatInstalledAgentNames(
-          projectInfo.installedAgents
+      if (connectionMode === "mcp") {
+        const didInstall = await promptMcpInstall();
+        if (!didInstall) {
+          logger.break();
+          process.exit(0);
+        }
+        logger.break();
+        logger.log(
+          `${highlighter.success("Success!")} MCP server has been configured.`
         );
-        const { action } = await prompts({
+        logger.log("Restart your agents to activate.");
+        logger.break();
+        agentIntegration = "mcp";
+        projectInfo.installedAgents = [...projectInfo.installedAgents, "mcp"];
+      } else {
+        const { agent } = await prompts({
           type: "select",
-          name: "action",
-          message: "How would you like to proceed?",
+          name: "agent",
+          message: `Which ${highlighter.info("agent")} would you like to connect?`,
           choices: [
-            {
-              title: `Replace ${installedNames} with ${AGENT_NAMES[agentIntegration]}`,
-              value: "replace"
-            },
-            {
-              title: `Add ${AGENT_NAMES[agentIntegration]} alongside existing`,
-              value: "add"
-            },
-            { title: "Cancel", value: "cancel" }
+            ...availableAgents.map((availableAgent) => ({
+              title: AGENT_NAMES[availableAgent],
+              value: availableAgent
+            })),
+            { title: "Skip", value: "skip" }
           ]
         });
-        if (!action || action === "cancel") {
-          logger.break();
-          logger.log("Changes cancelled.");
+        if (!agent || agent === "skip") {
           logger.break();
           process.exit(0);
         }
-        if (action === "replace") {
-          agentsToRemove = [...projectInfo.installedAgents];
+        agentIntegration = agent;
+        if (projectInfo.installedAgents.length > 0) {
+          const installedNames = formatInstalledAgentNames(
+            projectInfo.installedAgents
+          );
+          const { action } = await prompts({
+            type: "select",
+            name: "action",
+            message: "How would you like to proceed?",
+            choices: [
+              {
+                title: `Replace ${installedNames} with ${getAgentDisplayName(agentIntegration)}`,
+                value: "replace"
+              },
+              {
+                title: `Add ${getAgentDisplayName(agentIntegration)} alongside existing`,
+                value: "add"
+              },
+              { title: "Cancel", value: "cancel" }
+            ]
+          });
+          if (!action || action === "cancel") {
+            logger.break();
+            logger.log("Changes cancelled.");
+            logger.break();
+            process.exit(0);
+          }
+          if (action === "replace") {
+            agentsToRemove = [...projectInfo.installedAgents];
+          }
         }
       }
     } else {
@@ -2079,7 +2421,7 @@ var add = new commander.Command().name("add").alias("install").description("add
       );
     }
     const addingSpinner = spinner(
-      `Adding ${AGENT_NAMES[agentIntegration]}.`
+      `Adding ${getAgentDisplayName(agentIntegration)}.`
     ).start();
     addingSpinner.succeed();
     const result = previewTransform(
@@ -2185,7 +2527,7 @@ var add = new commander.Command().name("add").alias("install").description("add
     }
     logger.break();
     logger.log(
-      `${highlighter.success("Success!")} ${AGENT_NAMES[agentIntegration]} has been added.`
+      `${highlighter.success("Success!")} ${getAgentDisplayName(agentIntegration)} has been added.`
     );
     if (packageJsonResult.warning) {
       logger.warn(packageJsonResult.warning);
@@ -2204,7 +2546,7 @@ var MAX_KEY_HOLD_DURATION_MS = 2e3;
 var MAX_CONTEXT_LINES = 50;
 
 // src/commands/configure.ts
-var VERSION2 = "0.1.11";
+var VERSION2 = "0.1.13";
 var isMac = process.platform === "darwin";
 var META_LABEL = isMac ? "Cmd" : "Win";
 var ALT_LABEL = isMac ? "Option" : "Alt";
@@ -2707,7 +3049,7 @@ var configure = new commander.Command().name("configure").alias("config").descri
 });
 
 // src/utils/cli-helpers.ts
-var formatInstalledAgentNames2 = (agents) => agents.map((agent) => AGENT_NAMES[agent] ?? agent).join(", ");
+var formatInstalledAgentNames2 = (agents) => agents.map(getAgentDisplayName).join(", ");
 var applyTransformWithFeedback = (result, message) => {
   const writeSpinner = spinner(
     message ?? `Applying changes to ${result.filePath}.`
@@ -2760,7 +3102,7 @@ var uninstallPackagesWithFeedback = (packages, packageManager, projectRoot) => {
 };
 
 // src/commands/init.ts
-var VERSION3 = "0.1.11";
+var VERSION3 = "0.1.13";
 var REPORT_URL = "https://react-grab.com/api/report-cli";
 var DOCS_URL = "https://github.com/aidenybai/react-grab";
 var reportToCli = (type, config, error) => {
@@ -2796,12 +3138,7 @@ var UNSUPPORTED_FRAMEWORK_NAMES = {
   sveltekit: "SvelteKit",
   gatsby: "Gatsby"
 };
-var getAgentName = (agent) => {
-  if (agent in AGENT_NAMES) {
-    return AGENT_NAMES[agent];
-  }
-  return agent;
-};
+var getAgentName = getAgentDisplayName;
 var formatActivationKeyDisplay2 = (activationKey) => {
   if (!activationKey) return "Default (Option/Alt)";
   return activationKey.split("+").map((part) => {
@@ -2816,7 +3153,7 @@ var formatActivationKeyDisplay2 = (activationKey) => {
 };
 var init = new commander.Command().name("init").description("initialize React Grab in your project").option("-y, --yes", "skip confirmation prompts", false).option("-f, --force", "force overwrite existing config", false).option(
   "-a, --agent <agent>",
-  "agent integration (claude-code, cursor, opencode, codex, gemini, amp, droid)"
+  "connect to your agent (claude-code, cursor, opencode, codex, gemini, amp, mcp)"
 ).option(
   "-k, --key <key>",
   "activation key (e.g., Meta+K, Ctrl+Shift+G, Space)"
@@ -3035,23 +3372,108 @@ var init = new commander.Command().name("init").description("initialize React Gr
       const availableAgents = AGENTS.filter(
         (agent) => !projectInfo.installedAgents.includes(agent)
       );
-      if (availableAgents.length > 0) {
+      logger.break();
+      const { wantAddAgent } = await prompts({
+        type: "confirm",
+        name: "wantAddAgent",
+        message: `Would you like to ${highlighter.info("connect it to your agent")}?`,
+        initial: false
+      });
+      if (wantAddAgent === void 0) {
         logger.break();
-        const { wantAddAgent } = await prompts({
-          type: "confirm",
-          name: "wantAddAgent",
-          message: `Would you like to connect React Grab to a ${highlighter.info("coding agent")}? ${highlighter.dim("(optional)")}`,
-          initial: false
-        });
-        if (wantAddAgent === void 0) {
+        process.exit(1);
+      }
+      if (wantAddAgent) {
+        const connectionMode = await promptConnectionMode();
+        if (connectionMode === void 0) {
           logger.break();
           process.exit(1);
         }
-        if (wantAddAgent) {
+        let agentIntegration2;
+        if (connectionMode === "mcp") {
+          const didInstall = await promptMcpInstall();
+          if (!didInstall) {
+            logger.break();
+            process.exit(0);
+          }
+          logger.break();
+          logger.success("MCP server has been configured.");
+          logger.log("Restart your agents to activate.");
+          agentIntegration2 = "mcp";
+          projectInfo.installedAgents = ["mcp"];
+          const result2 = previewTransform(
+            projectInfo.projectRoot,
+            projectInfo.framework,
+            projectInfo.nextRouterType,
+            agentIntegration2,
+            true
+          );
+          const packageJsonResult2 = previewPackageJsonTransform(
+            projectInfo.projectRoot,
+            agentIntegration2,
+            projectInfo.installedAgents,
+            projectInfo.packageManager
+          );
+          if (!result2.success) {
+            logger.break();
+            logger.error(result2.message);
+            logger.break();
+            process.exit(1);
+          }
+          const hasLayoutChanges2 = !result2.noChanges && result2.originalContent && result2.newContent;
+          const hasPackageJsonChanges2 = packageJsonResult2.success && !packageJsonResult2.noChanges && packageJsonResult2.originalContent && packageJsonResult2.newContent;
+          if (hasLayoutChanges2 || hasPackageJsonChanges2) {
+            logger.break();
+            if (hasLayoutChanges2) {
+              printDiff(
+                result2.filePath,
+                result2.originalContent,
+                result2.newContent
+              );
+            }
+            if (hasPackageJsonChanges2) {
+              if (hasLayoutChanges2) {
+                logger.break();
+              }
+              printDiff(
+                packageJsonResult2.filePath,
+                packageJsonResult2.originalContent,
+                packageJsonResult2.newContent
+              );
+            }
+            logger.break();
+            const { proceed } = await prompts({
+              type: "confirm",
+              name: "proceed",
+              message: "Apply these changes?",
+              initial: true
+            });
+            if (!proceed) {
+              logger.break();
+              logger.log("Agent addition cancelled.");
+            } else {
+              installPackagesWithFeedback(
+                getPackagesToInstall(agentIntegration2, false),
+                projectInfo.packageManager,
+                projectInfo.projectRoot
+              );
+              if (hasLayoutChanges2) {
+                applyTransformWithFeedback(result2);
+              }
+              if (hasPackageJsonChanges2) {
+                applyPackageJsonWithFeedback(packageJsonResult2);
+              }
+              logger.break();
+              logger.success(
+                `${getAgentName(agentIntegration2)} has been added.`
+              );
+            }
+          }
+        } else {
           const { agent } = await prompts({
             type: "select",
             name: "agent",
-            message: `Which ${highlighter.info("coding agent")} would you like to connect?`,
+            message: `Which ${highlighter.info("agent")} would you like to connect?`,
             choices: [
               ...availableAgents.map((innerAgent) => ({
                 title: getAgentName(innerAgent),
@@ -3064,7 +3486,7 @@ var init = new commander.Command().name("init").description("initialize React Gr
             logger.break();
             process.exit(0);
           }
-          const agentIntegration2 = agent;
+          agentIntegration2 = agent;
           let agentsToRemove2 = [];
           if (projectInfo.installedAgents.length > 0) {
             const installedNames = formatInstalledAgentNames2(
@@ -3362,7 +3784,7 @@ var init = new commander.Command().name("init").description("initialize React Gr
       const { wantAddAgent } = await prompts({
         type: "confirm",
         name: "wantAddAgent",
-        message: `Would you like to connect React Grab to a ${highlighter.info("coding agent")}? ${highlighter.dim("(optional)")}`,
+        message: `Would you like to ${highlighter.info("connect it to your agent")}?`,
         initial: false
       });
       if (wantAddAgent === void 0) {
@@ -3370,24 +3792,42 @@ var init = new commander.Command().name("init").description("initialize React Gr
         process.exit(1);
       }
       if (wantAddAgent) {
-        const { agent } = await prompts({
-          type: "select",
-          name: "agent",
-          message: `Which ${highlighter.info("coding agent")} would you like to connect?`,
-          choices: [
-            ...AGENTS.map((innerAgent) => ({
-              title: getAgentName(innerAgent),
-              value: innerAgent
-            })),
-            { title: "Skip", value: "skip" }
-          ]
-        });
-        if (agent === void 0) {
+        const connectionMode = await promptConnectionMode();
+        if (connectionMode === void 0) {
           logger.break();
           process.exit(1);
         }
-        if (agent !== "skip") {
-          agentIntegration = agent;
+        if (connectionMode === "mcp") {
+          const didInstall = await promptMcpInstall();
+          if (!didInstall) {
+            logger.break();
+            process.exit(0);
+          }
+          logger.break();
+          logger.success("MCP server has been configured.");
+          logger.log("Continuing with React Grab installation...");
+          logger.break();
+          agentIntegration = "mcp";
+        } else {
+          const { agent } = await prompts({
+            type: "select",
+            name: "agent",
+            message: `Which ${highlighter.info("agent")} would you like to connect?`,
+            choices: [
+              ...AGENTS.map((innerAgent) => ({
+                title: getAgentName(innerAgent),
+                value: innerAgent
+              })),
+              { title: "Skip", value: "skip" }
+            ]
+          });
+          if (agent === void 0) {
+            logger.break();
+            process.exit(1);
+          }
+          if (agent !== "skip") {
+            agentIntegration = agent;
+          }
         }
       }
     }
@@ -3496,10 +3936,10 @@ var init = new commander.Command().name("init").description("initialize React Gr
     reportToCli("error", void 0, error);
   }
 });
-var VERSION4 = "0.1.11";
-var remove = new commander.Command().name("remove").description("remove an agent integration").argument(
+var VERSION4 = "0.1.13";
+var remove = new commander.Command().name("remove").description("disconnect React Grab from your agent").argument(
   "[agent]",
-  "agent to remove (claude-code, cursor, opencode, codex, gemini, amp, ami)"
+  "agent to remove (claude-code, cursor, opencode, codex, gemini, amp, ami, mcp)"
 ).option("-y, --yes", "skip confirmation prompts", false).option(
   "-c, --cwd <cwd>",
   "working directory (defaults to current directory)",
@@ -3526,7 +3966,7 @@ var remove = new commander.Command().name("remove").description("remove an agent
     if (projectInfo.installedAgents.length === 0) {
       preflightSpinner.succeed();
       logger.break();
-      logger.warn("No agent integrations are installed.");
+      logger.warn("No agent connections are installed.");
       logger.break();
       process.exit(0);
     }
@@ -3537,7 +3977,7 @@ var remove = new commander.Command().name("remove").description("remove an agent
         logger.break();
         logger.error(`Agent ${highlighter.info(agentArg)} is not installed.`);
         logger.log(
-          `Installed agents: ${projectInfo.installedAgents.map((innerAgent) => AGENT_NAMES[innerAgent] || innerAgent).join(", ")}`
+          `Installed agents: ${projectInfo.installedAgents.map(getAgentDisplayName).join(", ")}`
         );
         logger.break();
         process.exit(1);
@@ -3548,9 +3988,9 @@ var remove = new commander.Command().name("remove").description("remove an agent
       const { agent } = await prompts({
         type: "select",
         name: "agent",
-        message: `Which ${highlighter.info("agent integration")} would you like to remove?`,
+        message: `Which ${highlighter.info("agent")} would you like to disconnect?`,
         choices: projectInfo.installedAgents.map((innerAgent) => ({
-          title: AGENT_NAMES[innerAgent] || innerAgent,
+          title: getAgentDisplayName(innerAgent),
           value: innerAgent
         }))
       });
@@ -3569,7 +4009,7 @@ var remove = new commander.Command().name("remove").description("remove an agent
       process.exit(1);
     }
     const removingSpinner = spinner(
-      `Preparing to remove ${AGENT_NAMES[agentToRemove] || agentToRemove}.`
+      `Preparing to remove ${getAgentDisplayName(agentToRemove)}.`
     ).start();
     removingSpinner.succeed();
     const result = previewAgentRemoval(
@@ -3666,7 +4106,7 @@ var remove = new commander.Command().name("remove").description("remove an agent
     }
     logger.break();
     logger.log(
-      `${highlighter.success("Success!")} ${AGENT_NAMES[agentToRemove] || agentToRemove} has been removed.`
+      `${highlighter.success("Success!")} ${getAgentDisplayName(agentToRemove)} has been removed.`
     );
     logger.break();
   } catch (error) {
@@ -3675,7 +4115,7 @@ var remove = new commander.Command().name("remove").description("remove an agent
 });
 
 // src/cli.ts
-var VERSION5 = "0.1.11";
+var VERSION5 = "0.1.13";
 var VERSION_API_URL = "https://www.react-grab.com/api/version";
 process.on("SIGINT", () => process.exit(0));
 process.on("SIGTERM", () => process.exit(0));