Microsoft Introduces New Blazor AI Components for Building Agentic UI in .NET 11

AIDeveloper44 Team

Building Agentic Interfaces with Blazor

Microsoft has announced the release of experimental Blazor AI components, a new set of tools aimed at simplifying the development of what the company calls "Agentic UI." As AI applications move beyond simple text-based interaction, developers face the challenge of building interfaces that are responsive to complex, multi-step agent behaviors. The new components provide a structured approach to rendering streamed data and managing state within the Blazor ecosystem.

The announcement emphasizes that modern AI applications often require more than just a basic input field. Agents frequently need to gather context, execute tools, propose plans, and update shared artifacts over time. Managing these interactions manually can involve significant boilerplate code. The Blazor AI components are intended to abstract this complexity, allowing developers to present agent interactions as observable, renderable blocks.

Core Components and Architecture

The primary entry point for developers is the ChatPage component, which handles the fundamental requirements of a chat-based interface, including message lists, text input fields, streaming status indicators, and retry logic. Under the hood, ChatPage utilizes a UIAgent object, which serves as a wrapper around the IChatClient from the Microsoft.Extensions.AI library. By consuming streaming ChatResponseUpdate values, the UIAgent maps raw data into ContentBlock instances that the UI can reactively render.

A ContentBlock is designed to be the foundational unit of interaction. It manages the identity, role, and lifecycle of a specific piece of data—such as a user message, an AI response, a tool invocation, or an approval request. Because these blocks include change notifications, the Blazor UI can update in real-time as data streams from the server, providing a responsive experience for the end-user.

Advanced Interaction Patterns

For scenarios requiring more granular control, the framework provides lower-level components such as AgentBoundary, MessageList, MessageInput, and BlockRenderer. These building blocks enable developers to construct custom layouts while maintaining the benefits of the established state model. This is particularly useful for applications that need to handle complex, multi-modal content like images, files, or audio, provided the application logic handles the underlying transcription and media processing.

To support more complex, distributed architectures, Microsoft has also highlighted the use of the AG-UI .NET SDK. AG-UI is described as an open, event-based protocol for standardizing communication between agent servers and client-side interfaces. By utilizing the AGUIChatClient, developers can bridge the gap between their Blazor frontend and remote agents hosted via the Microsoft Agent Framework (MAF). This setup is demonstrated in the provided sample architecture, which integrates ASP.NET Core, .NET Aspire for orchestration, and Microsoft Foundry for model hosting.

Getting Started

As these tools are currently in an experimental state, developers are encouraged to use the .NET 11 RC1 SDK to experiment with the new capabilities. The necessary functionality is available via the Microsoft.AspNetCore.Components.AI prerelease package. The provided sample application serves as a reference for implementing various patterns, including human-in-the-loop workflows, predictive state management, and backend tool rendering, showcasing how different components of the .NET ecosystem—such as Aspire and MAF—work together to support agentic app development.

Enjoyed this?

Get more posts like this delivered to your inbox.

Subscribe