Codex: Codex IDE Extension
Last updated: 2026-08-31
The Codex IDE extension lets you use Codex directly within your familiar development environment without switching windows.
📋 Prerequisites: Basic VS Code knowledge
1. What You Will Learn
- Supported IDEs
- Installation and configuration
- Core IDE features
- Differences from the CLI version
2. Supported IDEs
| IDE | Support Level | Notes |
|---|---|---|
| VS Code | Full support | Most widely used |
| Cursor | Full support | AI-native IDE |
| Windsurf | Full support | AI coding IDE |
| VS Code forks | Partial support | Compatible with VS Code plugins |
3. Installation
(1) VS Code Installation
TEXT
📖 Display only
1. Open VS Code
2. Click the Extensions icon on the left (or Ctrl+Shift+X)
3. Search for "Codex"
4. Click Install
5. Log in with your ChatGPT account
(2) Cursor Installation
TEXT
📖 Display only
1. Open Cursor
2. Search for "Codex" in the extension marketplace
3. Install
4. Log in with your account
4. Core IDE Features
(1) Inline Edit
Select code → Right-click → "Codex: Edit" → Enter modification instructions:
TYPESCRIPT
// Select this code
function formatDate(date) {
return date.toISOString();
}
// Right-click → Codex: Edit → "Add localization support, support Chinese date format"
// After Codex modifies
function formatDate(date: Date, locale: string = "zh-CN"): string {
return new Intl.DateTimeFormat(locale, {
year: "numeric",
month: "long",
day: "numeric",
}).format(date);
}
(2) Code Generation
TEXT
📖 Display only
Ctrl+Shift+P → "Codex: Generate" → Enter description
▶ Example 1: Alice Uses the IDE Extension
TYPESCRIPT
// Alice presses Ctrl+Shift+P in VS Code
// Enters "Codex: Generate"
// Description: "Create a React Hook that manages pagination state, including page number, page size, and total count"
// Codex generates:
import { useState, useCallback } from "react";
interface PaginationState {
page: number;
pageSize: number;
total: number;
}
export function usePagination(initialPageSize: number = 20) {
const [state, setState] = useState<PaginationState>({
page: 1,
pageSize: initialPageSize,
total: 0,
});
const setPage = useCallback((page: number) => {
setState((prev) => ({ ...prev, page }));
}, []);
const setTotal = useCallback((total: number) => {
setState((prev) => ({ ...prev, total }));
}, []);
const totalPages = Math.ceil(state.total / state.pageSize);
return { ...state, totalPages, setPage, setTotal };
}
(3) Code Review
TEXT
📖 Display only
Select code → Right-click → "Codex: Review"
(4) Explain Code
TEXT
📖 Display only
Select code → Right-click → "Codex: Explain"
5. Keyboard Shortcuts
| Shortcut | Function |
|---|---|
Ctrl+Shift+P → Codex |
Open Codex command palette |
Ctrl+Alt+E |
Edit selected code |
Ctrl+Alt+G |
Generate code |
Ctrl+Alt+R |
Review selected code |
Ctrl+Alt+X |
Explain selected code |
Ctrl+Alt+C |
Open Codex sidebar |
6. Sidebar Panel
The Codex IDE extension provides a sidebar panel similar to the App's conversation window:
- Enter task descriptions
- View execution progress
- Review modifications
- Confirm or reject operations
(1) Editor Integration
TEXT
📖 Display only
1. Enter "Fix type errors in the current file" in the sidebar
2. Codex automatically reads the file open in the editor
3. Displays diff directly in the editor
4. Click Apply to accept changes
7. Configuration
(1) VS Code Settings
JSON
{
"codex.model": "gpt-5-codex",
"codex.sandboxMode": "workspace-write",
"codex.autoApply": false,
"codex.contextFiles": ["AGENTS.md", "tsconfig.json"],
"codex.excludePatterns": ["node_modules/", "dist/"]
}
(2) Auto Context
The IDE extension automatically includes the following context:
| Context Source | Description |
|---|---|
| Open files | Files currently open in the editor |
| Selected text | Code snippets you've selected |
| Workspace structure | Project file tree |
| Diagnostics | Errors and warnings in the editor |
8. IDE vs CLI Comparison
| Dimension | IDE Extension | CLI |
|---|---|---|
| Integration | Deep editor integration | Standalone terminal |
| Context | Auto-acquired (open files, selected code) | Manual addition |
| Visualization | Diff view, inline editing | Text output |
| Automation | Medium | Stronger (Full Auto) |
| Best For | Daily coding, code review | Batch operations, automation scripts |
❓ FAQ
Q Can IDE extension and CLI be used simultaneously?
A Yes, but not recommended on the same project as it may cause file conflicts.
Q Does the IDE extension support offline use?
A No, it requires a connection to the OpenAI API.
Q Does Cursor's built-in AI conflict with the Codex extension?
A No, they operate independently. Cursor AI focuses on code completion, Codex extension focuses on Agent operations.
Q How do I switch models in the IDE?
A Modify
codex.model in VS Code Settings, or switch in the sidebar panel settings.Q Where do I set the IDE extension's approval policy?
A Set
codex.sandboxMode in VS Code Settings, or configure through global config.toml.📖 Summary
- Supports VS Code, Cursor, Windsurf, and other IDEs
- Core features: inline editing, code generation, review, explanation
- Auto context acquisition: open files, selected code, diagnostics
- IDE focuses on coding experience, CLI focuses on automation
- Keyboard shortcuts significantly boost efficiency
📝 Exercises
- Basic (⭐): Install the Codex extension in VS Code, use inline editing to modify code.
- Intermediate (⭐⭐): Use the IDE extension for code review, record issues Codex finds.
- Advanced (⭐⭐⭐): Compare IDE extension and CLI completing the same task, write a comparison report.