I Love .NET Blazor. Now It Can Build Agentic UI, Not Just Chat Boxes

Introduction

I love Blazor so much. I have used it to build more than 10 projects this year. One thing I enjoy is that I can build interactive web applications with C#. I can reuse familiar types, validation rules, and components instead of switching languages for every part of the application. So I am happy to see Blazor keep improving, especially for the AI era. Recently, I read Daniel Roth's Microsoft article, Build Agentic UI with the new Blazor AI components. My first thought was: "Nice. But can we build something more useful than another chat box?" A chat box is useful. However, many applications need more than text replies. We want the AI to show a tool result as a card. We want it to understand the document we are editing. We want it to suggest changes without quietly replacing our work. And before it performs an important action, we want a real approval button. That is the idea behind Agentic UI. In this article, I will explain the new Blazor AI building blocks through a single Blazor demo application. We will look at streaming chat, typed tool cards, frontend actions, human approval, shared state, document review, and a live checklist. The important part is not that the AI can do everything. The AI can help with the work. The application defines the rules. The user stays in control.

What Is Agentic UI?

A normal chatbot often follows this flow:

• User asks a question → model returns text → application displays the text

An agentic application can go further:

• User asks for help → agent reads the current workspace → agent requests an allowed tool → application validates the request → user approves when required → tool returns a result or a state update → Blazor renders the result

For example, "make this recipe vegan" does not have to produce a separate recipe in a chat message. It can update a recipe editor that the user and agent share. Similarly, "improve this document" does not have to overwrite the document immediately. It can produce a proposed revision with Accept and Reject buttons. This is still a normal application. We still write the components, define the tools, validate the data, and decide which actions are allowed. The model does not get permission to run arbitrary C# or generate executable UI code.

What We Are Building

My demo uses one Interactive Server Blazor application.

Browser → Interactive Server Blazor UI → UIAgent and server-side AG-UI client → /agents/{scenario} in the same application → Microsoft Agent Framework → Ollama at localhost:11434 → selected cloud model

There is no separate agent server, Aspire host, database, or real calendar integration in this demo. The eight pages are:

• Streaming chat
• Backend weather tool rendering
• Frontend accent-color tool
• Meeting approval
• Shared recipe state
• Predictive document review
• Live plan and activities
• Reasoning capability information

The weather and meeting tools are simulated. The plan is a demo checklist, not proof that real-world tasks have been completed.

A Preview Warning

The Microsoft article introduces experimental Blazor AI components. This demo targets net11.0 and uses the .NET 11 RC1 SDK. These APIs can change. This is a learning project, not a production‑ready application or a stable API promise. The versions below are the versions used by this demo. If you read this article later, check package availability and the current Microsoft guidance before starting a new project.

Step 1: Install .NET 11

Install the .NET 11 RC1 SDK, not only the runtime. The SDK is required to restore and build the application. Use the official .NET download page and select the installer that matches your operating system and architecture. For this Windows workspace, I used Visual Studio 2026 with the ASP.NET and web development workload and preview SDK support enabled. After installing, open a new terminal:

dotnet --list-sdks
dotnet --version

The demo pins this SDK in the solution root's global.json:

{
  "sdk": {
    "version": "11.0.100-rc.1.26425.128",
    "rollForward": "disable",
    "allowPrerelease": true
  }
}

This pin makes everyone use the same SDK. Run dotnet --version from the repository folder to check it. Because rollForward is disabled, another .NET 11 preview is not enough: install the exact version shown above to reproduce this demo. The application project targets:

<TargetFramework>net11.0</TargetFramework>

If Visual Studio does not recognize the SDK, enable preview SDK support in its settings and restart the IDE.

Step 2: Add the AI Building Blocks

The demo needs packages for three jobs: showing the UI, running tools, and communicating with the model. These references are already in BlazorApp1_Demo.csproj:

<ItemGroup>
  <PackageReference Include="Microsoft.AspNetCore.Components.AI" Version="0.1.0-preview.1.26466.103" />
  <PackageReference Include="Microsoft.Extensions.AI" Version="10.10.0" />
  <PackageReference Include="OllamaSharp" Version="5.5.0" />
  <PackageReference Include="Microsoft.Agents.AI.Hosting.AGUI.AspNetCore" Version="1.23.0-preview.260928.1" />
  <PackageReference Include="AGUI.Client" Version="1.0.0" />
  <PackageReference Include="Markdig" Version="0.44.0" />
</ItemGroup>

You do not need to learn every package at once:

• UI: Blazor AI components provide the conversation and tool cards. Markdig helps the demo process Markdown for safe display.
• Agent and tools: Microsoft.Extensions.AI provides IChatClient, the interface for sending messages to a model. Microsoft Agent Framework coordinates the agent and its tools.
• Communication: OllamaSharp connects to Ollama. AG‑UI carries messages, tool results, and state updates between the agent and the UI.

The Microsoft article's quick‑start command uses --prerelease. This project pins exact versions so the example is easier to reproduce. The AI package also supplies a stylesheet. In Components/App.razor, the demo includes:

<link rel="stylesheet" href="@Assets["_content/Microsoft.AspNetCore.Components.AI/ai-chat.css"]" />

Without the package styles, the components may not look the way you expect.

Step 3: Configure Ollama

This demo uses gemma4:31b-cloud through Ollama. The Ollama service runs locally, but this model runs in the cloud. You need an account and an internet connection; prompts and workspace content are sent to that service, and usage may have quotas or costs. Install and start Ollama, then sign in and prepare the model:

ollama signin
ollama pull gemma4:31b-cloud
ollama show gemma4:31b-cloud

This demo uses exactly gemma4:31b-cloud. It does not silently switch to another model. The Ollama section in appsettings.json is:

"Ollama":