Codex in your code editor

Work with Codex beside your website’s code, using the files already open in your editor as context. This walkthrough uses the Codex extension in VS Code, Cursor, or Windsurf to investigate a problem, make a focused edit, and inspect the result.

Before you start

• VS Code, Cursor, or Windsurf with your local website project open. This walkthrough does not cover the separate Xcode or JetBrains integrations.
• The official OpenAI Codex extension, linked from OpenAI’s IDE extension documentation, and a supported Codex sign-in.
• A saved copy or Git checkpoint of your project, including any unfinished edits you want to preserve.
• A small reproducible issue, its page or file, the expected result, and the project’s normal preview and check commands.

Want to do it yourself?

Difficulty

6 out of 10

Estimated completion time

30–60 minutes

Skills you’ll need: Install an editor extension, navigate project files, read a code diff, and run the relevant preview or check.

I’ll do it myselfI’d rather get help

How this helps your brand

Working beside the relevant code can make a website repair easier to scope and inspect. Repeating the original visitor action confirms that the edited link or control now supports the intended journey.

1. 1

   Step 1: Install the official extension and sign in

   Use the install link for your editor in OpenAI’s Codex IDE extension documentation. The VS Code marketplace identifier is openai.chatgpt. Check the publisher and identifier before installing an extension with a similar name.

   Open the Codex icon in the editor. If you cannot see it, open the editor’s Command Palette and run Codex: Open Codex Sidebar. Complete the sign-in flow and return to the editor.

   If your workspace blocks access, confirm the account and workspace with your administrator. The extension cannot bypass the account’s access rules.

2. 2

   Step 2: Open the project and the relevant code

   Open the folder containing the website rather than a single loose file. In a workspace with several roots, select the correct project root for the chat.

   Open the page or component involved in your issue. If you know which function or block matters, select it. The extension can use open files and selections as context, but you should still name the file and the behavior you want checked.

   For example, if the home-page services button points to the contact page, open the file containing that button and identify the destination you expected. Save the file so its contents on disk match what you see.

   Illustrated exampleConnect the project, selection, and question

   Illustrated editor · sample HTML project

   northline-site

   • index.html1
   • services.html
   • contact.html

   2 index.html Saved

   <nav><a href="/contact.html">
Services
</a></nav>

   Selected block: the home-page Services link

   3 Give the sidebar an exact question

   In index.html, explain why “Services” opens Contact. It should open /services.html. Identify the smallest change; do not edit yet.

   1. 1 Correct project folder
   2. 2 Relevant file and selection
   3. 3 Named behavior and destination

3. 3

   Step 3: Ask for an explanation before changing files

   Start with a short request: explain where this button’s destination comes from and identify the smallest change needed; do not edit yet. Ask for file paths and the relevant code so you can verify the answer.

   If Codex refers to a different page, correct the context before continuing. Open the right file, select the relevant block, and restate the route or visible label. A specific correction is more useful than asking it to try again with the same ambiguous context.

4. 4

   Step 4: Request the focused edit

   Once the explanation matches the code, use the prompt below. Give the exact before and after behavior, preserve unrelated edits, and name the check you will use.

   For the button example, ask Codex to change the destination to the project’s existing services route while preserving the label, styling, and other links. Have it verify that the target route actually exists.

   If a needed command or file is unavailable, ask Codex to report the limitation. Review any permission request before allowing more access; do not change the project’s tooling just to make a small link fix.

5. 5

   Step 5: Compare the changed lines with your request

   Inspect the diff beside your code and read the summary. A diff shows lines added and removed; it lets you check that Codex changed the intended link instead of a similar one elsewhere.

   Confirm every affected file has a reason to be in this task. If the change includes a rewrite or unrelated formatting, ask Codex to remove those edits while keeping your existing work.

   Read the test output, including errors. If a test failed before the edit or could not start because a dependency is missing, have Codex report that separately from a failure introduced by the change.

   Illustrated exampleRead the link change, then test its destination

   index.htmlExample diff · one link

   −

   Removed destination<a href="/contact.html">Services</a>

   +

   Added destination<a href="/services.html">Services</a>

   Same “Services” label. No styling or other links changed.

   Then verify the route in the preview

   1. 1Home/index.htmlClick Services
   3. 2Services/services.htmlExpected destination

   Confirm services.html exists, then repeat the click at desktop and phone widths. Check that the separate Contact link still opens Contact.

6. 6

   Step 6: Try the result in the website preview

   Use the project’s documented preview command, or the already running preview for this folder. Repeat the original steps: open the home page, click the services button, and verify the destination.

   Try a nearby link that should remain unchanged. Check the same action at a phone width if it is part of the mobile interface.

   If the issue remains, send the exact page, actions, and observed result back in the same chat. Once the result and the diff agree with the request, save a new checkpoint.

Make a focused change in the project open in this editor.

Relevant file or selection: [file path and code area]
Page: [route]
Reproduction: [what I do]
Current result: [what happens]
Expected result: [what should happen]
Check: [test command or manual steps, if known]

Read the relevant files and confirm the cause. Make the smallest necessary edit, preserve unrelated work, and keep other behavior and styling unchanged. Use the project’s existing tools. Run relevant checks when available and show the changed files, the checks actually run, their results, and anything you could not verify. Do not commit or publish.