feat: add codex agent to cli

Author: gapurov

packages/cli/CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Patch Changes
 
 - fix: ux nits
+- feat: add Codex agent integration to CLI
 
 ## 0.0.70
 

packages/cli/README.md

@@ -38,7 +38,7 @@ npx @react-grab/cli -p pnpm -a claude-code -y
 | `--framework` | `-f` | Framework to configure | `next`, `vite`, `webpack` |
 | `--package-manager` | `-p` | Package manager to use | `npm`, `yarn`, `pnpm`, `bun` |
 | `--router` | `-r` | Next.js router type | `app`, `pages` |
-| `--agent` | `-a` | Agent integration to add | `claude-code`, `cursor`, `opencode`, `none` |
+| `--agent` | `-a` | Agent integration to add | `claude-code`, `cursor`, `codex`, `opencode`, `none` |
 | `--yes` | `-y` | Skip all confirmation prompts | - |
 | `--skip-install` | - | Skip package installation (only modify files) | - |
 | `--help` | `-h` | Show help | - |
@@ -56,6 +56,9 @@ npx @react-grab/cli -y
 # Next.js App Router with Cursor agent
 npx @react-grab/cli -f next -r app -a cursor -y
 
+# Next.js App Router with Codex agent
+npx @react-grab/cli -f next -r app -a codex -y
+
 # Vite with Claude Code agent using pnpm
 npx @react-grab/cli -f vite -p pnpm -a claude-code -y
 
@@ -81,6 +84,7 @@ The CLI can optionally set up agent integrations for:
 
 - **Claude Code** (`-a claude-code`) - Send selected elements to Claude Code
 - **Cursor** (`-a cursor`) - Send selected elements to Cursor
+- **Codex** (`-a codex`) - Send selected elements to Codex
 - **Opencode** (`-a opencode`) - Send selected elements to Opencode
 
 ## Manual Installation

packages/cli/src/cli.ts

@@ -73,6 +73,7 @@ const PACKAGE_MANAGER_NAMES: Record<PackageManager, string> = {
 const AGENT_NAMES: Record<string, string> = {
   "claude-code": "Claude Code",
   cursor: "Cursor",
+  codex: "Codex",
   opencode: "Opencode",
 };
 
@@ -258,7 +259,7 @@ const parseArgs = async (): Promise<CliArgs> => {
     .option("agent", {
       alias: "a",
       type: "string",
-      choices: ["claude-code", "cursor", "opencode", "none"] as const,
+      choices: ["claude-code", "cursor", "opencode", "codex", "none"] as const,
       description:
         "Agent integration to automatically forward selected elements to agent instead of copying to clipboard",
     })
@@ -284,6 +285,10 @@ const parseArgs = async (): Promise<CliArgs> => {
       "$0 -a cursor -y",
       "Add Cursor agent integration non-interactively",
     )
+    .example(
+      "$0 -a codex -y",
+      "Add Codex agent integration non-interactively",
+    )
     .example("$0 -p pnpm -a claude-code", "Use pnpm and add Claude Code agent")
     .example(
       "$0 --skip-install",
@@ -293,6 +298,7 @@ const parseArgs = async (): Promise<CliArgs> => {
       `${pc.bold("Agent Integrations:")}\n` +
         `  ${pc.cyan("claude-code")}  Connect React Grab to Claude Code\n` +
         `  ${pc.cyan("cursor")}       Connect React Grab to Cursor IDE\n` +
+        `  ${pc.cyan("codex")}        Connect React Grab to Codex CLI\n` +
         `  ${pc.cyan("opencode")}     Connect React Grab to Opencode\n\n` +
         `${pc.bold("Supported Frameworks:")}\n` +
         `  ${pc.cyan("next")}     Next.js (App Router & Pages Router)\n` +
@@ -496,6 +502,7 @@ const main = async () => {
     const availableAgents = [
       { name: "Claude Code", value: "claude-code" as const },
       { name: "Cursor", value: "cursor" as const },
+      { name: "Codex", value: "codex" as const },
       { name: "Opencode", value: "opencode" as const },
     ].filter((agent) => !projectInfo.installedAgents.includes(agent.value));
 
@@ -511,7 +518,7 @@ const main = async () => {
     } else {
       const wantAgentIntegration = await confirm({
         message:
-          "Do you want to add an agent integration (Claude Code, Cursor, or Opencode)?",
+          "Do you want to add an agent integration (Claude Code, Cursor, Codex, or Opencode)?",
         default: false,
       });
 

packages/cli/src/detect.ts

@@ -291,7 +291,7 @@ export const detectReactGrab = (projectRoot: string): boolean => {
   return filesToCheck.some(hasReactGrabInFile);
 };
 
-const AGENT_PACKAGES = ["@react-grab/claude-code", "@react-grab/cursor", "@react-grab/opencode"];
+const AGENT_PACKAGES = ["@react-grab/claude-code", "@react-grab/cursor", "@react-grab/opencode", "@react-grab/codex"];
 
 export const detectUnsupportedFramework = (projectRoot: string): UnsupportedFramework => {
   const packageJsonPath = join(projectRoot, "package.json");

packages/cli/src/templates.ts

@@ -1,4 +1,4 @@
-export type AgentIntegration = "claude-code" | "cursor" | "opencode" | "none";
+export type AgentIntegration = "claude-code" | "cursor" | "opencode" | "codex" | "none";
 
 export const NEXT_APP_ROUTER_SCRIPT = `{process.env.NODE_ENV === "development" && (
           <Script

packages/cli/src/transform.ts

@@ -597,6 +597,7 @@ export const transformProject = (
 const AGENT_PREFIXES: Record<string, string> = {
   "claude-code": "npx @react-grab/claude-code@latest &&",
   cursor: "npx @react-grab/cursor@latest &&",
+  codex: "npx @react-grab/codex@latest &&",
   opencode: "npx @react-grab/opencode@latest &&",
 };
 

packages/cli/test/detect.test.ts

@@ -224,13 +224,15 @@ describe("detectInstalledAgents", () => {
         devDependencies: {
           "@react-grab/cursor": "1.0.0",
           "@react-grab/claude-code": "1.0.0",
+          "@react-grab/codex": "1.0.0",
         },
       })
     );
 
     const agents = detectInstalledAgents("/test");
     expect(agents).toContain("cursor");
     expect(agents).toContain("claude-code");
+    expect(agents).toContain("codex");
     expect(agents).not.toContain("opencode");
   });
 

packages/cli/test/install.test.ts

@@ -27,7 +27,7 @@ describe("getPackagesToInstall", () => {
   });
 
   it("should handle all agent types", () => {
-    const agents = ["claude-code", "cursor", "opencode"] as const;
+    const agents = ["claude-code", "cursor", "opencode", "codex"] as const;
 
     for (const agent of agents) {
       const packages = getPackagesToInstall(agent, false);

packages/cli/test/templates.test.ts

@@ -32,7 +32,7 @@ describe("Next.js App Router templates", () => {
   });
 
   it("should include all agent types correctly", () => {
-    const agents = ["claude-code", "cursor", "opencode"] as const;
+    const agents = ["claude-code", "cursor", "opencode", "codex"] as const;
 
     for (const agent of agents) {
       const script = NEXT_APP_ROUTER_SCRIPT_WITH_AGENT(agent);
@@ -54,6 +54,13 @@ describe("Vite templates", () => {
     expect(script).toContain("@react-grab/opencode");
   });
 
+  it("should generate script with codex agent", () => {
+    const script = VITE_SCRIPT_WITH_AGENT("codex");
+
+    expect(script).toContain("react-grab");
+    expect(script).toContain("@react-grab/codex");
+  });
+
   it("should return basic script when agent is none", () => {
     const script = VITE_SCRIPT_WITH_AGENT("none");
 

packages/cli/test/transform.test.ts

@@ -162,6 +162,17 @@ describe("previewTransform - Vite", () => {
     expect(result.newContent).toContain("@react-grab/opencode");
   });
 
+  it("should add React Grab with codex agent to index.html", () => {
+    mockExistsSync.mockImplementation((path) => String(path).endsWith("index.html"));
+    mockReadFileSync.mockReturnValue(indexContent);
+
+    const result = previewTransform("/test", "vite", "unknown", "codex", false);
+
+    expect(result.success).toBe(true);
+    expect(result.newContent).toContain("react-grab");
+    expect(result.newContent).toContain("@react-grab/codex");
+  });
+
   it("should add agent to existing React Grab installation", () => {
     const indexWithReactGrab = `<!doctype html>
 <html lang="en">
@@ -500,6 +511,16 @@ describe("previewPackageJsonTransform", () => {
     expect(result.newContent).toContain("npx @react-grab/opencode@latest &&");
   });
 
+  it("should add codex prefix to dev script", () => {
+    mockExistsSync.mockReturnValue(true);
+    mockReadFileSync.mockReturnValue(packageJsonContent);
+
+    const result = previewPackageJsonTransform("/test", "codex", []);
+
+    expect(result.success).toBe(true);
+    expect(result.newContent).toContain("npx @react-grab/codex@latest &&");
+  });
+
   it("should skip when agent is none", () => {
     const result = previewPackageJsonTransform("/test", "none", []);
 
@@ -533,7 +554,7 @@ describe("previewPackageJsonTransform", () => {
       {
         name: "my-app",
         scripts: {
-          dev: "npx @react-grab/claude-code@latest && next dev",
+          dev: "npx @react-grab/codex@latest && next dev",
         },
       },
       null,
@@ -543,7 +564,7 @@ describe("previewPackageJsonTransform", () => {
     mockExistsSync.mockReturnValue(true);
     mockReadFileSync.mockReturnValue(packageJsonWithAgent);
 
-    const result = previewPackageJsonTransform("/test", "cursor", ["claude-code"]);
+    const result = previewPackageJsonTransform("/test", "cursor", ["codex"]);
 
     expect(result.success).toBe(true);
     expect(result.noChanges).toBe(true);