From Prompt to Production: Building a Blazor Component with GenAI

When you're knee-deep in a legacy application modernization project, you know the real grind often comes after the code has been transformed. That’s when software engineers need to build, refine, and connect components that breathe life into the newly modernized platform. Recently, one of our engineers ran a fascinating experiment to see how much faster and smoother that post-migration effort could be with a little help from Generative AI.

Spoiler: it was fast, but more importantly, it was precise and secure thanks to our hybrid AI approach.

The Challenge: Post-Migration UI Logic at Speed

The task was simple on paper: Implement a TreeView component in Blazor using Telerik Kendo UI. Requirements included multi-select checkboxes, expand/collapse controls, right-click context menus, all synced with backend logic from our freshly migrated .NET app.

We gave the same prompt to GitHub Copilot, Claude, and ChatGPT:

"Generate a TreeView in Blazor using Telerik that has checkboxes with multiple selection. When I check a parent, I want all children to be checked. I want buttons for 'Collapse All' and 'Expand All'. I want to right-click a parent and have a menu with the options 'Collapse All' and 'Expand All' for the children."

Then we compared how each AI performed and how our engineer took the best bits and made it production-ready.

The Results: A Tale of Three AI Assistants

2. Claude.ai did a better job but still lacked some required features.

3. ChatGPT produced the most complete version — functional, though with minor errors (that were easily fixed with follow-up prompts).

This wasn’t a plug-and-play solution, and that’s exactly the point.

Our engineer used ChatGPT’s code as a base, guided Copilot with comments like “expand the clicked item and all its children”, and let it autocomplete backend logic. Along the way, manual oversight and debugging were essential.

How the TreeView Component Was Built Using AI Tools

After reviewing the outputs from Copilot, Claude, and ChatGPT, our engineer selected the most complete version from ChatGPT and used it as a starting point. From there, she made targeted updates to refine the component and integrate it with our modernized .NET backend.

To address some UI limitations, she asked ChatGPT to modify the structure of the context menu, replacing <TelerikContextMenuItem> with a data-driven approach and adjusting the onClick behavior using lambda functions. This made the menu more dynamic and easier to connect with backend actions.

Once the frontend was functional, she turned to GitHub Copilot to generate additional logic using inline comments. For example, adding a comment like // Expand the clicked item and all its children prompted Copilot to write the recursive expansion function. The engineer validated the output and made minor adjustments to ensure correctness.

To integrate the component with backend logic, she used Cursor and Copilot Agent in VS Code. The AI was prompted to replace the temporary TreeItem class with the existing TreeNode model from our migrated codebase. Cursor made this replacement and suggested updates across related files, including namespace changes and data model updates. These suggestions were reviewed and selectively applied.

The engineer then moved the frontend state variables like CheckedItems and ExpandedItems into the shared TreeView model. This allowed frontend and backend components to use the same data structures, improving consistency and maintainability.

During testing, Copilot was also used to add a “Clear All” button and to troubleshoot issues with background color rendering and node selection logic. When challenges arose with expand/collapse behavior, the AI-generated functions were adapted to ensure that nested child nodes expanded as expected.

Finally, the TreeView was tested with real backend data. The engineer used Copilot to identify the correct method to retrieve the application’s startup path, enabling the TreeView to load nodes from a file at runtime.

The result was a functional, integrated TreeView component that handled dynamic node expansion, multi-select checkboxes, and right-click menus, all working as part of a production .NET application.

The Secret Sauce: Deterministic Core + GenAI Assist

This experiment reflects exactly how we approach AI in modernization at GAP:

• Our Deterministic AI handles the heavy lifting during core migration; transforming VB6, C++, or PowerBuilder into modern .NET code with precision, transparency, and explainability.
• Our Generative AI is used before and after migration, helping developers generate components, test data, and documentation.

In this case, our engineer integrated the AI-generated TreeView with the backend by:

1. Replacing the temporary TreeItem class with our existing TreeNode model.
2. Refactoring data models using Cursor and Copilot Agent in VS Code.
3. Moving frontend state into shared models, and letting Copilot handle context-aware suggestions.

All of this while retaining full control and visibility over what was being committed to the codebase.

The Outcome: From Prompt to Production in Record Time

By combining ChatGPT, Copilot, and Cursor with human oversight along the way, we delivered a fully functional and integrated TreeView component significantly faster than with traditional hand-coding.

The right-click context menu? ✅
Expand/collapse logic? ✅
Tested and deployed in a modernized .NET app? ✅✅✅

Why This Matters

This experiment isn’t about one UI component. It’s a blueprint for how GenAI can:

• Accelerate post-migration development,
• Increase throughput without compromising quality,
• Empower engineers with meaningful, guided automation.

In other words: more value, increased velocity, and less risk.

Final Thoughts

At GAPVelocity AI, we believe in hybrid AI for real-world modernization. We modernize mission-critical applications with deterministic precision and amplify developer output with generative intelligence, all within enterprise-grade security standards.

If you’re modernizing without AI, you're moving slow.
If you're using GenAI without guardrails, you're moving blindly.
With our hybrid approach, you're moving faster and smarter.

Let’s build the next generation of software together: one modernized app (and component) at a time.