Add Codex CLI support and model selection feature (#2)

Co-authored-by: Cursor Agent <[email protected]>

Author: ObservedObserver

Dockerfile.claude-automation

@@ -12,6 +12,10 @@ RUN apk add --no-cache \
 # Install Claude Code globally
 RUN npm install -g @anthropic-ai/claude-code
 
+# Install Codex CLI globally
+# Based on the GitHub repo, Codex is available as a npm package
+RUN npm install -g codex
+
 # Create workspace directory
 WORKDIR /workspace
 

README.md

@@ -1,21 +1,24 @@
 # Claude Code Automation MVP
 
-An MVP application that automates coding tasks using Claude Code in sandboxed environments. Users can submit text prompts describing what they want to develop for a configured GitHub repository, and Claude Code will analyze the codebase, make the necessary changes, and create commits that can be turned into pull requests.
+An MVP application that automates coding tasks using Claude Code or Codex CLI in sandboxed environments. Users can submit text prompts describing what they want to develop for a configured GitHub repository, and the selected AI model will analyze the codebase, make the necessary changes, and create commits that can be turned into pull requests.
 
 ## Features
 
-- 🤖 **Claude Code Integration**: Leverages Claude Code for intelligent code generation and modification
-- 🐳 **Sandboxed Execution**: Runs Claude Code in isolated Docker containers for security
+- 🤖 **Multiple AI Models**: Choose between Claude Code and Codex CLI for code generation
+- 🐳 **Sandboxed Execution**: Runs AI models in isolated Docker containers for security
 - 🔄 **Git Integration**: Automatically clones repositories, makes commits, and creates pull requests
 - 🌐 **Web Interface**: Clean, modern UI for submitting prompts and reviewing changes
 - 📊 **Real-time Status**: Live updates on task progress and completion
 - 🔍 **Git Diff Viewer**: Review all changes before creating pull requests
+- 🎯 **Model Comparison**: Easily compare outputs from different AI models
 
 ## Architecture
 
 - **Frontend**: Next.js with TypeScript and TailwindCSS
 - **Backend**: Python Flask API with Docker orchestration
-- **Automation**: Claude Code running in isolated Alpine Linux containers
+- **AI Models**: 
+  - Claude Code (Anthropic) - Advanced coding model
+  - Codex CLI (OpenAI) - Lightweight coding agent
 - **Git Operations**: GitHub API integration for repository management
 
 ## Prerequisites
@@ -50,10 +53,11 @@ An MVP application that automates coding tasks using Claude Code in sandboxed en
 
 1. **Setup GitHub Token**: Click "Setup GitHub Token" in the frontend and enter your token
 2. **Configure Repository**: Enter the GitHub repository URL and branch
-3. **Enter Prompt**: Describe what you want Claude Code to develop
-4. **Start Task**: Click "Code" to begin the automation process
-5. **Review Changes**: View the git diff when the task completes
-6. **Create PR**: If satisfied with changes, click "Create PR"
+3. **Select AI Model**: Choose between Claude Code or Codex CLI
+4. **Enter Prompt**: Describe what you want the AI to develop
+5. **Start Task**: Click "Code" to begin the automation process
+6. **Review Changes**: View the git diff when the task completes
+7. **Create PR**: If satisfied with changes, click "Create PR"
 
 ## Example Prompts
 
@@ -74,8 +78,8 @@ FLASK_DEBUG=True
 
 ## API Endpoints
 
-- `POST /start-task` - Start a new Claude Code automation task
-- `GET /task-status/<task_id>` - Get task status and progress
+- `POST /start-task` - Start a new automation task (supports `model` parameter: "claude" or "codex")
+- `GET /task-status/<task_id>` - Get task status and progress (includes model used)
 - `GET /git-diff/<task_id>` - Retrieve git diff for completed tasks
 - `POST /create-pr/<task_id>` - Create a pull request from completed task
 

async-code-web/app/page.tsx

@@ -9,13 +9,15 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
 import { Badge } from "@/components/ui/badge";
 import { Label } from "@/components/ui/label";
 import { Separator } from "@/components/ui/separator";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 
 interface Task {
     id: string;
     status: string;
     prompt: string;
     repo_url: string;
     branch: string;
+    model?: string;
     commit_hash?: string;
     error?: string;
     created_at: number;
@@ -26,6 +28,7 @@ export default function Home() {
     const [repoUrl, setRepoUrl] = useState("https://github.com/ObservedObserver/streamlit-react");
     const [branch, setBranch] = useState("main");
     const [githubToken, setGithubToken] = useState("");
+    const [model, setModel] = useState("claude");
     const [currentTask, setCurrentTask] = useState<Task | null>(null);
     const [gitDiff, setGitDiff] = useState("");
     const [isLoading, setIsLoading] = useState(false);
@@ -81,7 +84,8 @@ export default function Home() {
                     prompt: prompt.trim(),
                     repo_url: repoUrl,
                     branch: branch,
-                    github_token: githubToken
+                    github_token: githubToken,
+                    model: model
                 })
             });
 
@@ -94,6 +98,7 @@ export default function Home() {
                     prompt: prompt.trim(),
                     repo_url: repoUrl,
                     branch: branch,
+                    model: model,
                     created_at: Date.now()
                 });
                 setGitDiff("");
@@ -111,14 +116,15 @@ export default function Home() {
         if (!currentTask || currentTask.status !== "completed") return;
 
         try {
+            const modelName = currentTask.model === 'codex' ? 'Codex' : 'Claude Code';
             const response = await fetch(`${API_BASE}/create-pr/${currentTask.id}`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
                 },
                 body: JSON.stringify({
-                    title: `Claude Code: ${currentTask.prompt.substring(0, 50)}...`,
-                    body: `Automated changes generated by Claude Code.\n\nPrompt: ${currentTask.prompt}`
+                    title: `${modelName}: ${currentTask.prompt.substring(0, 50)}...`,
+                    body: `Automated changes generated by ${modelName}.\n\nPrompt: ${currentTask.prompt}`
                 })
             });
 
@@ -166,8 +172,8 @@ export default function Home() {
                                 <Code2 className="w-4 h-4 text-white" />
                             </div>
                             <div>
-                                <h1 className="text-xl font-semibold text-slate-900">Claude Code</h1>
-                                <p className="text-sm text-slate-500">AI-Powered Code Automation</p>
+                                <h1 className="text-xl font-semibold text-slate-900">AI Code Automation</h1>
+                                <p className="text-sm text-slate-500">Claude Code & Codex CLI Integration</p>
                             </div>
                         </div>
                         <Button
@@ -190,7 +196,7 @@ export default function Home() {
                         What are we coding next?
                     </h2>
                     <p className="text-slate-600">
-                        Describe what you want to build and Claude will analyze your repository and make the necessary changes
+                        Describe what you want to build and your selected AI model will analyze your repository and make the necessary changes
                     </p>
                 </div>
 
@@ -278,6 +284,30 @@ export default function Home() {
                                         />
                                     </div>
                                 </div>
+                                
+                                {/* Model Selection */}
+                                <div className="space-y-2">
+                                    <Label htmlFor="model" className="flex items-center gap-2">
+                                        <Code2 className="w-3 h-3" />
+                                        AI Model
+                                    </Label>
+                                    <Select value={model} onValueChange={setModel}>
+                                        <SelectTrigger id="model">
+                                            <SelectValue placeholder="Select an AI model" />
+                                        </SelectTrigger>
+                                        <SelectContent>
+                                            <SelectItem value="claude">
+                                                Claude Code - Anthropic's advanced coding model
+                                            </SelectItem>
+                                            <SelectItem value="codex">
+                                                Codex CLI - OpenAI's lightweight coding agent
+                                            </SelectItem>
+                                        </SelectContent>
+                                    </Select>
+                                    <p className="text-sm text-slate-600">
+                                        Choose between Claude Code or Codex CLI for your automation needs
+                                    </p>
+                                </div>
                             </div>
 
                             <div className="flex justify-end">
@@ -306,7 +336,7 @@ export default function Home() {
                                                 {getStatusIcon(currentTask.status)}
                                                 {currentTask.status}
                                             </Badge>
-                                            Task Status
+                                            Task Status {currentTask.model && `(${currentTask.model.toUpperCase()})`}
                                         </CardTitle>
                                         <CardDescription>
                                             {new Date(currentTask.created_at).toLocaleString()} • {currentTask.repo_url}
@@ -371,7 +401,7 @@ export default function Home() {
                                     Ready to Start Coding
                                 </h3>
                                 <p className="text-slate-600 max-w-md mx-auto">
-                                    Enter a detailed prompt describing what you want to build. Claude will analyze your repository 
+                                    Enter a detailed prompt describing what you want to build. Your selected AI model will analyze your repository 
                                     and implement the necessary changes automatically.
                                 </p>
                             </CardContent>

server/main.py

@@ -64,10 +64,15 @@ def start_task():
         repo_url = data.get('repo_url')
         branch = data.get('branch', 'main')
         github_token = data.get('github_token')
+        model = data.get('model', 'claude')  # Default to claude for backward compatibility
 
         if not all([prompt, repo_url, github_token]):
             return jsonify({'error': 'prompt, repo_url, and github_token are required'}), 400
 
+        # Validate model selection
+        if model not in ['claude', 'codex']:
+            return jsonify({'error': 'model must be either "claude" or "codex"'}), 400
+        
         # Generate unique task ID
         task_id = str(uuid.uuid4())
 
@@ -79,6 +84,7 @@ def start_task():
             'repo_url': repo_url,
             'branch': branch,
             'github_token': github_token,
+            'model': model,
             'container_id': None,
             'commit_hash': None,
             'git_diff': None,
@@ -116,6 +122,7 @@ def get_task_status(task_id):
             'prompt': task['prompt'],
             'repo_url': task['repo_url'],
             'branch': task['branch'],
+            'model': task.get('model', 'claude'),  # Include model in response
             'commit_hash': task.get('commit_hash'),
             'error': task.get('error'),
             'created_at': task['created_at']
@@ -194,7 +201,7 @@ def run_claude_code_task(task_id):
         task = tasks[task_id]
         task['status'] = TaskStatus.RUNNING
 
-        logger.info(f"Starting Claude Code task {task_id}")
+        logger.info(f"Starting {task.get('model', 'claude').upper()} task {task_id}")
 
         # Escape special characters in prompt for shell safety
         escaped_prompt = task['prompt'].replace('"', '\\"').replace('$', '\\$').replace('`', '\\`')
@@ -204,6 +211,9 @@ def run_claude_code_task(task_id):
             'ANTHROPIC_API_KEY': os.getenv('ANTHROPIC_API_KEY'),
         }
 
+        # Determine which CLI to use
+        model_cli = task.get('model', 'claude')
+        
         # Create the command to run in container
         container_command = f'''
 set -e
@@ -217,10 +227,10 @@ def run_claude_code_task(task_id):
 git config user.email "[email protected]"
 git config user.name "Claude Code Automation"
 
-echo "Starting Claude Code with prompt..."
+echo "Starting {model_cli.upper()} with prompt..."
 
-# Run Claude Code with the prompt
-echo "{escaped_prompt}" | claude
+# Run the selected model CLI with the prompt
+echo "{escaped_prompt}" | {model_cli}
 
 # Check if there are changes
 if git diff --quiet; then
@@ -230,7 +240,7 @@ def run_claude_code_task(task_id):
 
 # Commit changes
 git add .
-git commit -m "Claude Code: {escaped_prompt[:100]}"
+git commit -m "{model_cli.capitalize()}: {escaped_prompt[:100]}"
 
 # Get commit hash and diff
 echo "COMMIT_HASH=$(git rev-parse HEAD)"

test-model-selection.sh

@@ -0,0 +1,37 @@
+#!/bin/bash
+
+echo "Testing Model Selection API..."
+
+# Test Claude model
+echo "Testing Claude Code model..."
+curl -X POST http://localhost:5000/start-task \
+  -H "Content-Type: application/json" \
+  -d '{
+    "prompt": "Add a test comment to README",
+    "repo_url": "https://github.com/test/repo",
+    "branch": "main",
+    "github_token": "test_token",
+    "model": "claude"
+  }'
+
+echo -e "\n\nTesting Codex CLI model..."
+curl -X POST http://localhost:5000/start-task \
+  -H "Content-Type: application/json" \
+  -d '{
+    "prompt": "Add a test comment to README",
+    "repo_url": "https://github.com/test/repo",
+    "branch": "main", 
+    "github_token": "test_token",
+    "model": "codex"
+  }'
+
+echo -e "\n\nTesting invalid model..."
+curl -X POST http://localhost:5000/start-task \
+  -H "Content-Type: application/json" \
+  -d '{
+    "prompt": "Add a test comment to README",
+    "repo_url": "https://github.com/test/repo",
+    "branch": "main",
+    "github_token": "test_token",
+    "model": "invalid_model"
+  }'