Experimenting with AI to Generate a Vertical Slice Folder Structure in a Blazor App

Today, I set out to generate a Vertical Slice Architecture (VSA) folder structure inside a default Blazor template using AI tools. I ran this experiment inside Visual Studio 2022 using Copilot in Agent Mode. My goal was to automate the restructuring of a Blazor app into a cleaner, feature-based format aligned with the VSA pattern.

Attempt 1 – Claude 3.7

I began by prompting Claude 3.7. Unfortunately, the results were underwhelming. Despite giving a detailed prompt, it added the MediatR NuGet package—something I never asked for—and failed to restructure the file layout at all. It completely ignored the organizational aspects and made assumptions about architecture that weren’t part of the task.

Attempt 2 – Gemini 2.5

Next, I gave Gemini 2.5 a try. This attempt ended abruptly with an error—it didn’t return anything meaningful. At this point, I was beginning to wonder if AI was the right approach for this task.

Attempt 3 – ChatGPT 4.0

Then I tried ChatGPT 4.0. It didn’t modify anything automatically, but it did provide clear manual instructions on how to refactor the structure based on vertical slice principles. While not what I originally wanted, this was at least a helpful step forward.

Here’s the initial prompt I used:

Situation
You are working with a Blazor software project that needs to be restructured from its current architecture into a vertical slice architecture pattern. Vertical slice architecture organizes code by feature rather than by technical layer, where each feature contains all the necessary components (Razor components, commands, handlers, view models, etc.) to handle complete user scenarios from end to end.

Task
Analyze the provided project structure and create a comprehensive restructuring plan that transforms it into a proper vertical slice architecture format specifically for Blazor applications. Provide detailed folder structures, file organization recommendations, and implementation guidance for each feature slice, ensuring all Blazor-specific components are properly organized within each slice.

Objective
Transform the existing project structure into a maintainable, scalable vertical slice architecture that promotes feature cohesion, reduces coupling between features, and enables independent development and deployment of individual features while following Blazor best practices and conventions.

Knowledge
The current project structure to be restructured is:

C#
YourApp/
├── Features/
│   ├── UserManagement/
│   │   ├── CreateUser/
│   │   ├── EditUser/
│   │   └── ListUsers/
│   ├── BlogPosts/
│   │   ├── CreatePost/
│   │   ├── EditPost/
│   │   └── ViewPost/
│   └── Authentication/
│       ├── Login/
│       └── Register/
└── Shared/
    └── Infrastructure/

Each slice should follow the CQRS pattern where applicable and include:

C#
Features/
└── BlogPosts/
    └── CreatePost/
        ├── CreatePost.razor        # UI Component
        ├── CreatePostCommand.cs    # Command object
        ├── CreatePostHandler.cs    # Command handler
        └── CreatePostViewModel.cs  # View model

Shared components should contain only truly cross-cutting concerns like layouts, infrastructure services, or utility classes.

Iterating on the Prompt with ChatGPT

At this point, I decided to go meta and ask ChatGPT to write a better prompt for me. After some refinement, I went back to Visual Studio and switched to Claude 3.5. This time, the agent performed much better—it successfully converted most of the folder structure into vertical slices. However, some Razor components were left behind in a generic Components folder, which wasn't ideal.

I updated the prompt to ask it to clean up remaining files, but as the process ran, it eventually stalled. Visual Studio became unresponsive, and I had to force-close it.

Here’s the refined prompt I used:

Prompt
You are a senior software architect specializing in Blazor and modern project structures.
Restructure the following Blazor project folders into a clean Vertical Slice Architecture format.
For each feature (e.g., Weather, Counter), create its own slice that includes all relevant UI components, logic, and assets.
Shared items like layouts and infrastructure should be moved into clearly named Shared or Core folders.
Return the new folder structure with brief comments where needed to explain the purpose of each folder.

Original structure:

C#
├── Features/
│   ├── Weather/
│   │   ├── Weather.razor
│   ├── Counter/
│   │   ├── Counter.razor/
└── Shared/
    └── Layout/
        ├── NavMenu
    ├── MainLayout.razor
    ├── Infrastructure/
    ├── Error.razor
    ├── App.razor
    ├── Routes.razor

Moral of the Story

The key takeaway so far is that doing it by hand is still faster and more reliable, at least for now. AI can guide you and even automate parts of the process, but it often lacks the context to restructure a full Blazor project correctly and consistently.

Creating a Project Template (Finally Some Good News)

The final step was to try using AI to create a project template from the solution. That also failed.

So I asked ChatGPT: Can I create a project template from an existing project inside Visual Studio 2022?

The answer was simple and, thankfully, accurate:

How to Export a Project Template in Visual Studio 2022:

  1. Open your solution in Visual Studio.

  2. In Solution Explorer, right-click the project you want to export.

  3. Select Project > Export Template…

  4. Follow the wizard and choose your options.

This worked beautifully. In less than 30 seconds, I had a reusable project template with my Vertical Slice Architecture already in place. I can now start future Blazor projects with this structure without having to rebuild it from scratch every time.

Final Thoughts

The biggest lesson from this experiment: AI is not always the best answer. It’s a powerful tool, but not a replacement for human judgment or experience. You need to know when to use it, how to guide it, and when to fall back on doing the job manually.

For tasks that require precision, context-awareness, and architectural decision-making—like restructuring a codebase—AI still has a long way to go. That said, it’s still valuable for scaffolding, prompting ideas, and providing repeatable solutions once a good pattern is established.


[Source Code]

Comments

Post a Comment

Popular posts from this blog

Yes, Blazor Server can scale!

Image
From the very beginning of the release of Blazor Server naysayers have incorrectly stated that Blazor Server can not scale.  They usually state that the limit is 5,000 concurrent users. There are several misconceptions and wrong assumptions about their statement.  Let's break it down and get a better understanding of Blazor server-side scaling. What is the "limit" for users When Microsoft talks about the need to scale an application, what they are saying is that when a normal response for any concurrent user is taking longer than 200 ms, the system is not performant and needs to scale. We will accept that definition: If any normal user response is taking longer than 200 ms, the system needs to scale for concurrent users. By a normal response, we are referring to a page get, a post, etc.  Large database access requests would not be included in this measurement. What is scaling There are 2 common ways to scale, scale, out horizontally, and scale-up, up vertically. In our di...
Read more

Blazor - Displaying an Image

I wanted to be able to display an image file within a Blazor page.  During my research I realized that there is very little difference between displaying an image in Blazor as compared to displaying it in a HTML page.  So, I decided to add a couple of other features to my application.   The features I have added are:   1. Get a list of files on the server   2. Display at list in a Blazor page   3. Provide a UI effect to zoom in on the image   I will be using the Blazor Server configuration for this application.  We can do this with the Client-side configuration, but you need an API to access the server files.  I have created a folder under WWWROOT called DsiplayImages where I have placed several images I will be working with.  I have created a service that will access the image files from the server.  In addition, I have created a model for the file properties I a need.   ...
Read more

Offline-First Strategy with Blazor PWAs: A Complete Guide 🚀

Image
One of the most powerful features of Progressive Web Apps (PWAs) is their ability to function seamlessly even when offline. For users, this means uninterrupted access to critical features regardless of network conditions. For developers, adopting an offline-first strategy ensures a robust, user-friendly experience while aligning with modern web development best practices. Blazor, Microsoft’s modern web framework, simplifies building PWAs with offline capabilities by leveraging features like service workers, caching, and IndexedDB. In this guide, we’ll dive into how you can implement an offline-first strategy in your Blazor PWA. Why Offline-First Matters An offline-first strategy doesn’t just improve user experience—it also provides: Reliability : Apps remain functional even with intermittent or no connectivity. Performance : Cached assets load faster, improving responsiveness. Engagement : Users can interact with the app at any time, enhancing retention and trust. Key Components of Of...
Read more