Claude Code for Blazor development — building components with AI

Blazor is one of those frameworks where two worlds collide. You’re writing C# logic and HTML markup in the same file, with component parameters, event callbacks, and a render lifecycle that has its own opinions about when things update.

Most AI tools struggle with that mix. They’ll give you React-style advice for a Blazor problem, or generate code that compiles but doesn’t actually render when you expect it to.

Claude Code is different. It reads your .razor files, understands the component hierarchy, and knows the difference between StateHasChanged and InvokeAsync. Let me show you what that looks like in practice.

Building a component from scratch

Say you need a notification banner component. Instead of scaffolding it yourself, you describe what you want:

“Create a Blazor component NotificationBanner that shows a message with a severity level (info, warning, error). It should be dismissible and auto-hide after 5 seconds for info messages.”

Claude Code creates the .razor file:

@if (IsVisible)
{
    <div class="notification-banner @SeverityCss" role="alert">
        <span class="notification-message">@Message</span>
        <button class="notification-close" @onclick="Dismiss">&times;</button>
    </div>
}

@code {
    [Parameter] public string Message { get; set; } = string.Empty;
    [Parameter] public Severity Level { get; set; } = Severity.Info;
    [Parameter] public EventCallback OnDismissed { get; set; }

    private bool IsVisible { get; set; } = true;
    private Timer? _autoHideTimer;

    private string SeverityCss => Level switch
    {
        Severity.Warning => "banner-warning",
        Severity.Error => "banner-error",
        _ => "banner-info"
    };

    protected override void OnParametersSet()
    {
        IsVisible = true;

        if (Level == Severity.Info)
        {
            _autoHideTimer?.Dispose();
            _autoHideTimer = new Timer(_ =>
                InvokeAsync(Dismiss), null, 5000, Timeout.Infinite);
        }
    }

    private async Task Dismiss()
    {
        IsVisible = false;
        _autoHideTimer?.Dispose();
        await OnDismissed.InvokeAsync();
    }

    public void Dispose() => _autoHideTimer?.Dispose();
}

Notice what it got right: InvokeAsync for the timer callback (because it’s not on the render thread), OnParametersSet instead of OnInitialized (so the component reacts to new messages), and proper IDisposable implementation. These are the details that would take you ten minutes of documentation browsing to get right.

Component parameters and cascading values

Where Claude Code really shines is parent-child communication. Blazor’s model with [Parameter], [CascadingParameter], and EventCallback is powerful but verbose. Describe the relationship and Claude Code handles the wiring.

“I need a DataGrid component with a ColumnDefinition child component. The parent should pass the data source, and each column defines how to render a field.”

Claude Code generates the parent:

<CascadingValue Value="this">
    <table class="data-grid">
        <thead>
            <tr>@ChildContent</tr>
        </thead>
        <tbody>
            @foreach (var item in Items)
            {
                <tr>
                    @foreach (var column in _columns)
                    {
                        <td>@column.CellTemplate(item)</td>
                    }
                </tr>
            }
        </tbody>
    </table>
</CascadingValue>

@code {
    [Parameter] public IEnumerable<object> Items { get; set; } = [];
    [Parameter] public RenderFragment? ChildContent { get; set; }

    private readonly List<ColumnDefinition> _columns = [];

    internal void AddColumn(ColumnDefinition column)
    {
        _columns.Add(column);
        StateHasChanged();
    }
}

And the child component that registers itself with the parent:

@code {
    [CascadingParameter] public DataGrid? ParentGrid { get; set; }
    [Parameter] public string Title { get; set; } = string.Empty;
    [Parameter] public RenderFragment<object>? CellTemplate { get; set; }

    protected override void OnInitialized()
    {
        ParentGrid?.AddColumn(this);
    }
}

It knows to use CascadingValue to pass the parent reference down, and it puts the column registration in OnInitialized — not in OnParametersSet, which would cause duplicate registrations on re-renders.

Event handling and state management

Blazor’s event model is one of those areas where Claude Code saves you from subtle bugs. Ask it to build a search component with debounced input:

<input type="text" @oninput="OnSearchInput" placeholder="Search..." />

@if (_isSearching)
{
    <span class="spinner">Searching...</span>
}

@code {
    [Parameter] public EventCallback<string> OnSearch { get; set; }

    private CancellationTokenSource? _debounceToken;
    private bool _isSearching;

    private async Task OnSearchInput(ChangeEventArgs e)
    {
        var query = e.Value?.ToString() ?? string.Empty;

        _debounceToken?.Cancel();
        _debounceToken = new CancellationTokenSource();

        try
        {
            await Task.Delay(300, _debounceToken.Token);
            _isSearching = true;
            StateHasChanged();
            await OnSearch.InvokeAsync(query);
        }
        catch (TaskCanceledException) { }
        finally
        {
            _isSearching = false;
        }
    }
}

It uses @oninput instead of @onchange (so the search fires while typing), adds debouncing with cancellation, and calls StateHasChanged explicitly because the spinner state changes mid-method.

Forms and validation

Building forms in Blazor means EditForm, DataAnnotationsValidator, and a bunch of components that work together. Claude Code handles the full chain.

“Create a contact form with name, email, and message. Email should be validated. Show validation messages inline.”

<EditForm Model="@_model" OnValidSubmit="HandleSubmit">
    <DataAnnotationsValidator />

    <div class="form-group">
        <label for="name">Name</label>
        <InputText id="name" @bind-Value="_model.Name" class="form-control" />
        <ValidationMessage For="@(() => _model.Name)" />
    </div>

    <div class="form-group">
        <label for="email">Email</label>
        <InputText id="email" @bind-Value="_model.Email" class="form-control" />
        <ValidationMessage For="@(() => _model.Email)" />
    </div>

    <div class="form-group">
        <label for="message">Message</label>
        <InputTextArea id="message" @bind-Value="_model.Message" class="form-control" />
        <ValidationMessage For="@(() => _model.Message)" />
    </div>

    <button type="submit" disabled="@_submitting">
        @(_submitting ? "Sending..." : "Send")
    </button>
</EditForm>

@code {
    private ContactFormModel _model = new();
    private bool _submitting;

    private async Task HandleSubmit()
    {
        _submitting = true;
        await ContactService.SubmitAsync(_model);
        _model = new ContactFormModel();
        _submitting = false;
    }
}

It knows to use OnValidSubmit (not OnSubmit), pairs DataAnnotationsValidator with ValidationMessage, and resets the form by assigning a new model instance — which is the Blazor way, not the “clear all fields manually” way.

Extracting reusable components

One of my favorite uses: ask Claude Code to refactor existing pages into reusable components. It reads your page, identifies repeated patterns, and extracts them.

“Look at the admin pages in /Pages/Admin/. Extract common patterns into shared components.”

Claude Code reads all the admin pages, notices that every one has a page header with a title, a breadcrumb, and an action button. It creates a PageHeader.razor component and replaces the duplicated markup across all pages — updating the parameter bindings in each one.

That kind of cross-file refactoring is where having full codebase access matters. A chat-based tool can’t do this because it doesn’t see all the files at once.

Where Claude Code struggles with Blazor

I want to be honest about the limitations.

Render lifecycle edge cases. Claude Code sometimes puts logic in OnInitialized when it should be in OnAfterRender, especially for anything that touches the DOM or requires the component to be fully rendered. If you’re doing JS interop or measuring element sizes, double-check which lifecycle method it picked.

JavaScript interop. Claude Code can write IJSRuntime calls, but it doesn’t always get the JavaScript side right. It might generate a .js file that doesn’t match how you’ve set up your JS modules, or forget that IJSObjectReference needs disposal.

Streaming rendering and enhanced navigation. The newer .NET 8 rendering modes — @rendermode InteractiveServer, StreamRendering, enhanced nav — are still tricky. Claude Code sometimes mixes patterns from different render modes or generates code that assumes full interactivity when you’re in static SSR.

CSS isolation quirks. It knows about .razor.css scoped styles, but occasionally generates selectors that don’t work with Blazor’s scoping mechanism (like targeting child components directly).

None of these are showstoppers. But you need to know where to look twice.

Tips for prompting Claude Code for Blazor work

After months of building Blazor components with Claude Code, here’s what works:

Specify the render mode. Start with “I’m using Interactive Server rendering” or “This is a static SSR page.” It changes the code Claude generates significantly.
Mention your .NET version. Blazor in .NET 6 and .NET 8 are quite different. Say “.NET 8” upfront.
Describe the component tree. “This component will be a child of MainLayout and receive the current user via CascadingParameter” gives Claude Code the context it needs.
Ask for the model class too. When building forms, say “Also generate the model with DataAnnotations.” Otherwise you’ll get a component that references a class that doesn’t exist yet.
Use your CLAUDE.md. Document your component conventions, your CSS framework (Bootstrap? Tailwind?), and your project structure. Claude Code uses this every single time.

Try it yourself

Next time you need a Blazor component, try this:

claude

Describe the component — what it shows, what parameters it takes, how it interacts with its parent. Be specific about the render mode and .NET version. Let Claude Code handle the Razor syntax, the lifecycle methods, and the parameter wiring.

You’ll find that the most tedious part of Blazor development — remembering which lifecycle method to use, getting the event callback signatures right, wiring up cascading parameters — is exactly the part Claude Code handles best.

Building Blazor components with Claude Code? I’d love to hear what patterns work for you. Drop me a message via the contact page.

Building a component from scratch#

Component parameters and cascading values#

Event handling and state management#

Forms and validation#

Extracting reusable components#

Where Claude Code struggles with Blazor#

Tips for prompting Claude Code for Blazor work#

Try it yourself#