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


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:

(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


📝 Exercises

  1. Basic (⭐): Install the Codex extension in VS Code, use inline editing to modify code.
  2. Intermediate (⭐⭐): Use the IDE extension for code review, record issues Codex finds.
  3. Advanced (⭐⭐⭐): Compare IDE extension and CLI completing the same task, write a comparison report.
Web-Tutorial.com

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

100%

🙏 帮我们做得更好

我们是刚上线的编程教程站,几个人的小团队,精力有限。页面虽经检查,难免还有疏漏——链接失效、排版错乱、内容有误、语言生硬……

如果您发现了,麻烦告诉我们,我们会在收到反馈后第一时间进行修复,再次感谢您的光临 🙏