Handling Structural Changes

In the previous lessons, you learned how to use Codex to make local code changes in an Express project. You practiced writing clear prompts to update code in a single file or make small adjustments. Now, let's take the next step and look at how to handle more complex updates — those that require changes across multiple files and settings.

These types of changes are called structural changes. For example, extracting inline CSS from an HTML file into a separate stylesheet is not just a single edit. It involves creating a new CSS file, configuring static file serving, and making sure everything is connected properly. In this lesson, we will explore a reliable approach to handle such tasks with Codex.

When you need an LLM to perform a complex task, it's easy to miss a step if you try to do everything at once. This is where the generation knowledge approach comes in. The process has three critical steps:

1. Generate: Ask the LLM to generate information and a plan related to the task
2. Validate: Review and verify the AI's proposed plan before execution (critical!)
3. Execute: Send the actual request to implement the validated plan

This three-step method improves the model's performance, gives you validation checkpoints, and allows you to make adjustments or request clarifications before any code changes are made.

Let's see how this works in practice.

Suppose you want to extract CSS from public/index.html into a separate file at public/css/style.css in your Express project. Before you ask Codex to make any changes, you should first find out what steps are needed.

You can start by asking Codex a question like this:

Which changes are typically required to extract inline CSS from an HTML file into a separate CSS file in an Express project with static file serving?

Codex will usually respond with a list of steps, such as:

• Creating a css directory in your public folder.
• Moving the CSS rules from <style> tags into a separate .css file.
• Adding a <link> tag in the HTML to reference the external stylesheet.
• Ensuring express.static is configured to serve files from the public directory.

By asking for this information first, you make sure you understand the full scope of the task. This also helps Codex avoid missing any important steps.

Before you proceed to execute the changes, you must validate the AI's proposed plan. This is a crucial skill in agentic workflows that is often overlooked. The AI is a powerful assistant, but it can make mistakes or miss important project-specific details.

Here's how to validate the plan effectively:

1. Review Each Step for Completeness

Check if the AI's plan covers all necessary actions. Ask yourself:

• Are all required files mentioned?
• Does the plan account for both creating new files and modifying existing ones?
• Are there any dependencies or configurations that might be missed?

2. Verify Against Your Project Structure

Compare the AI's suggestions with your actual project:

• Do the file paths match your project's organization?
• Is the AI assuming a structure that differs from yours?
• Are there project-specific conventions the AI might not know about?

3. Identify Potential Issues

Look for common problems:

• Missing steps (e.g., forgetting to update imports or configuration)
• Incorrect assumptions (e.g., assuming a file exists when it doesn't)
• Order dependencies (e.g., trying to use a file before creating it)

4. Ask Follow-Up Questions if Needed

If something in the plan is unclear or seems wrong, ask for clarification:

Your plan mentions updating express.static configuration, but in this project it's already configured in src/main.ts. Can you confirm whether any changes are needed there, or should we proceed with just the CSS extraction?

5. Adjust the Plan Before Execution

Based on your review, you may need to:

• Add missing steps to your execution prompt
• Correct file paths or assumptions
• Provide additional context the AI needs

Example of Validation in Action

Let's say the AI's plan includes: "Configure express.static to serve the public directory."

You should check:

• ✅ Is express.static already configured? (In our project, yes!)
• ✅ Does the AI need to know this? (Yes, to avoid unnecessary changes)
• ✅ Should I clarify this in my execution prompt? (Absolutely!)

This validation step transforms you from a passive consumer of AI output into an active engineering partner, which is essential for reliable results.

Now that you've reviewed and validated the plan, you can ask Codex to perform the actual changes. Notice how the prompt includes clarifications based on our validation:

Extract all styles from public/index.html into public/css/style.css. Update the HTML file to link to the external stylesheet. The Express server already serves static files from the public directory, so no server configuration changes are needed.

Let's break down what happens here:

• You are telling Codex exactly what you want: Move the CSS out of the HTML and into a separate file.
• You are also telling Codex where to put the CSS file and how to update the HTML.
• You mention that static file serving is already configured, so Codex doesn't need to modify server configuration.

By following this three-step approach, you make sure that all necessary changes are made and nothing is left out.

The biggest bottleneck problem with Codex is exploring the entire project structure. It can "think" for up to 10 minutes, trying to figure out all the details. When making local changes, we guided it with the exact location of the change. It is much more complicated with structural changes. However, we can utilize the generation knowledge approach here as well. Here is an example of how you can make Codex work faster:

Step 1: Ask Codex to generate general knowledge about the topic.

Explain the general approach of serving static CSS files in an Express project

Step 2: Ask Codex to prepare an action plan. Provide it with context. For example:

Based on this, suggest an action plan for extracting inline CSS from public/index.html into a separate CSS file in an Express project where express.static is already configured for the public directory

Step 3: Send an actual request to Codex. Be specific. For instance:

Now, extract all CSS from the <style> tag in public/index.html and move it to public/css/style.css. Update public/index.html to link to the external stylesheet with a <link> tag. The server already serves static files from public/. Don't waste time exploring the project structure.

Such specific requests will make Codex work much faster. However, this approach requires a good understanding of the project's structure and the framework. If you are not sure which details to specify, you can always go with a slower method, letting Codex explore the files and make decisions. Don't forget to read its explanations to obtain a clear context!

In this lesson, you learned how to use the generation knowledge approach to handle structural changes in your Express project with Codex. This is actually a three-step process:

1. Generate the plan: Ask Codex to list all the steps required for your task
2. Validate the plan: Review, verify, and adjust the AI's proposed steps based on your project knowledge
3. Execute with precision: Use that validated information to guide your prompt for making the actual changes

The validation step is critical—it transforms you from a passive consumer of AI output into an active engineering partner. By catching potential issues before execution, you ensure more reliable results and build your understanding of both the AI's capabilities and limitations.

This method helps you manage complex updates with confidence and accuracy, knowing that you've verified each step before proceeding.

You are now ready to practice this approach in the exercises that follow. Try using generation knowledge with proper validation for different types of structural changes and see how it helps you work more effectively with Codex.