Initial commit

Signed-off-by: Ilan Bigio <ilan@openai.com>

codex-cli/examples/build-codex-demo/run.sh

@@ -0,0 +1,65 @@
+#!/bin/bash
+
+# run.sh — Create a new run_N directory for a Codex task, optionally bootstrapped from a template,
+# then launch Codex with the task description from task.yaml.
+#
+# Usage:
+#   ./run.sh                  # Prompts to confirm new run
+#   ./run.sh --auto-confirm   # Skips confirmation
+#
+# Assumes:
+#   - yq and jq are installed
+#   - ../task.yaml exists (with .name and .description fields)
+#   - ../template/ exists (optional, for bootstrapping new runs)
+
+# Enable auto-confirm mode if flag is passed
+auto_mode=false
+[[ "$1" == "--auto-confirm" ]] && auto_mode=true
+
+# Move into the working directory
+cd runs || exit 1
+
+# Grab task name for logging
+task_name=$(yq -o=json '.' ../task.yaml | jq -r '.name')
+echo "Checking for runs for task: $task_name"
+
+# Find existing run_N directories
+shopt -s nullglob
+run_dirs=(run_[0-9]*)
+shopt -u nullglob
+
+if [ ${#run_dirs[@]} -eq 0 ]; then
+  echo "There are 0 runs."
+  new_run_number=1
+else
+  max_run_number=0
+  for d in "${run_dirs[@]}"; do
+    [[ "$d" =~ ^run_([0-9]+)$ ]] && (( ${BASH_REMATCH[1]} > max_run_number )) && max_run_number=${BASH_REMATCH[1]}
+  done
+  new_run_number=$((max_run_number + 1))
+  echo "There are $max_run_number runs."
+fi
+
+# Confirm creation unless in auto mode
+if [ "$auto_mode" = false ]; then
+  read -p "Create run_$new_run_number? (Y/N): " choice
+  [[ "$choice" != [Yy] ]] && echo "Exiting." && exit 1
+fi
+
+# Create the run directory
+mkdir "run_$new_run_number"
+
+# Check if the template directory exists and copy its contents
+if [ -d "../template" ]; then
+  cp -r ../template/* "run_$new_run_number"
+  echo "Initialized run_$new_run_number from template/"
+else
+  echo "Template directory does not exist. Skipping initialization from template."
+fi
+
+cd "run_$new_run_number"
+
+# Launch Codex
+echo "Launching..."
+description=$(yq -o=json '.' ../../task.yaml | jq -r '.description')
+codex "$description"

codex-cli/examples/build-codex-demo/task.yaml

@@ -0,0 +1,88 @@
+name: "build-codex-demo"
+description: |
+  I want you to reimplement the original OpenAI Codex demo.
+
+  Functionality:
+  - User types a prompt and hits enter to send
+  - The prompt is added to the conversation history
+  - The backend calls the OpenAI API with stream: true
+  - Tokens are streamed back and appended to the code viewer
+  - Syntax highlighting updates in real time
+  - When a full HTML file is received, it is rendered in a sandboxed iframe
+  - The iframe replaces the previous preview with the new HTML after the stream is complete (i.e. keep the old preview until a new stream is complete)
+  - Append each assistant and user message to preserve context across turns
+  - Errors are displayed to user gracefully
+  - Ensure there is a fixed layout is responsive and faithful to the screenshot design
+  - Be sure to parse the ouput from OpenAI call to strip the ```html tags code is returned within
+  - Use the system prompt shared in the API call below to ensure the AI only returns HTML
+
+  Support a simple local backend that can:
+  - Read local env for OPENAI_API_KEY
+  - Expose an endpoint that streams completions from OpenAI
+  - Backend should be a simple node.js app
+  - App should be easy to run locally for development and testing
+  - Minimal setup preferred — keep dependencies light unless justified
+
+  Description of layout and design:
+  - Two stacked panels, vertically aligned:
+    - Top Panel: Main interactive area with two main parts
+    - Left Side: Visual output canvas. Mostly blank space with a small image preview in the upper-left
+  - Right Side: Code display area
+    - Light background with code shown in a monospace font
+    - Comments in green; code aligns vertically like an IDE/snippet view
+  - Bottom Panel: Prompt/command bar
+    - A single-line text box with a placeholder prompt
+    - A green arrow (submit button) on the right side
+  - Scrolling should only be supported in the code editor and output canvas
+
+  Visual style
+  - Minimalist UI, light and clean
+  - Neutral white/gray background
+  - Subtle shadow or border around both panels, giving them card-like elevation
+  - Code section is color-coded, likely for syntax highlighting
+  - Interactive feel with the text input styled like a chat/message interface
+
+  Here's the latest OpenAI API and prompt to use:
+  ```
+  import OpenAI from "openai";
+
+  const openai = new OpenAI({
+    apiKey: process.env.OPENAI_API_KEY,
+  });
+
+  const response = await openai.responses.create({
+    model: "gpt-4.1",
+    input: [
+      {
+        "role": "system",
+        "content": [
+          {
+            "type": "input_text",
+            "text": "You are a coding agent that specializes in frontend code. Whenever you are prompted, return only the full HTML file."
+          }
+        ]
+      }
+    ],
+    text: {
+      "format": {
+        "type": "text"
+      }
+    },
+    reasoning: {},
+    tools: [],
+    temperature: 1,
+    top_p: 1
+  });
+
+  console.log(response.output_text);
+  ```
+  Additional things to note:
+  - Strip any html and tags from the OpenAI response before rendering
+  - Assume the OpenAI API model response always wraps HTML in markdown-style triple backticks like ```html <code> ```
+  - The display code window should have syntax highlighting and line numbers.
+  - Make sure to only display the code, not the backticks or ```html that wrap the code from the model.
+  - Do not inject raw markdown; only parse and insert pure HTML into the iframe
+  - Only the code viewer and output panel should scroll
+  - Keep the previous preview visible until the full new HTML has streamed in
+
+  Add a README.md with what you've implemented and how to run it.