Back to Templates
    Codex · VS Code
    IDE Extension
    Updated April 2026

    Codex in VS Code Template

    The official OpenAI Codex extension brings the Codex agent into VS Code as a sidebar panel and inline-edit surface. It reads the same AGENTS.md as the Codex CLI and shares ~/.codex/ config — so one Learner Brain works across all surfaces.

    ⚡ Just get me started

    Smallest possible Learner Brain in Codex (VS Code). Skip the deep-dive on first pass.

    ~5 min
    1. 1
      Install the OpenAI Codex extension — From the VS Code marketplace — opens as a sidebar panel.
    2. 2
      Drop AGENTS.md at your repo root — Same file Codex CLI reads. One brain works across both surfaces.
    3. 3
      Open the Codex panel and ask for a real change — Approve the brain upgrade proposal it surfaces on first friction.
    AGENTS.md (paste at repo root)
    # AGENTS.md
    
    You operate under The Learner Brain methodology.
    This file is read by Codex in both VS Code and CLI.
    
    ## Working agreements
    - Run lint + tests before claiming a task is done.
    - Ask before adding production dependencies.
    
    ## Meta-learning protocol
    On (1) repeat correction, (2) friction worth not repeating, or (3) stated preference — propose ONE upgrade:
    
    🧠 BRAIN UPGRADE PROPOSAL
    Trigger: <what caused this>
    Surface: <AGENTS.md | Skill | Subagent>
    Location: <path>
    Proposed change: <exact addition>
    
    Wait for approval before editing.

    That's it — you have a working brain. The rest of this page is for when you want to go deeper.

    Extension

    Install from VS Code Marketplace. Same plugin works in Cursor & Windsurf.

    AGENTS.md

    Project root file is auto-loaded into every Codex run.

    Skills

    .agents/skills/<name>/SKILL.md — reusable workflows shared with the CLI.

    Approvals

    Choose suggest / auto-edit / full-auto per workspace via .vscode/settings.json.

    Quick Start

    Install the extension, sign in, and bootstrap your Learner Brain

    1. 1.Open VS Code → Ctrl/Cmd + Shift + X → search “Codex” (publisher: openai) → Install.
    2. 2.Click the Codex icon in the sidebar. Sign in with your ChatGPT account or paste an OpenAI API key. Auth is stored in ~/.codex/auth.json (or the OS keyring) and is shared with the Codex CLI / App.
    3. 3.Add an AGENTS.md at your repo root (use the template below or run the Bootstrap Prompt).
    4. 4.Drop a .vscode/settings.json with the Codex extension defaults you want for this workspace (approval mode, model, sandbox).
    5. 5.Open the Codex panel and ask a small task. Codex will load AGENTS.mdautomatically and show diffs in the editor for you to accept or reject.

    File Structure

    AGENTS.mdActive
    .agents/
    skills/SOP
    my-skill/
    SKILL.md
    .vscode/
    settings.jsonContextual
    ~/.codex/
    AGENTS.mdActive
    config.tomlContextual
    auth.jsonContextual
    Active = Always loadedContextual = Workspace / global configSOP = Skills (auto-discovered)

    The VS Code extension reads AGENTS.md and .agents/skills exactly like the CLI. Only .vscode/settings.json is unique to the editor surface.

    Template Files

    AGENTS.md

    Always-on instructions + Learner Brain protocol (shared with the Codex CLI)

    # AGENTS.md — Project Instructions
    
    You are the Codex IDE extension running in VS Code. Read this file before any work. Keep it under ~200 lines — push deep workflows into Skills under `.agents/skills/`.
    
    This file is shared with the Codex CLI and Codex App via the same `~/.codex/` config — anything you write here applies in all three surfaces.
    
    ## Discovery (how Codex layers context)
    1. **Global:** `~/.codex/AGENTS.override.md` (if present), else `~/.codex/AGENTS.md`
    2. **Project:** repo root → CWD, walking down. Each directory: `AGENTS.override.md` → `AGENTS.md` → fallback names
    3. **Merge:** files closer to your CWD override earlier guidance
    4. **Cap:** combined size limited by `project_doc_max_bytes` (32 KiB default)
    
    ## Meta-Learning Protocol
    
    You operate under The Learner Brain methodology. Improve the *system*, not just the output.
    
    ### Upgrade Triggers
    1. **Repetition** — same correction twice
    2. **Friction** — workaround the user shouldn't repeat
    3. **Manual labor** — multi-step task that should become a Skill
    4. **Preference** — codify expressed style/approach
    
    ### Upgrade Format
    ```
    🧠 BRAIN UPGRADE PROPOSAL
    Trigger: [what caused this]
    Surface: [AGENTS.md | Skill | .vscode/settings.json]
    Location: [path]
    Proposed change: [exact addition]
    Rationale: [why it prevents future friction]
    ```
    
    ### Hygiene
    - AGENTS.md cap: ~200 lines per file. Beyond that, split into a nested AGENTS.md or a Skill.
    - Never edit AGENTS.md without approval. Propose ONE upgrade at a time.
    
    ---
    
    ## VS Code Workflow
    
    - Use the **Codex panel** (left sidebar icon) for chat + agent runs.
    - Inline edits: select code → Codex action → review diff → accept/reject in the editor gutter.
    - Approval mode: prefer **suggest** for risky tasks, **auto-edit** only for trusted Skills.
    - Reference files in chat with `@filename`. Reference terminal output with `@terminal`.
    
    ---
    
    ## Project Context
    
    ### Tech Stack
    - Language: [Your language]
    - Framework: [Your framework]
    - Package manager: pnpm (preferred)
    - Test: [test command]
    
    ### Working Agreements
    - Run lint + tests before claiming a task is done
    - Ask before adding production dependencies
    - Never commit `.env*` or anything under `secrets/`
    
    ## Patterns Learned
    <!-- Append discovered patterns. Promote to Skills when they grow. -->
    - [Pattern]: [solution]
    
    ## Anti-Patterns
    - Do not regenerate boilerplate when an existing Skill covers it
    - Do not push directly to main

    .vscode/settings.json

    Per-workspace Codex extension defaults

    // .vscode/settings.json — workspace defaults for the Codex extension
    {
      // Default approval mode for this workspace.
      // "suggest" = show diffs, never auto-apply.
      // "auto-edit" = apply file edits without asking, still confirm shell.
      // "full-auto" = no prompts (use only with sandboxing).
      "codex.approvalMode": "suggest",
    
      // Preferred model + reasoning effort for this project.
      // Current flagship: gpt-5.5. Fallbacks: gpt-5.4, gpt-5.4-mini, gpt-5.3-codex.
      "codex.model": "gpt-5.5",
      "codex.reasoningEffort": "medium",
    
      // Restrict the agent's filesystem + network surface.
      "codex.sandbox": "workspace-write",
    
      // Auto-load AGENTS.md from project root + ~/.codex (default true; explicit here).
      "codex.loadAgentsMd": true,
    
      // Surface the Codex panel on startup.
      "codex.openOnStartup": false
    }

    ~/.codex/config.toml

    Global config — shared by the VS Code extension, the Codex CLI, and the Codex App

    # ~/.codex/config.toml — shared by VS Code extension, CLI, and App
    
    # Raise the AGENTS.md byte cap (default 32 KiB)
    project_doc_max_bytes = 65536
    
    # Treat additional filenames as instruction files
    project_doc_fallback_filenames = ["TEAM_GUIDE.md", ".agents.md"]
    
    [sandbox]
    # read-only | workspace-write | danger-full-access
    mode = "workspace-write"
    
    # [[skills.config]]
    # path = "/absolute/path/to/.agents/skills/my-skill/SKILL.md"
    # enabled = true

    Known limits & gotchas — Codex (VS Code)

    Real-world quirks that bite if you don't know about them. Not deal-breakers — just things to design around.

    • Same 32 KiB AGENTS.md cap as CLI — The extension shares Codex's project_doc_max_bytes. If your AGENTS.md is large, the panel silently truncates — split into nested files or Skills.
    • Sidebar context can drift from open editor — The panel is its own thread. Don't assume it sees the file you're staring at — reference paths explicitly.
    • Auth is shared with CLI under ~/.codex — Sign-in changes in one surface affect the other. Useful for one brain across surfaces, surprising during multi-account work.
    • Slash commands run in the panel, not the editor — /permissions, /model, /agent target the Codex thread. They don't change VS Code settings.

    🧠 Brain Prompts

    Copy-paste these prompts into Codex (VS Code) to bootstrap your Learner Brain setup or harvest knowledge from productive sessions.

    Bootstrap Prompt

    Paste this into Codex (VS Code) to generate the complete Learner Brain folder structure and starter files for your project.

    🚀 Learner Brain Bootstrap — Codex in VS Code
    
    You are the Codex IDE extension running inside VS Code. Set up the Learner Brain in this project using Codex's AGENTS.md convention. Remember: this project's `AGENTS.md` is shared with the Codex CLI and Codex App via `~/.codex/`.
    
    Generate the following files:
    
    ```
    project-root/
    ├── AGENTS.md              # Project instructions (auto-loaded by Codex)
    ├── .agents/
    │   └── skills/            # Optional: reusable Skills
    │       └── README.md
    └── .vscode/
        └── settings.json      # Codex extension preferences for this workspace
    ```
    
    The AGENTS.md file should include:
    - Meta-Learning Protocol with 3 triggers (repetition, friction, preference)
    - Project context (tech stack, repo layout, how to run/build/test)
    - Coding standards (TypeScript, naming, error handling)
    - Approval mode + sandbox guidance for the IDE extension
    - Engineering conventions and PR expectations
    - Error patterns section (initially empty template)
    
    Keep AGENTS.md under ~200 lines. Push deep workflows into `.agents/skills/<name>/SKILL.md`.
    
    In `.vscode/settings.json` include sensible Codex extension defaults for this workspace (approval mode, model preference, sandbox). Do not commit secrets.
    
    Customize for THIS project's actual stack.

    When to use this

    Run this prompt once when starting a new project to instantly scaffold the complete Learner Brain structure in Codex (VS Code)'s native format.

    🧠 Brain Harvest Prompt

    Paste this into Codex (VS Code) at the end of a productive session to extract reusable patterns in the platform's native format.

    🧠 Brain Harvest — Codex in VS Code
    
    Review our current conversation and recent diffs in this VS Code session. Identify patterns worth preserving in `AGENTS.md` (or in a Skill under `.agents/skills/`).
    
    Scan for these 6 categories:
    
    1. **Rules** — Preferences or constraints stated (e.g., "never use any types", "always use shadcn components")
    2. **Skills** — Reusable procedures or multi-step workflows (e.g., "how to add a new page with SEO")
    3. **Error Solutions** — Bugs fixed and their root causes (e.g., "infinite re-render caused by object in useEffect deps")
    4. **Stack Conventions** — Architecture or tooling decisions (e.g., "use React Query for all server state")
    5. **Anti-Patterns** — Things to avoid learned the hard way (e.g., "don't use localStorage for auth tokens")
    6. **Calculations / Logic** — Formulas, business rules, or domain logic worth preserving
    
    For each finding, output as a section ready to append to AGENTS.md OR as a new Skill file:
    
    ---
    **Category:** [one of the 6 above]
    **Surface:** AGENTS.md | Skill (.agents/skills/<name>/SKILL.md)
    **Status:** 🆕 New | ✏️ Update existing
    **Content:**
    ```markdown
    ## [Section Title]
    
    [Ready-to-paste content]
    ```
    ---
    
    If nothing worth capturing was found, say so — don't force it.
    
    At the end, summarize:
    - Total findings by category
    - Which existing entries should be updated vs. new ones to create

    When to use this

    Run this after any session where you made significant decisions, fixed tricky bugs, or established new patterns. The more you harvest, the smarter your project becomes.
    Reusable scaffold

    SKILL.md template

    Drop this into .agents/skills/<skill-name>/SKILL.md and replace the bracketed placeholders. Frontmatter description is what Codex matches against incoming tasks — keep it specific.

    ---
    name: [skill-name]                # kebab-case; becomes the $invocation handle
    description: [One sentence describing WHEN to use this Skill. Include the trigger phrases users tend to say (e.g. "Use when the user asks to add a new page, scaffold a route, or wire up SEO + sitemap."). Codex matches against this string.]
    # Optional metadata
    # version: 1.0.0
    # tags: [scaffolding, frontend]
    # globs: ["src/pages/**", "src/App.tsx"]
    ---
    
    # [Human-Readable Skill Title]
    
    ## When to use
    - [Concrete trigger #1 — e.g. user asks for a new screen / route]
    - [Concrete trigger #2]
    - [When NOT to use this Skill — e.g. defer to `other-skill` for X]
    
    ## Inputs
    - [Input #1 — e.g. page name in PascalCase]
    - [Input #2 — e.g. whether the page should appear in the public sitemap]
    - [Anything you'd otherwise re-ask the user every time]
    
    ## Steps
    1. [Action with exact path — e.g. Create `src/pages/<PageName>.tsx` from the existing template.]
    2. [Next action — e.g. Register the route in `src/App.tsx` under the correct parent path.]
    3. [Verification — e.g. Run `pnpm lint` and confirm no TS errors before continuing.]
    4. [Cleanup — e.g. Cross-link the new page from any relevant index pages.]
    5. [Final check — e.g. Update sitemap source if the page is public-facing.]
    
    ## Outputs
    - [What "done" looks like — e.g. New page file + registered route + optional sitemap entry]
    - [What to report back — e.g. A short summary of files added/changed and the new route URL]
    
    ## Examples
    ```
    User: "[Sample trigger phrase]"
    Codex: "[Expected first action / plan summary]"
    ```
    
    ## Anti-patterns
    - [Common mistake #1 — e.g. don't hardcode colors; use design tokens]
    - [Common mistake #2 — e.g. don't skip the sitemap step for public pages]
    
    ## Related
    - See `.agents/skills/[other-skill]/SKILL.md` for [related concern].
    - Governed by rules in `AGENTS.md` → [section name].
    
    ## Version
    - 1.0.0 — Initial creation
    Frontmatter

    name = invocation handle ($name). description = trigger phrase Codex matches.

    Steps

    Numbered, deterministic actions. Reference exact file paths and commands so Codex doesn't improvise.

    Outputs

    Tells Codex what "done" looks like and what to report back — prevents silent half-finishes.

    Reference it from AGENTS.md

    Paste this ## Skills section into your project's AGENTS.md. It registers Skills for Codex, documents the trigger phrases the description field is matched against, and shows how to flip the enabled flag in ~/.codex/config.toml.

    ## Skills
    
    Project Skills live under `.agents/skills/`. Codex auto-discovers every
    `SKILL.md` it finds and matches the frontmatter `description` against the
    incoming task. You can also force one with `$<skill-name>`.
    
    ### Registered Skills
    
    | Skill | Trigger phrases (must appear in the user's request) | Path |
    |-------|------------------------------------------------------|------|
    | `add-new-page` | "add a page", "new route", "scaffold a screen", "with SEO" | `.agents/skills/add-new-page/SKILL.md` |
    | `run-audit` | "audit", "security check", "before release" | `.agents/skills/run-audit/SKILL.md` |
    
    ### Rules
    1. **Prefer Skills over reasoning from scratch.** When a task matches a Skill's
       `description`, load the SKILL.md and follow it step-by-step.
    2. **Invoke explicitly** with `$add-new-page` (etc.) when you want to bypass
       matching and force a Skill to run.
    3. **Never edit a SKILL.md mid-task** — propose a Brain Upgrade instead and
       wait for approval.
    4. **If no Skill fits**, complete the task once, then propose a new Skill at
       the end (Brain Upgrade format).
    
    ### Disabling a Skill
    To temporarily disable a Skill without deleting the folder, add it to
    `~/.codex/config.toml`:
    
    ```toml
    [[skills.config]]
    path = "/absolute/path/to/.agents/skills/add-new-page/SKILL.md"
    enabled = false
    ```
    
    Set `enabled = true` (or remove the entry) to turn it back on. The same flag
    applies in the VS Code extension because all surfaces share `~/.codex/`.

    💡 The trigger-phrase table is for your reference — Codex matches against the Skill's frontmatter description, so keep that field rich and specific.

    Guided step

    Turn a repeated workflow into a Skill

    When the same multi-step task shows up twice, capture it once under .agents/skills/ and reference it from AGENTS.md so Codex picks it up automatically next time.

    1. Spot the pattern

    In the Codex panel, when you catch yourself re-explaining the same workflow (e.g. “add a new page with SEO + route + sitemap entry”), pause and run the Brain Harvest prompt above. Codex will draft the Skill for you.

    2. Create the Skill folder

    Skills live one-per-folder. The folder name becomes the Skill's invocation handle.

    .agents/
    └── skills/
    └── add-new-page/
    ├── SKILL.md ← required
    ├── scripts/ ← optional helpers
    └── references/ ← optional snippets

    3. Write SKILL.md

    The frontmatter description is what Codex matches against incoming tasks — make it specific enough to auto-trigger, generic enough to reuse.

    ---
    name: add-new-page
    description: Add a new page to this app. Use when the user asks to "add a page", "create a route", or scaffold a new screen with SEO + sitemap entry.
    ---
    
    # Add a New Page
    
    ## When to use
    - User asks for a new screen, route, or page in this app.
    
    ## Steps
    1. Create `src/pages/<PageName>.tsx` following the existing template
       (SEO header → back link → content → navigation links).
    2. Register the route in `src/App.tsx` under the correct parent path.
    3. Add the page to the sitemap source if it's public-facing.
    4. Cross-link from any relevant index pages.
    5. Run `pnpm lint` and confirm the page renders before reporting done.
    
    ## Inputs
    - Page name (PascalCase) and route slug (kebab-case)
    - Whether it should appear in the public sitemap
    
    ## Outputs
    - New page file, registered route, optional sitemap entry
    - A short summary of what was added and where

    4. Reference it from AGENTS.md

    Codex auto-discovers everything under .agents/skills/, but a short pointer in AGENTS.md makes the Skill easier for both you and the agent to find. Add a Skills section like this:

    ## Skills
    
    The following project Skills live under `.agents/skills/`. Codex auto-discovers
    them — invoke explicitly with `$<skill-name>` when you want to force one.
    
    - **add-new-page** — Scaffold a new page (route + SEO + sitemap entry).
      See `.agents/skills/add-new-page/SKILL.md`.
    - **run-audit** — Security + dependency audit before a release.
      See `.agents/skills/run-audit/SKILL.md`.
    
    When a task matches a Skill's description, prefer the Skill over reasoning
    from scratch. Propose a new Skill (Brain Upgrade) when no existing one fits.

    5. Verify Codex sees it

    • Reload the Codex panel (or restart VS Code) so it re-scans .agents/.
    • In a new chat, ask the trigger phrase from your description (e.g. “add a new page called Pricing”). Codex should reference the Skill in its plan.
    • Force the Skill explicitly with $add-new-page if you want to verify it loads.

    Working Tips

    Two surfaces, one brain

    Run quick edits in the VS Code panel; switch to codex in an integrated terminal for long, multi-step refactors. Both read the same AGENTS.md.

    Use approval mode like a seatbelt

    Default to suggest. Promote a workspace to auto-edit only after the AGENTS.md has stabilised and you trust the Skills covering it.

    This template was last reviewed in April 2026 against the official OpenAI Codex docs. Spot something out of date? Let us know.