Skip to main content

​
Overview

The Intent.AI.Blazor module enables AI-powered implementation of Blazor UI components using pre-engineered prompt templates. This module leverages Large Language Models (LLMs) to generate production-ready Blazor views based on your application’s domain models, service contracts, and existing component patterns. Instead of manually writing repetitive CRUD UI code, you model your pages in the UI Designer and let AI generate complete component implementations following best practices.
To use this feature, ensure that the required User Settings have been completed — including a valid API key for your selected AI provider.
For a comprehensive tutorial on using this module to build Blazor UIs, see Blazor UI Modeling with AI.

​
What Gets Generated

​
Pre-Engineered UI Templates

The module provides six specialized prompt templates optimized for common MudBlazor patterns:

Search Entity

List/grid views with filtering, sorting, pagination, and search functionality.

Add Entity

Create forms for new records with validation and submission handling.

Edit Entity

Update forms for existing records with data loading and save operations.

View Entity

Read-only detail views displaying entity information.

Add Entity Dialog

Modal dialogs for creating records inline.

Edit Entity Dialog

Modal dialogs for updating records inline.

​
Complete Blazor Components

The AI generates:
  • Complete .razor view files with MudBlazor components
  • Form layouts with proper validation
  • Data tables with sorting, filtering, and pagination
  • Navigation logic between pages
  • Dialog handling for modals
  • Loading states and error handling
  • Proper data binding to ViewModels
Example generated search page:
Pages/Customers/CustomerSearch.razor
@page "/customers"
@inherits CustomerSearchBase

<MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="pa-4">
    <MudText Typo="Typo.h4" Class="mb-4">Customers</MudText>

    <MudCard>
        <MudCardContent>
            <MudGrid>
                <MudItem xs="12" md="6">
                    <MudTextField @bind-Value="SearchTerm" 
                                  Label="Search" 
                                  Variant="Variant.Outlined"
                                  Adornment="Adornment.End"
                                  AdornmentIcon="@Icons.Material.Filled.Search"
                                  OnKeyDown="HandleSearchKeyDown" />
                </MudItem>
                <MudItem xs="12" md="6" Class="d-flex align-end">
                    <MudButton Variant="Variant.Filled" 
                               Color="Color.Primary"
                               StartIcon="@Icons.Material.Filled.Add"
                               OnClick="NavigateToAddCustomer">
                        Add Customer
                    </MudButton>
                </MudItem>
            </MudGrid>
        </MudCardContent>
    </MudCard>

    <MudTable @ref="_table"
              Items="@Customers"
              Loading="@IsLoading"
              Class="mt-4"
              Hover="true"
              Breakpoint="Breakpoint.Sm">
        <HeaderContent>
            <MudTh>Name</MudTh>
            <MudTh>Email</MudTh>
            <MudTh>Phone</MudTh>
            <MudTh>Actions</MudTh>
        </HeaderContent>
        <RowTemplate>
            <MudTd DataLabel="Name">@context.Name</MudTd>
            <MudTd DataLabel="Email">@context.Email</MudTd>
            <MudTd DataLabel="Phone">@context.PhoneNumber</MudTd>
            <MudTd DataLabel="Actions">
                <MudIconButton Icon="@Icons.Material.Filled.Edit"
                               Color="Color.Primary"
                               OnClick="() => NavigateToEditCustomer(context.Id)" />
                <MudIconButton Icon="@Icons.Material.Filled.Delete"
                               Color="Color.Error"
                               OnClick="() => DeleteCustomer(context.Id)" />
            </MudTd>
        </RowTemplate>
        <PagerContent>
            <MudTablePager PageSizeOptions="new int[] { 10, 25, 50, 100 }" />
        </PagerContent>
    </MudTable>
</MudContainer>

​
Installation

​
Prerequisites

  • An Intent Architect Blazor application
  • The Intent.Blazor and Intent.Blazor.Components.MudBlazor modules installed
  • An AI provider account (OpenAI, Azure OpenAI, or Anthropic)
  • Valid API key configured in User Settings

​
Installation Steps

1

Install Blazor modules

Ensure you have the base Blazor modules installed: Intent.Blazor and Intent.Blazor.Components.MudBlazor.
2

Install Intent.AI.Blazor

In Intent Architect, right-click on your application and select Manage Modules. Search for Intent.AI.Blazor and install it.
3

Configure AI provider

Go to Tools → User Settings → AI Configuration and enter your API key.
4

Model your UI

Use the UI Designer to create pages and components.
5

Run the Software Factory

Generate the ViewModels (.razor.cs files).

​
Usage

​
Basic Workflow

1

Model your UI Component

In the UI Designer, create a Page or Dialog component. Use descriptive names like CustomerSearch, AddCustomer, EditOrder.
2

Connect to backend services

Use “Call Backend Service” to connect your component to Commands/Queries.
3

Run the Software Factory

Execute the Software Factory to generate the ViewModel (.razor.cs file).
4

Implement with AI

Right-click on the Component in the UI Designer and select Implement with AI.Implement with AI Dialog
5

Review and apply changes

The AI will generate the .razor view file. Review the diff and apply the changes.

​
Influencing Factors

The quality and relevance of generated UI code depend on several factors:

​
Intent Modeling

Before using Implement with AI, ensure:
  • Generated Code is up-to-date: Run the Software Factory to apply all outstanding code changes
  • Component naming follows conventions: Use descriptive names like CustomerSearch, AddCustomer, EditOrder that indicate the component’s purpose
  • Service interactions are modeled: Use “Call Backend Service” to connect to Commands/Queries
  • Navigations are defined: Model navigation operations and dialog invocations
  • Data contracts exist: Ensure DTOs are properly defined for form bindings

​
Choosing the Right Template

The AI automatically selects a template based on your component name and structure, but you can guide it:
Component PatternTemplateUse Case
*Search, *ListSearch EntitySearchable, paginated lists
Add*, Create*Add EntityFull-page create forms
Edit*, Update*Edit EntityFull-page edit forms
View*, Details*View EntityRead-only detail pages
Add*DialogAdd Entity DialogModal create forms
Edit*DialogEdit Entity DialogModal edit forms

​
Examples

​
Customer Search Page

Modeled Component:
  • Component Name: CustomerSearch
  • Route: /customers
  • Service Call: GetAllCustomersQuery
  • Navigation: To EditCustomer page
AI-Generated View:
Pages/Customers/CustomerSearch.razor
@page "/customers"
@inherits CustomerSearchBase

<MudContainer MaxWidth="MaxWidth.ExtraLarge">
    <MudText Typo="Typo.h3" Class="mb-4">Customers</MudText>

    <MudPaper Class="pa-4 mb-4">
        <MudGrid>
            <MudItem xs="12" md="8">
                <MudTextField @bind-Value="SearchTerm"
                              Label="Search customers"
                              Variant="Variant.Outlined"
                              Adornment="Adornment.End"
                              AdornmentIcon="@Icons.Material.Filled.Search"
                              DebounceInterval="300"
                              OnDebounceIntervalElapsed="SearchCustomers" />
            </MudItem>
            <MudItem xs="12" md="4" Class="d-flex align-end justify-end">
                <MudButton Variant="Variant.Filled"
                           Color="Color.Primary"
                           StartIcon="@Icons.Material.Filled.Add"
                           Href="/customers/add">
                    Add Customer
                </MudButton>
            </MudItem>
        </MudGrid>
    </MudPaper>

    @if (IsLoading)
    {
        <MudProgressCircular Indeterminate="true" />
    }
    else
    {
        <MudDataGrid Items="@Customers"
                     Sortable="true"
                     Filterable="true"
                     Dense="true">
            <Columns>
                <PropertyColumn Property="x => x.Name" Title="Name" />
                <PropertyColumn Property="x => x.Email" Title="Email" />
                <PropertyColumn Property="x => x.PhoneNumber" Title="Phone" />
                <TemplateColumn Title="Actions">
                    <CellTemplate>
                        <MudIconButton Icon="@Icons.Material.Filled.Edit"
                                       Size="Size.Small"
                                       Href="@($"/customers/edit/{context.Item.Id}")" />
                        <MudIconButton Icon="@Icons.Material.Filled.Delete"
                                       Size="Size.Small"
                                       Color="Color.Error"
                                       OnClick="() => DeleteCustomerAsync(context.Item.Id)" />
                    </CellTemplate>
                </TemplateColumn>
            </Columns>
            <PagerContent>
                <MudDataGridPager T="CustomerDto" />
            </PagerContent>
        </MudDataGrid>
    }
</MudContainer>

​
Add Customer Form

Modeled Component:
  • Component Name: AddCustomer
  • Route: /customers/add
  • Service Call: CreateCustomerCommand
  • Navigation: Back to CustomerSearch on success
AI-Generated View:
Pages/Customers/AddCustomer.razor
@page "/customers/add"
@inherits AddCustomerBase

<MudContainer MaxWidth="MaxWidth.Medium">
    <MudText Typo="Typo.h3" Class="mb-4">Add Customer</MudText>

    <MudPaper Class="pa-4">
        <EditForm Model="@Model" OnValidSubmit="SubmitAsync">
            <DataAnnotationsValidator />
            <MudGrid>
                <MudItem xs="12">
                    <MudTextField @bind-Value="Model.Name"
                                  Label="Name"
                                  For="@(() => Model.Name)"
                                  Variant="Variant.Outlined"
                                  Required="true" />
                </MudItem>
                
                <MudItem xs="12" md="6">
                    <MudTextField @bind-Value="Model.Email"
                                  Label="Email"
                                  For="@(() => Model.Email)"
                                  Variant="Variant.Outlined"
                                  InputType="InputType.Email"
                                  Required="true" />
                </MudItem>
                
                <MudItem xs="12" md="6">
                    <MudTextField @bind-Value="Model.PhoneNumber"
                                  Label="Phone Number"
                                  For="@(() => Model.PhoneNumber)"
                                  Variant="Variant.Outlined" />
                </MudItem>
                
                <MudItem xs="12">
                    <MudTextField @bind-Value="Model.Address"
                                  Label="Address"
                                  For="@(() => Model.Address)"
                                  Variant="Variant.Outlined"
                                  Lines="3" />
                </MudItem>

                <MudItem xs="12" Class="d-flex justify-space-between">
                    <MudButton Variant="Variant.Outlined"
                               OnClick="Cancel">
                        Cancel
                    </MudButton>
                    <MudButton Variant="Variant.Filled"
                               Color="Color.Primary"
                               ButtonType="ButtonType.Submit"
                               Disabled="@IsSubmitting">
                        @if (IsSubmitting)
                        {
                            <MudProgressCircular Size="Size.Small" Indeterminate="true" />
                            <MudText Class="ms-2">Saving...</MudText>
                        }
                        else
                        {
                            <MudText>Create Customer</MudText>
                        }
                    </MudButton>
                </MudItem>
            </MudGrid>
        </EditForm>
    </MudPaper>
</MudContainer>

​
Edit Order Dialog

Modeled Component:
  • Component Name: EditOrderDialog
  • Type: Dialog
  • Service Calls: GetOrderByIdQuery, UpdateOrderCommand
AI-Generated View:
Dialogs/Orders/EditOrderDialog.razor
@inherits EditOrderDialogBase

<MudDialog>
    <DialogContent>
        @if (IsLoading)
        {
            <MudProgressCircular Indeterminate="true" />
        }
        else
        {
            <EditForm Model="@Model" OnValidSubmit="SubmitAsync">
                <DataAnnotationsValidator />
                <MudGrid>
                    <MudItem xs="12">
                        <MudSelect @bind-Value="Model.Status"
                                   Label="Order Status"
                                   Variant="Variant.Outlined"
                                   Required="true">
                            @foreach (var status in Enum.GetValues<OrderStatus>())
                            {
                                <MudSelectItem Value="@status">@status.ToString()</MudSelectItem>
                            }
                        </MudSelect>
                    </MudItem>

                    <MudItem xs="12">
                        <MudDatePicker @bind-Date="Model.DeliveryDate"
                                       Label="Delivery Date"
                                       Variant="Variant.Outlined" />
                    </MudItem>

                    <MudItem xs="12">
                        <MudTextField @bind-Value="Model.Notes"
                                      Label="Notes"
                                      Variant="Variant.Outlined"
                                      Lines="4" />
                    </MudItem>
                </MudGrid>
            </EditForm>
        }
    </DialogContent>
    <DialogActions>
        <MudButton OnClick="Cancel">Cancel</MudButton>
        <MudButton Color="Color.Primary"
                   OnClick="SubmitAsync"
                   Disabled="@IsSubmitting">
            Save Changes
        </MudButton>
    </DialogActions>
</MudDialog>

​
Customizing Prompt Templates

You can extend or replace the built-in templates to support different component libraries or patterns. The module uses a template system that can be customized in your Intent Architect installation.
Custom prompt template creation is an advanced topic. Contact Intent Architect support for guidance on creating custom templates for other component libraries like Blazorise or Bootstrap.

​
Best Practices

Descriptive Naming

Use clear component names that indicate purpose: CustomerSearch, AddOrder, EditProductDialog.

Model Backend Calls

Define service interactions in the UI Designer before generating components.

Review Generated Code

AI-generated components should be reviewed for UX best practices and accessibility.

Iterate with Feedback

Regenerate components with custom prompts to refine the UI implementation.

​
Integration with Other Modules

Blazor Core

Requires Intent.Blazor for base infrastructure.

MudBlazor Components

Uses Intent.Blazor.Components.MudBlazor for UI controls.

AI Auto Implementation

Generate backend handlers to support the UI.

HTTP Clients

Generated components call APIs through HTTP client proxies.

​
Next Steps

Auto Implementation

Generate backend logic for your UI

Authentication

Add user authentication to your Blazor app

Form Validation

Implement FluentValidation for forms

Build docs developers (and LLMs) love

Get started for freeTalk to us