Building a ToDo App with the VS Code Agent: A HandsOn Guide

This article demonstrates how to use the VS Code Agent to create a simple todo application directly within the VS Code IDE. The agent acts as a virtual developer, interpreting instructions and generating code. This tutorial covers the entire process, from setting up the environment to making adjustments based on the agent's output.

Activating the VS Code Agent

Before you begin, ensure the VS Code Agent is activated. It might not be active by default for all users. Here's how to enable it:

1. Open User Settings (Ctrl+, or Cmd+,).
2. Search for "Agent".
3. Ensure the relevant Agent option is ticked. This is crucial for the agent to function.

You may need to restart VS Code for the changes to take effect.

Creating the Solution Structure

Once the agent is active, initiate a chat and ask it to create the solution structure for the todo app. For example:

Create a solution structure for me: .NET solution called 'Sample', backend project for the web API, client which is a blazer vasim, and shared.

The agent will then confirm the structure and create the necessary folders and project files. Note that the agent will confirm steps before executing, simulating a real developer interaction.

Defining the Entity

Next, instruct the agent to create the todo entity. The agent is intelligent enough to understand where to create the entity, based on the structure previously defined.

Create the todo entity.

The agent will create a class (initially named 'Class1') in the shared project. You can then instruct the agent to rename the class:

Change the name of class one to the respected name.

Building the Backend Web API

Now, ask the agent to generate the .NET 8 minimal API for the backend.

I need .net 8 minimal API for the backend web API. I do not need open AI. Please make sure you are not going to create entity again. You have shared project.

The importance of specifying constraints, such as avoiding the creation of a duplicate entity and excluding specific technologies (like OpenAI), is emphasized.

Customizing the Blazer UI

The agent might automatically generate some UI elements, even without explicit instructions. This may include Razor pages and other components.

For example, to remove the default sidebar:

I do not want to have sidebar inside my todo UI. Please remove it.

Remember not to click 'Done' while the agent is still actively making changes.

Addressing Base URL Issues

Ensure the base URL is correctly defined in the client project.

Base URL should be defined in the client project also. Please check.

Using Fetch and Follow Feature (C# 14)

The article attempts to use the 'Fetch and Follow' feature to create an extension method compatible with the latest C# version (C# 14). This allows the agent to retrieve and apply the latest changes relevant to the specified C# version.

Example:

I need an extension method but in C sharp 14. So sharp fetch like this and follow this new way. Then I need an extension method to check the date or created date before 2010. And also add a flag to the entity to change it to false if the date is before 2010.

The extension method is generated but later removed due to compilation issues. This showcases how the agent can adapt to problems that arise during the development process.

Resolving Compilation Errors

The article addresses compilation errors encountered during the build process. The agent can be instructed to remove problematic code, acting as a collaborator in debugging.

For example, to remove a problematic extension method:

Forget this extension method. Remove it not to use it at all.

Remove the extension method file for good.

Conclusion

This tutorial demonstrates the power and potential of the VS Code Agent in accelerating application development. By understanding how to effectively communicate with the agent and address issues that arise, developers can leverage this tool to significantly improve their productivity. The final application is compiled successfully, showcasing the agent's ability to guide the development process from start to finish.