IDE Extensions (VS Code, etc.)

📚 Series Navigation: The previous article 08 · Getting Started with the CLI got you comfortable with typing codex in the terminal. This article moves Codex into VS Code—running the same agent and sharing the same configurations, but with a graphical interface and side-by-side diff reviews. The next article 10 · Cloud Codex will discuss outsourcing tasks to run in the cloud.

Let's first reconstruct a real conversation I had with a colleague last month.

Colleague: "I searched Codex in VS Code, why can't I find an official one? A bunch of plugins with 'codex' in their names popped up." Me: "You searched for the wrong keyword. The official extension isn't named Codex; its ID is openai.chatgpt." Colleague: "What? OpenAI calls the Codex extension ChatGPT? Who would have guessed that." Me: "I got stuck on that name for five minutes too. Just look for the one with the publisher OpenAI and install it."

To put it plainly, the first hurdle of the Codex IDE extension is not using it, but "finding it"—the name is counterintuitive, and in Cursor it is hidden in the collapsed extension bar by default. This article highlights these counterintuitive spots and explains the features that make the graphical interface more convenient than the CLI.

After reading this article, you will get:

• Step-by-step instructions to install the Codex extension in VS Code / Cursor / Windsurf, along with a troubleshooting checklist if you "cannot find the icon/search it"
• How to use editor context (@file, feeding selected code), the three approval modes, and model/thinking depth switching
• A comparison table of "Extension vs. CLI vs. Desktop App" to help you choose, along with extension-specific slash commands and customizable shortcuts

---

01 Understand First: The Relationship Between the Extension, CLI, and Desktop App

"I already know how to use codex in the terminal and have the Desktop App installed. Do I still need the extension?" First, the conclusion: the extension is not a fourth new tool; it is the Codex CLI wrapped in an editor interface. The official docs state plainly that the IDE extension "uses the same agent as the Codex CLI and shares the same configuration." The model, sandbox, and approval policies you configure in ~/.codex/config.toml are all inherited by the extension; the logins and AGENTS.md files you set in the CLI are recognized here too.

Analogy: The same car controlled by a steering wheel and a remote. The CLI is like sitting in the driver's seat holding the steering wheel—direct, full-featured, and able to engage any gear. The extension is like a remote control, letting you run the car with a few clicks inside the editor without sitting in the driver's seat, while reviewing status on a large screen (side-by-side diffs). The engine, fuel tank, and dashcam are the same—whichever control you switch to, the car remains the same. The Desktop App (covered in Articles 03 and 07) is another standalone wrapper, suitable for those who don't want to touch the editor and prefer monitoring parallel tasks.

So when should you use which? I have compiled a comparison table based on my experience:

Scenario	CLI (Terminal)	IDE Extension	Desktop App
Coding daily in VS Code / Cursor	Feasible	✅ Best, code context is fed out of the box	Requires switching windows
Writing scripts, batch automation, SSH server work	✅ Only choice	❌	❌
Hate command lines, want to monitor parallel tasks	❌ Discouraged	Average	✅ Best
Reviewing diffs, asking about selected code	Plain text diff; feasible	✅ Native side-by-side diffs	✅ Graphical
Wanting full CLI capabilities not in extension	✅ Complete	Run codex in the built-in terminal	—

Simply put: the extension is much more convenient for "file-related" tasks like writing code and reviewing edits; if you need to run batch commands or use features not exposed in the extension panel, run codex in the editor's integrated terminal—it shares the configuration and login state, allowing seamless switching.

💡 Summary in one sentence: The extension, CLI, and Desktop App are three faces of the same Codex. They share configurations and logins, letting you switch based on the task at hand without choosing one over the other.

---

02 Installation: Look for openai.chatgpt, and Cursor's "Hidden Icon" Trap

Supported Editors and Systems

The official docs clarify that the Codex IDE extension supports VS Code and its forks Cursor and Windsurf (as well as VS Code Insiders). The JetBrains family (IntelliJ, PyCharm, WebStorm, Rider, etc.) uses a separate, standalone JetBrains integration. On the system side, macOS, Windows, and Linux are all supported. On Windows, you can run it directly using native Windows sandboxes or switch to WSL2 if a Linux environment is needed (details in the official Windows guide).

VPN Tip: Installing the extension, logging in with a ChatGPT account, and running tasks all connect to OpenAI servers, requiring a VPN throughout in mainland China, just like the CLI.

Three Installation Methods

Method 1: Search the Extension Marketplace (Most stable, but search for the right name)

Open the extensions view in the editor by pressing Cmd+Shift+X (Mac) or Ctrl+Shift+X (Windows / Linux). This is the first trap: many people search for Codex and find only third-party plugins. The reason is—the official extension ID is openai.chatgpt, and the publisher is OpenAI. Search for Codex or ChatGPT, but make sure to install the one published by OpenAI.

For example, searching for codex in VS Code:

Method 2: Click-to-Install Links

When the editor is running, clicking these links jumps directly to the installation page:

VS Code   : vscode:extension/openai.chatgpt
Cursor    : cursor:extension/openai.chatgpt
Windsurf  : windsurf:extension/openai.chatgpt

Method 3: Command Line (Fastest)

If your code / cursor command-line tool is configured, install it in one line:

code --install-extension openai.chatgpt

For Cursor, replace code with cursor. The expected output looks like:

Installing extensions...
Extension 'openai.chatgpt' was successfully installed.

⚠️ The extension ID openai.chatgpt is the official ID. I verified this command against the official repository; it is correct and ready to use.

Cannot Find the Icon After Installation? Troubleshooting by Editor

The official docs state: once installed, Codex appears in the editor sidebar, defaulting to the right side in VS Code. However, behavior varies by editor. Follow the table to troubleshoot:

Symptom	Editor	Troubleshooting
Codex does not appear immediately	VS Code	Official advice: restart the editor and check the right sidebar
Right sidebar is empty / cannot find entry	Cursor	Cursor's activity bar is horizontal by default, and collapsed items hide Codex—pin it or adjust the extension order
Want to move Codex back to the main left sidebar	VS Code	Drag the Codex icon back to the left activity bar
Want to move it to the right side in Cursor	Cursor	Search activity bar in settings, change orientation to vertical, restart, drag it to the right, and change orientation back to horizontal

I fell into the second trap in Cursor: I searched for Codex in the top right after installing and found nothing, assuming it failed to install. Later, I found it collapsed under "More" in the horizontal activity bar—Cursor's horizontal bar collapses newly installed extensions, and pinning it resolved the issue. VS Code users won't face this, but Cursor users run into it almost every time.

Logging In on First Launch

Clicking the Codex panel for the first time prompts you to log in, using either a ChatGPT account or an API Key. The official docs mention: your ChatGPT subscription includes Codex usage, so most users can log in with their ChatGPT account without configuring an API Key. Quota details for each subscription tier are in Article 04, or the official pricing page.

Extensions update automatically. To check the version manually, click "Check for Updates" on the editor's extension page.

💡 Summary in one sentence: Look for the publisher OpenAI and ID openai.chatgpt when installing; VS Code users restart after installation, and Cursor users remember to pin the collapsed icon.

---

03 Editor Context: Feeding the Right Code Reference

Let's first clarify: the biggest waste when working with Codex is when it "does not know which file or code block you are referring to" and has to search your project blindly. The IDE extension's main advantage over the CLI is that it utilizes the editor's context directly. The official docs note: when Codex has access to your active files and selected code, you can write shorter prompts and get faster, more relevant results.

Analogy: Pointing at a blueprint in person rather than explaining it over the phone. Explaining "the wall next to the window in the living room" over the phone leaves the contractor guessing; pointing at the blueprint in person saying "here" gets it right instantly. The CLI is like explaining over the phone (describing locations in text), while the extension is like pointing in person (selecting, typing @, and feeding the location directly).

Two methods:

Method 1: Referencing Files with @file

Type @ followed by the filename in the prompt box, and Codex will use that file as a reference. The official example:

Using @example.tsx as a reference, add a new page named "Resources" to the app, with the content being the resource list defined in @resources.ts

This prompt references two files in one line—one as a template and one as a data source, saving Codex from guessing.

Method 2: Selecting Code + Auto Context

This is even simpler: select a block of code in the editor, and it enters the context of your active conversation. Furthermore, the extension includes an Auto Context (Auto Context) switch that automatically includes your recently opened files and editor context—toggle it on or off at any time with the slash command /auto-context (slash command list in Section 06).

Besides selecting code to feed it automatically, the system provides two commands to "pin" context into the conversation, which you can run via the command panel or bind to shortcuts:

Command ID	What It Does
chatgpt.addToThread	Adds the selected code block to the active conversation as context
chatgpt.addFileToThread	Adds the entire file to the active conversation as context

I use the second method most when troubleshooting bugs in React components: select the suspicious JSX block and ask "why is this rendering incorrectly," without typing a single word to describe it—it located a flex container setting conflict in two turns. Doing this in the CLI would require typing a long explanation of the nested structure.

⚠️ Want to drag images into the prompt box as references? The official docs remind you: hold Shift while dragging and dropping images, otherwise VS Code will block the extension's drag-and-drop mechanism.

💡 Summary in one sentence: Referencing files with @file and selecting code + Auto Context feed the context directly—completely eliminating the guessing game of "which code block you mean", enabling shorter prompts and more accurate results.

---

04 Three Approval Modes: Discussing Plans or Letting It Edit

This is the most important switch in the extension. Remember the "sandbox + approval" settings in Article 02? In the CLI, they are configured separately; in the extension, they are simplified into a three-tier "approval mode" switcher below the input box, adjustable with a click.

The three tiers in the official docs:

Approval Mode	Codex Behavior	When to Use
Agent (Default)	Reads, edits files, and runs commands automatically inside the workspace; pauses to ask you only when stepping out of bounds or accessing the network	The primary mode for daily development
Chat	Chats and provides plans only; outlines changes before editing, does not edit files directly	When you want to discuss plans, read code, or run reviews without modifying files
Agent (Full Access)	Reads, edits, runs commands, and accesses the network without any approvals	Trusted environments; the official docs warn to "use with caution"

Analogy: Contractor authorization levels. Chat is "write plans only, report before acting"; Agent is "clean up this workspace as you please, but ask me before going to other rooms or contacting external vendors"; Agent (Full Access) is "run wild across the building and contact anyone without asking"—the name "Full Access" is there for a reason, and the official docs caution its use.

Real-world scenarios:

• Taking over a legacy project and wanting to learn its architecture: switch to Chat. It reads without editing, explaining plans so you get comfortable before letting it modify code.
• Daily CRUD tasks: use the default Agent mode—it edits workspace files automatically, and pauses to ask you before running pip install or modifying files outside the workspace.
• Running a bulk task you are 100% sure is safe: temporarily switch to Agent (Full Access) to skip approving every step, but remember to switch back when done.

I have a real lesson here. In April, I let Codex add logging to a module in bulk while leaving the permission on the loosest setting. It took the initiative to "optimize" import sorting across several files, and I spent ten minutes sorting out what it had changed. Since then, I keep it on Agent by default, upgrading to Full Access only when I am 100% sure, and downgrading immediately after. For major edits, I let it explain the plan in Chat first to set the boundaries, which is much cleaner than cleanups.

💡 Summary in one sentence: Permissions are simplified into a three-tier switch below the input box—Chat writes plans only, Agent edits in the workspace automatically and asks for out-of-bounds actions (default), and Agent (Full Access) runs without prompts (use with caution). Let it explain plans in Chat before major edits.

---

05 Model and Thinking Depth: Reserving Premium Options for Tough Tasks

The extension makes switching models and adjusting thinking depth a matter of clicks, both located in the switcher below the input box.

First, switching models. Codex defaults to the recommended models (currently the GPT family; names will update with versions, so refer to your local switcher). Click the model switcher to change—different models serve different purposes: use lightweight models for simple tasks to save quota, and flagship models for complex tasks to ensure quality.

Second, thinking depth (reasoning effort), a concept from the CLI article. The official docs explain that this controls "how long Codex thinks before responding," offering three tiers under the model switcher: low, medium, and high.

Analogy: Allocating exam time to questions. low is like simple multiple-choice questions—quick but prone to silly mistakes; high is like solving complex open-ended problems—letting the model reason step-by-step, slow but stable. The official advice is practical—start with medium and switch to high only when facing complex tasks requiring deep reasoning. The reason is clear: higher thinking depth consumes more tokens and hits rate limits faster, especially with premium models.

My usage matches the official recommendation: I use medium by default for daily tasks, which is fast and cost-effective; I switch to high only for debugging tasks requiring multi-file analysis and cross-module reasoning. Maxing it out all the time is a waste of both time and quota.

Dimension	Model Switcher	Thinking Depth (effort)
Where to Switch	Switcher below input box	Same switcher; adjustable per model
Options	Lightweight / Flagship (local display)	low / medium / high
Trade-offs	Simple models save quota; premium models ensure quality	Higher is deeper, slower, and consumes more tokens
My Default	Default recommended model	medium; switch to high for complex tasks

💡 Summary in one sentence: Switch models and thinking depth below the input box—use lightweight models for simple tasks and keep thinking depth on medium by default, reserving premium models and high settings for tough tasks.

---

06 Slash Commands and Cloud Delegation: Two Handy Tools

Extension-Specific Slash Commands

Typing / in the Codex chat box brings up a menu of slash commands—note that these are not the /explain, /fix, or /test commands you see in old tutorials. The official list (controls Codex behavior, switches local/cloud, and checks status):

Slash Command	What It Does
/status	Checks active thread ID, context usage, and rate limits
/auto-context	Toggles Auto Context (including recent files and editor context)
/local	Switches to Local mode, running tasks inside your workspace
/cloud	Switches to Cloud mode, delegating tasks to run in the cloud (requires cloud access)
/cloud-environment	Selects which cloud environment to use (Cloud mode only)
/review	Starts code review mode, reviewing uncommitted edits or comparing branches
/goal	Sets a persistent goal for Codex to work towards
/feedback	Opens the feedback dialog to submit feedback (optionally attaching logs)

⚠️ Many Codex tutorials list slash commands like /explain, /fix, and /test—these are not in the official documentation. Refer to the actual menu that appears when you type / in the editor; the table above is compiled from the official slash commands page.

Note: if /goal does not appear in your menu, enable it via features.goals = true under [features] in ~/.codex/config.toml or ask Codex to run codex features enable goals (subject to official docs).

Delegating Long Tasks to the Cloud

The extension offers a convenient capability: offload slow, long tasks to the Codex cloud without consuming local resources, while monitoring progress and reviewing results directly in the editor. The official steps:

1. Create a cloud environment in your ChatGPT Codex settings.
2. Select the environment in the extension, and click Run in the cloud.

It includes a helpful detail: you can let the cloud start from main (ideal for new ideas) or start with your local uncommitted edits (ideal for completing tasks in progress). Furthermore—when launching cloud tasks from local conversations, Codex remembers the dialogue context, picking up where you left off; once the cloud run is complete, you can pull the changes back locally to apply diffs, run tests, and finish.

My setup: I handle minor edits locally in the extension, and delegate slow, long tasks like "run the test suite and fix all failures" to the cloud via /cloud, checking back later. Cloud operations are the focus of Article 10; here, just know that the extension lets you delegate tasks in one click.

💡 Summary in one sentence: The extension's slash commands are /status, /local, /cloud, and /review from the official menu (not /explain or /fix); /cloud lets you delegate long tasks to the cloud with one click, preserving context—do not be misled by outdated tutorials.

---

07 Hands-on: Running the Whole Pipeline in VS Code (10 Mins)

Let's walk through the setup from scratch. Each step includes "what you should see" so you can verify your configuration and usage. It does not depend on a real project; just create a new empty directory.

Step 0: Create a minimal practice project, and open it in VS Code

Run in the terminal (Mac / Linux; on Windows PowerShell, replace mkdir -p with mkdir):

mkdir -p ~/codex-ide-demo && cd ~/codex-ide-demo
printf 'def greet(name):\n    return "Hello " + name\n\nprint(greet("world"))\n' > demo.py
code .

Expected behavior: VS Code opens this folder, displaying demo.py in the explorer sidebar. (If you don't have the code CLI configured, open the folder manually.)

Step 1: Open the Codex panel and log in

After installing the extension, Codex appears in the right sidebar in VS Code; restart the editor if it doesn't show up (Cursor users remember to pin the collapsed icon). Click the Codex panel, and log in with your ChatGPT account in the browser when prompted.

Expected behavior: The Codex conversation panel appears on the right without login prompts, and the model and approval selectors are visible below the input box.

Step 2: Select code + request edit, review side-by-side diff

In demo.py, select the greet function lines (make sure approval mode is on the default Agent), and type in the input box:

Modify this to use an f-string, and add type annotations

Expected behavior: Codex identifies the function (using the selected context) and applies the edits—changing return "Hello " + name to return f"Hello {name}" and adding type annotations, displaying the changes as a side-by-side diff for you to review. Apply it once verified.

Step 3: Switch to Chat mode, ask it to draft a plan

Click the approval switcher below the input box, change it to Chat, and send a larger requirement:

Add command-line argument support to this file, letting users pass a name from the terminal. Explain your plan first.

Expected behavior: Since it is in Chat mode, Codex does not edit the file, explaining its plan first (e.g., importing argparse and listing the edits). Once you agree with the plan, switch back to Agent and let it edit.

Step 4: View status with /status

Type in the input box:

/status

Expected behavior: It prints the active thread ID, context usage, and rate limits. By this step, you have used editor context, side-by-side diffs, approval modes, and slash commands.

---

08 Quick Tips: Custom Shortcuts and Returning to the CLI

Binding Shortcuts to Codex Commands

By default, most Codex extension commands do not have keyboard shortcuts assigned (except for opening new chats), but you can bind them. Two ways: click the settings icon in the Codex chat box and select Keyboard shortcuts, or use the command panel:

1. Open the command panel (Cmd+Shift+P / Ctrl+Shift+P).
2. Run Preferences: Open Keyboard Shortcuts.
3. Search Codex or the specific command ID (like chatgpt.newChat), click the edit icon, and type your key combination.

Available commands (from the docs, platform variations labeled):

Command ID	Default Shortcut	What It Does
chatgpt.newChat	Mac Cmd+N / Win·Linux Ctrl+N	Starts a new chat session (thread)
chatgpt.openSidebar	None (customizable)	Opens the Codex sidebar panel
chatgpt.newCodexPanel	None (customizable)	Opens a new Codex panel
chatgpt.addToThread	None (customizable)	Adds selected code to the active conversation
chatgpt.addFileToThread	None (customizable)	Adds the active file to the active conversation
chatgpt.implementTodo	None (customizable)	Prompts Codex to implement the selected TODO comment

⚠️ Old tutorials listing shortcuts like Cmd+Shift+C to open panels or Cmd+Shift+E to explain code are incorrect—these are not default keymaps. Verify shortcuts in your Keyboard Shortcuts panel.

Important Extension Settings

The extension has few settings of its own; configurations affecting behavior (models, approvals, sandboxes) are edited in the shared ~/.codex/config.toml file (which the extension inherits). Editor-level settings configure the interface experience:

Setting	What It Does
chatgpt.openOnStartup	Automatically focuses the Codex sidebar on startup
chatgpt.commentCodeLensEnabled	Displays a CodeLens button above TODO comments, clicking it prompts Codex to implement the TODO
chatgpt.localeOverride	Specifies the Codex UI language; leave blank to auto-detect
chatgpt.runCodexInWindowsSubsystemForLinux	Windows-specific: runs Codex inside WSL (use this when your repository and toolchain live in WSL2); triggers an editor reload

Windows users pay attention to runCodexInWindowsSubsystemForLinux: enable this if your code and toolchain live in WSL2; otherwise, Codex runs using native Windows sandboxes. Modifying this setting reloads the editor window to apply changes.

Returning to the CLI

It is simple: open the integrated terminal (Cmd+` / Ctrl+`) in the editor and run codex—it shares the configuration and login state with the extension. You can switch between graphical tools and the command line within the same VS Code window.

💡 Summary in one sentence: Codex commands do not have default shortcuts but can be bound in Keyboard Shortcuts; behavior settings are managed in ~/.codex/config.toml, and editor experience settings are managed in settings; run codex in the integrated terminal to use the CLI.

---

09 Summary

This article moved Codex from the terminal into VS Code:

• Extension = CLI Under the Hood: It runs the same agent, sharing ~/.codex/config.toml and logins. Use the extension for coding, and the integrated terminal for CLI-exclusive capabilities.
• Find the Right Name: The official ID is openai.chatgpt and the publisher is OpenAI; restart VS Code after installation to find it on the right sidebar, and Cursor users remember to pin the collapsed icon.
• Three Graphical Advantages: Editor context (@file / selected code), three approval modes (Chat / Agent / Agent (Full Access)), and model/thinking depth switches.
• Official Commands Only: The slash command menu contains /status, /local, /cloud, and /review (not /explain or /fix); shortcuts are configured in Keyboard Shortcuts.

You should now be able to install the extension, feed context using @ or selections, switch between the three approval modes, review edits with side-by-side diffs, and delegate long tasks via /cloud. Integrating this into your daily editor workflow will make coding much smoother.

---

The next article 10 · Cloud Codex: you got a brief taste of /cloud in this article. The next article explores this in detail: how to delegate tasks to OpenAI's cloud environment in the browser, how it pulls your GitHub repository to edit behind closed doors, and how it delivers diffs or directly creates PRs. Think about this: which of your tasks are best suited to "offload to the cloud and check back later?"

---

Recommended Reading

• Best Practices: Real-World Guidelines Beyond "Correct but Useless" Platitudes
• Codex Core Concepts at a Glance
• Safety and Risk Boundaries: Whether to let it touch your code