ASP.NET Team Blog

DevExpress Blazor AI Chat — Multi-Model Support, MCP Server Integration, and a Look at What's Coming Next

Dmitry Tokmachev (DevExpress) — Fri, 22 May 2026 00:01:00 Z

We continue to extend the capabilities of the DevExpress Blazor AI Chat component and publish GitHub examples designed to address real-world usage scenarios. This post highlights two new examples: a multi-model chat with persistent conversation history, and MCP server integration that extends AI context with external data sources. I'll also share planned features for v26.1 (scheduled for mid-June 2026).

Multi-Model Chat with Conversation History

Our earlier multi-LLM chat application example demonstrated how to switch between AI providers within a single chat session. The new DevExpress Blazor AI Chat — Multi-Model Chat with Conversation History example adds persistent conversation threads and automated chat session title generation.

The application uses a two-pane layout with DxSplitter. The left pane is a sidebar that hosts a DxComboBox for model selection and a DxListBox for conversation threads. InMemoryChatThreadStore manages thread data. This thread-safe dictionary-backed store tracks message history and timestamps. The right pane hosts the DxAIChat component. The following Razor markup defines the layout:

<DxSplitter CssClass="chat-splitter" Height="100%">
    <Panes>
        <DxSplitterPane Size="320px" MinSize="220px" MaxSize="500px">
            <DxButton RenderStyle="ButtonRenderStyle.Primary"
                      RenderStyleMode="ButtonRenderStyleMode.Contained"
                      Text="New Chat"
                      Click="CreateNewThreadAsync" />
            <DxComboBox Data="@ModelsList"
                        Value="@SelectedModel"
                        TextFieldName="@nameof(ChatClientSession.Name)"
                        ValueChanged="@((ChatClientSession session) => OnSelectedThreadModelChangedAsync(session))" />
            <DxListBox Data="@Threads"
                       Value="@SelectedThread"
                       ValueChanged="@((ChatThread thread) => OnThreadSelectedAsync(thread))"
                       TextFieldName="@nameof(ChatThread.Title)">
                <ItemDisplayTemplate>
                    <div class="thread-list-item">
                        <div class="thread-title">@context.DataItem.Title</div>
                        <div class="thread-model">@GetModelName(context.DataItem.ModelSessionId)</div>
                    </div>
                </ItemDisplayTemplate>
            </DxListBox>
        </DxSplitterPane>
        <DxSplitterPane>
            <DxAIChat @ref="DxAiChat"
                      Initialized="OnChatInitialized" />
        </DxSplitterPane>
    </Panes>
</DxSplitter>

Automatic thread title generation is a key implementation detail. The CompositeChatClient class implements IChatClient and intercepts outgoing user messages via GetResponseAsync and GetStreamingResponseAsync methods. On the first message in a new thread, the class sends a background request to the selected AI model using a dedicated system prompt and requests a concise 3–6 word title. IChatThreadStore stores the result. The ThreadTitleUpdated event updates the UI and refreshes the sidebar without blocking the main chat response:

// CompositeChatClient.cs
public IAsyncEnumerable<ChatResponseUpdate> GetStreamingResponseAsync(IEnumerable<ChatMessagegt; messages, 
ChatOptions? options = null, CancellationToken cancellationToken = new CancellationToken())
    {
        var selectedSession = GetRequiredSelectedSession();
        var messageList = messages.ToList();
        TryQueueTitleGeneration(messageList, selectedSession);
		...
        await foreach (var update in selectedSession.Client.GetStreamingResponseAsync(
        	messageList, options, cancellationToken))
            yield return update;
        ...
    }

private void TryQueueTitleGeneration(IEnumerable<ChatMessage> messages, ChatClientSession selectedSession) {
    var threadId = _activeThreadId.Value;
    var firstUserMessage = GetFirstUserMessage(messages);
    ...
    _ = GenerateTitleForThreadAsync(threadId, selectedSession, firstUserMessage);
}

private async Task GenerateTitleForThreadAsync(Guid threadId,
    ChatClientSession selectedSession, string firstUserMessage) {
    try {
        var thread = await _threadStore.GetThreadAsync(threadId, CancellationToken.None);
        if (thread is null || thread.HasGeneratedTitle)
            return;

        var modelSession = AvailableChatClients
            .FirstOrDefault(x => x.Id == thread.ModelSessionId) ?? selectedSession;

        string generatedTitle;
            try {
                generatedTitle = await _titleGenerator.GenerateTitleAsync(modelSession, firstUserMessage, CancellationToken.None);
            }
            catch {
                generatedTitle = _titleGenerator.BuildFallbackTitle(firstUserMessage);
            }

            if (string.IsNullOrWhiteSpace(generatedTitle)) {
                generatedTitle = _titleGenerator.BuildFallbackTitle(firstUserMessage);
            }

            await _threadStore.UpdateTitleAsync(threadId, generatedTitle, true, CancellationToken.None);
            lock (_syncRoot) {
                _titledThreadIds.Add(threadId);
            }
            ThreadTitleUpdated?.Invoke(threadId, generatedTitle);
        }
        catch (OperationCanceledException) { }
        finally {
            lock (_syncRoot)
                _titleGenerationInProgress.Remove(threadId);
        }
}

The example includes an in-memory store. The IChatThreadStore interface allows for replacement with an EF Core-backed implementation for applications that require persistent history.

To download and explore our implementation, navigate to the following DevExpress GitHub repository: Blazor AI Chat — Multi-Model Chat with Conversation History.

MCP Server Integration

The DevExpress Blazor AI Chat — Integration with Model Context Protocol example connects our Blazor AI Chat component to external data through the Model Context Protocol (MCP).

The solution includes two projects.

AIChatMcpServer is a custom MCP server that exposes sample tools, resources, and prompt templates to the client application.
AIChatMcpClient is a Blazor Server application that hosts DxAIChat and loads MCP capabilities at startup through a hosted McpRepository service.

The sample MCP server exposes three primitives: tools (executable functions the AI model can call automatically), resources (static content such as logs, text files, and binary images), and prompts (reusable parameterized templates). McpRepository loads these primitives at startup and passes them to DxAIChat.

Each primitive maps directly to a DxAIChat feature. Resources map to AIChatResource objects and populate the Resources collection. Prompts map to DxAIChatPromptSuggestion entries displayed when the chat opens. Tools attach to IChatClient through UseFunctionInvocation at startup.

Index.razor:

<DxAIChat FileUploadEnabled="true"
          Resources="Resources"
          IncludeFunctionCallInfo="true">
        <PromptSuggestions>
            @foreach (var suggestion in PromptSuggestions){
                <DxAIChatPromptSuggestion PromptMessage="@suggestion.PromptMessage" Title="@suggestion.Title" Text="@suggestion.PromptMessage"/>
            }
        </PromptSuggestions>
        <AIChatSettings>
            <DxAIChatFileUploadSettings MaxFileSize="10000000" MaxFileCount="3"/>
        </AIChatSettings>
    </DxAIChat>

@code {
    IEnumerable<AIChatResource> Resources { get; set; } = [];
    IEnumerable<PromptSuggestion> PromptSuggestions { get; set; } = [];

    protected override async Task OnInitializedAsync() {
        // Map MCP resources to AIChatResource — DxAIChat fetches content on demand via LoadResourceData
        Resources = McpRepository.Resources.Select(x =>
            new AIChatResource(x.Uri, x.Name, LoadResourceData, x.MimeType, x.Description));
        // Map MCP prompt templates to prompt suggestions shown in the chat UI
        PromptSuggestions = McpRepository.PromptSuggestions;
    }

    async Task<IList<AIContent>> LoadResourceData(AIChatResource resource, CancellationToken ct) {
        var result = await McpRepository.Client.ReadResourceAsync(resource.Uri, cancellationToken: ct);
        return result.Contents.ToAIContents();
    }
}

Program.cs:

using Azure;
using Azure.AI.OpenAI;
using AIChatMcpClient;
using AIChatMcpClient.Components;
using AIChatMcpClient.Services;
using Microsoft.Extensions.AI;
...

builder.Services.AddSingleton<McpRepository>();
builder.Services.AddHostedService(sp => sp.GetRequiredService<McpRepository>());

builder.Services.AddSingleton<IChatClient>(sp => {
    var mcpRepository = sp.GetService<McpRepository>();
    var azureOpenAIClient = new AzureOpenAIClient(
        new Uri(azureOpenAISettings.Endpoint),
        new AzureKeyCredential(azureOpenAISettings.ApiKey));
    var chatClient = azureOpenAIClient.GetChatClient(azureOpenAISettings.DeploymentName).AsIChatClient();
    return new ChatClientBuilder(chatClient)
        .ConfigureOptions(co => {
            co.Tools = mcpRepository.Tools.ToArray<AITool>();
        })
        .UseFunctionInvocation()
        .Build();
});
...

The implementation follows MCP standards. Client code requires no changes when you switch to another MCP-compliant backend. To connect the Blazor application to a different MCP server, modify the McpRepository endpoint:

using AIChatMcpClient.Models;
using ModelContextProtocol.Client;
using ModelContextProtocol.Protocol;
...
public class McpRepository : IHostedService, IAsyncDisposable {
    private readonly string _mcpEndpoint;

    public McpClient Client { get; private set; } = null!;
    public List<McpClientTool> Tools { get; } = [];
    public List<McpClientResource> Resources { get; } = [];
    public List<McpClientPrompt> Prompts { get; } = [];
    public List<PromptSuggestion> PromptSuggestions { get; } = [];

    public McpRepository(IConfiguration configuration) {
        _mcpEndpoint = configuration.GetSection("McpServer:Endpoint").Value 
                       ?? throw new InvalidOperationException("McpServer:Endpoint is not configured in appsettings.json");
    }

    public async Task StartAsync(CancellationToken cancellationToken) {
        var transport = new HttpClientTransport(new() { Endpoint = new(_mcpEndpoint) });
        Client = await McpClient.CreateAsync(transport);
        
        var tools = await Client.ListToolsAsync(cancellationToken: cancellationToken);
        var resources = await Client.ListResourcesAsync(cancellationToken: cancellationToken);
        var prompts = await Client.ListPromptsAsync(cancellationToken: cancellationToken);
        
        Tools.AddRange(tools);
        Resources.AddRange(resources);
        Prompts.AddRange(prompts);

        // Preload prompt suggestions at startup
        foreach (var prompt in Prompts) {
            var result = await prompt.GetAsync();
            var content = result.Messages[0].Content;
            PromptSuggestions.Add(new PromptSuggestion {
                PromptMessage = ((TextContentBlock)content).Text,
                Title = prompt.Title ?? "Untitled"
            });
        }
    }

    public Task StopAsync(CancellationToken cancellationToken) => Task.CompletedTask;

    public async ValueTask DisposeAsync() {
        await Client.DisposeAsync();
    }
}

To download and explore our implementation, navigate to the following DevExpress GitHub repository: DevExpress Blazor AI Chat — Integration with Model Context Protocol.

What's Coming in v26.1

Our v26.1 release is scheduled for mid-June 2026 and includes the following enhancements to DevExpress AI Chat components for Blazor, WinForms, and WPF.

Microsoft Agent Framework and OpenAI Responses API Support

The most substantial addition is a new IChatResponseProvider abstraction layer that decouples the chat UI from the underlying AI service. This layer allows you to bind DxAIChat to a wider set of AI backends beyond the standard IChatClient interface, including the Microsoft Agent Framework (with support for agents, executors, and multi-step workflows), the OpenAI Responses API, and Azure AI Projects. The API also supports custom IChatResponseProvider implementations for usage scenarios that don't fit standard providers.

Planned demos will illustrate how to connect our AI Chat Control to individual agents, composite workflows, AG-UI backends, and tool approval workflows in agentic pipelines.

API Enhancements

v26.1 replaces the MessageSent event with MessageSending. This event fires before the message is added to chat history and sent to the AI service. Additionally, this event exposes an e.Cancel parameter that allows you to block send operations entirely. Use it to preprocess and validate input, filter content, call external services and handle the messaging pipeline manually. Alternatively, if e.Cancel is set to false, the AI Chat Control will continue sending and displaying messages and allow you to log and audit user messages without disruption to the normal message pipeline.

The new event also supports augmentation before delivery — for example, appending a system message or supplemental context to the chat history via the new AppendMessageAsync method:

async void AiChatControl1_MessageSending(object sender, AIChatControlMessageSendingEventArgs e) {
    // Append a system message before sending the user's prompt to the AI service.
    await e.Chat.AppendMessageAsync("Translate text to Spanish", ChatRole.System);
}

Empty Chat Customization

v26.1 introduces two new properties designed to customize initial chat state. EmptyMessageAreaText specifies text dispalyed in the empty chat area, and InputBoxNullText specifies placeholder text in the input box. These properties allow you to align the initial chat experience with application context and tone:

<DxAIChat EmptyMessageAreaText="How can I help you today?"
          InputBoxNullText="Ask a question or describe a task..." />

Looking for a particular code example? Contact us via the DevExpress Support Center to share your usage scenario and we'll be happy to recommend an implementation.

Blazor — End of Support for Bootstrap v4 (v26.1)

Elena Peskova (DevExpress) — Tue, 24 Mar 2026 03:00:00 Z

As previously announced, DevExpress Blazor deprecated support for Bootstrap v4 in our v25.1 release cycle. With v26.1, we expect to complete our transition away from Bootstrap v4 by removing support as follows:

The DevExpress.Blazor.Themes package will no longer include Bootstrap v4-based stylesheets for classic themes (Blazing Berry, Blazing Dark, Office White, Purple).
All remaining theme dependencies on Bootstrap v4 or default CSS will end.

This post explains why this change was made, how it impacts existing apps, and what actions you may need to take before upgrading.

Bootstrap v4: End-of-Life Status

Bootstrap v4 was a reliable and widely used CSS framework for many years. It reached its end of life (EOL) in 2023 and is no longer maintained or updated.

Continuing to leverage a non-supported framework increases maintenance costs and introduces potential long-term risks for apps that rely on the framework. To align with modern development practices and ensure a stable platform for future releases, DevExpress Blazor will end Bootstrap v4 support once we officially ship v26.1.

Bootstrap v5 Support

In our v25.1 release cycle, we formally deprecated Bootstrap v4 support and marked the BootstrapVersion global option as obsolete (see the following breaking change notice for additional information in this regard: GlobalOption.BootstrapVersion is now obsolete).

This announcement gave customers time to transition away from Bootstrap v4 and address styling requirements ahead of full removal.

Impact on Existing Apps

You should review your project if any of the following applies to your DevExpress-powered Blazor app:

You explicitly set Bootstrap version to v4.
You did not specify Bootstrap version prior to v25.1.
You applied a DevExpress classic theme (Blazing Berry, Blazing Dark, Purple, or Office White) using a Bootstrap v4-based stylesheet:
<link href=@AppendVersion("_content/DevExpress.Blazor.Themes/blazing-berry.bs4.min.css") rel="stylesheet" />
Your custom styles relied on Bootstrap v4 classes.

Steps to Take Before You Upgrade to v26.1

Before upgrading to v26.1, you must:

Remove any usage of BootstrapVersion=v4.
Migrate custom styles from Bootstrap v4 to Bootstrap v5 where necessary.
Replace Bootstrap v4-based theme stylesheets with supported alternatives. Please review the following help topic for additional information: DevExpress Blazor Themes.

Once you upgrade to v26.1, thoroughly test layouts and component appearance.

Your Feedback Matters

If you have questions about this change or need personal assistance, feel free to contact us via the DevExpress Support Center.

Blazor — June 2026 Roadmap (v26.1)

Slava Khudyakov (DevExpress) — Tue, 24 Feb 2026 08:30:00 Z

The information contained within this blog post details our current/projected development plans. Please note that this information is being shared for INFORMATIONAL PURPOSES ONLY and does not represent a binding commitment on the part of Developer Express Inc. This blog post and the features/products listed within it are subject to change. You should not rely or use this information to help make a purchase decision about Developer Express Inc products.

Blazor 2026 Strategy

As you will see below, we expect to continue extending the capabilities of individual components — but we also want to invest in larger initiatives that span multiple release cycles.

Many of these initiatives require foundational work (architecture, styling infrastructure, interaction layers, and design-system alignment) before we can commit to a specific release or prepare a complete feature list. Some of this work will not be delivered in the first half of the year (including v26.1).

Even with our evolving objectives, we want to be transparent about what we are focusing on, why some details are not available yet, and what direction we hope to move toward over time.

Styling and Layout Foundations

We want DevExpress Blazor components to address more UI needs out of the box, so you can build cohesive layouts with minimal custom CSS.

Historically, many apps relied on Bootstrap utility classes and layout patterns as the primary styling foundation. Bootstrap is still available, but it does not match modern theme requirements (for instance, misses runtime-configurable accent colors).

Our direction is to create theme-aware styling alternatives so you do not need to recreate these fundamentals yourself. We are exploring:

DevExpress CSS helper classes for common spacing/layout patterns.
Lightweight "primitive" components for element composition (for instance, Card, Badge, Avatar).

We also plan to reduce the amount of fine-tuning needed for complex layouts (alignment, consistent spacing, border/background treatments), especially when size mode can change at runtime. Our goal is to improve visual defaults and introduce new layout-focused settings. These settings will allow you to implement common layouts using component APIs, theme-aware patterns, and helper classes mentioned above.

Finally, we’ll build demos and project templates that recreate popular app layouts without custom styling.

Classic Theme Deprecation

Blazing Berry, Office White, Purple, Blazing Dark, and Bootstrap-based themes use an old architecture, are hard to maintain, and do not support new styling capabilities (accent colors, public CSS variables, and our UI Kit). We want to focus our efforts on new styling architecture and gradually move away from classic themes.

We plan to make this transition carefully. Before we deprecate any classic theme, we will prepare viable alternatives, publish clear migration guidance, and give you enough time to move at your own pace.

New Themes

We want to expand our modern theme lineup (starting with Fluent) and evolve our styling infrastructure. Theme directions that we are currently considering:

Material — a frequent request, and a good fit for teams building hybrid solutions that mix UI stacks (including DevExtreme).
A classic-inspired modern theme — a longer-term option for customers who prefer a look closer to our classic themes.

If you have strong preferences on one or the other, we would like to hear your thoughts (please submit a support ticket via the DevExpress Support Center at anytime).

Icon Library

We plan to make our DevExpress Icon Library available to Blazor developers and expand it with new icons. We also expect to introduce a new API that will simplify icon usage for built-in/custom icons, across multiple themes and size modes.

RTL Support

Right-to-left (RTL) support is an important direction for us and for many of you. We are researching RTL requirements across our Blazor component suite and do preliminary work so components behave more consistently in RTL mode (layout, alignment, and interaction patterns).

We do not expect RTL support to be available in v26.1, but we will work on it throughout this year.

Performance

We made significant performance improvements in 2025, and still performance remains an ongoing investment area. We plan to continue researching and testing optimizations across our Blazor component suite. Our focus areas include:

Memory throughput and performance under a large number of concurrent sessions.
Reducing Blazor logical and visual tree size.
Reducing the number of WebSocket messages per interaction.

Once new optimizations are ready, we will add more info to this roadmap.

Security

Security is a core requirement for our components. We already use secure development practices, including automated security scans/reviews. We plan to continue strengthening this process, conducting even more penetration tests, and publish a software bill of materials (SBOM) for DevExpress Blazor.

Accessibility

Accessibility is another key focus area for us. We will continue delivering fixes and improvements across DevExpress Blazor components (keyboard navigation, semantics/ARIA, and visual states).

We’d like your feedback on these strategic directions before we lock in detailed plans:

Which directions are most important for you in 2026?
Are we missing any strategic areas?
Do you have concerns about tradeoffs (for example, themes vs. component features)?
Any general comments on the strategy or where we should focus first?

Product Plans

Our mid-year Blazor roadmap will be updated regularly to reflect development progress. As we get closer to the release, we expect to add additional items and modify the status of planned features. Look for the following labels next to every feature:

Planned — Feature is scheduled but not yet in development.
In Development — Under active development.
Coming in EAP v26.1 — Will be available in our first v26.1 early access preview.
Coming in v26.1 — Will be included in the final v26.1 release.
Released in v26.1 — Fully implemented and available.

Accessibility Enhancements

Improvements and fixes for our Blazor Data Editors
Screen reader support for the Blazor Rich Text Editor

Blazor Smart Paste

Coming in v26.1

We expect to add AI-powered Smart Paste functionality in v26.1.

Smart Paste will analyze clipboard content and populate each form field with relevant data (to transform traditional copy-and-paste operations).

Blazor Grid & TreeList

Focus Cells

Postponed to v26.2

DevExpress Blazor Grid and TreeList components will support focused cell highlighting. While these components already display focus borders during keyboard navigation, this feature adds a new highlight layer for the active cell (both when users navigate with the keyboard or select a cell with the mouse).

We will also introduce APIs to identify the focused cell, move focus to a specific cell, and react to focused cell changes.

Coming in v26.1

DevExpress Blazor Grid and TreeList components will display the total number of records in the Pager to improve data navigation clarity.

Postponed to v26.2

We expect to add built-in toolbar items to the DevExpress Blazor Grid and TreeList components. Built-in items will include:

Column Chooser
Export Buttons (CSV, PDF, XLS, and XLSX)
Search Box

Postponed to v26.2

We hope to introduce a Criteria Selector Menu for our Blazor Grid and TreeList Filter Row. This menu allows users to select filter conditions directly within the row editor and apply them to the entered value.

Filter Row — Bind Filter On Input Option

Postponed to v26.2

Filter Row Data Editors will support on‑input data binding mode. In this mode, DevExpress Blazor Grid and TreeList components apply filters as users type (no need to press Enter).

UI/UX Enhancements

Vertical Grid Line Visibility

Coming in v26.1

We will add an option to hide column lines (vertical separators between adjacent columns) in our Blazor Grid and TreeList components.

Striped Rows

Postponed to v26.2

We plan to introduce an option to highlight alternating (odd) rows in our Blazor Grid and TreeList with a different style (to enhance readability).

Coming in v26.1

DevExpress Blazor Grid and TreeList will support on‑hover display mode for Filter Menu buttons. When enabled, buttons will appear after users hover over column headers. This mode helps create a cleaner UI and avoid column caption truncation.

Custom Row Height

Postponed to v26.2

In v26.1, you will be able to specify a minimum row height for the DevExpress Blazor Grid and TreeList. This new option allows you to adjust visual density by increasing/decreasing row spacing and gives you more control over row appearance.

Blazor TreeList — Unbound Columns

Coming in v26.1

We plan to introduce unbound column support for the DevExpress Blazor TreeList component. Unbound columns display values that are not stored in the underlying data source. Our TreeList can calculate these values on the fly or derive them from other fields. Use unbound columns to display supplementary/computed data without modifying the original data model.

Blazor Data Editors

TextBox — Password Button

Postponed to v26.2

v26.1 will include a built‑in button that displays/hides a password within the DevExpress Blazor TextBox editor. This button allows users to verify text they have entered.

SpinEdit & MaskedInput — Disable Arrow Keys

In Development

Both DevExpress Blazor SpinEdit and MaskedInput components will allow you to prevent a change to values when users press Up/Down arrow keys.

MaskedInput — Disable Mouse Wheel

In Development

Our Blazor MaskedInput will allow you to prevent a change to values when users scroll the mouse wheel. This option prevents accidental modifications during page/content scrolling.

Focusable Custom Buttons

Coming in v26.1

Our Blazor Data Editors will include a new Focusable option for custom buttons. Once activated, users can interact with custom buttons using the keyboard.

Blazor FormLayout

New Caption Position Mode

Postponed to v26.2

We expect to extend the CaptionPosition property with a new Auto mode. In this mode, Form Layout will automatically switch the caption to a vertical position when horizontal space is insufficient. This behavior matches the current implementation of the Horizontal mode.

With this update:

Auto becomes the new default caption position and enables automatic switching based on available space.
Horizontal mode will no longer change caption position and will always display captions horizontally, regardless of layout constraints.

API Enhancements

Postponed to v26.2

The DevExpress Blazor FormLayout component will include the following new API members:

TabsPosition — Specifies tab header position.
AllowClose | AllowTabReorder — Allows users to close/reorder tabs.
TabClosing | TabReordering — Allows you to handle tab closing/reordering actions.
TabPageEnabled — Allows you to disable a tab page.

Blazor Dialog Service - Content Template

In Development

We hope to add a content template option for message dialogs displayed via the DevExpress Blazor Dialog Service. This option will allow you to customize the dialog body: format message text, add links, or display additional interactive elements.

private async Task OpenConfirmDialogAsync() {
    Result = await DialogService.ConfirmAsync(new MessageBoxOptions() {
        ContentTemplate = @<div>
            <p>Are you sure you want to delete this record?</p>
            <p><b>This action cannot be undone.</b></p>
        </div>,
        OkButtonText = "Yes",
        CancelButtonText = "No",
        RenderStyle = MessageBoxRenderStyle.Danger,
    });
}

In Development

We plan to extend Data Mapping APIs available for DevExpress Blazor TreeView, Accordion, Menu, and Toolbar components. New APIs will allow you to implement more business scenarios using data binding (instead of static Razor markup).

Use cases include:

Build navigation from a shared model (for instance, a sitemap or route list).
Display/hide items based on permissions/flags.
Generate hierarchical structures (groups, child items) based on data.

<DxTreeView Data="@Data">
    <DataMappings>
        <DxTreeViewDataMapping Text="Name"
                               Key="Id"
                               BadgeText="Badge"
                               ParentKey="CategoryId"/>
    </DataMappings>
</DxTreeView>

Accordion — Cache Collapsed Content

In Development

The DevExpress Blazor Accordion will allow you to cache collapsed group content. When caching is active, the Accordion retains collapsed content and does not need to recreate it once the group is expanded.

This feature is useful for groups containing complex UI content that is costly to re-initialize (for instance, Forms with validation, Charts, or Data Grids).

Blazor Pivot Table

Server Mode

Coming in v26.1

We expect to support Server Mode in the DevExpress Pivot Table component. In this mode, the Pivot Table retrieves data on demand and executes grouping, filtering, and summary calculations on the server. Server‑side data processing optimizes performance when working with large datasets and complex filters.

Drill‑Down Support

Postponed to v26.2

We plan to support drill‑down scenarios in the DevExpress Blazor Pivot Table. Drill‑down allows you to retrieve the underlying records used to calculate a specific summary value. This capability is useful when you need to examine the data behind aggregated results.

New APIs will include:

CellClick — Provides access to the underlying data of the clicked cell.
CreateDrillDownDataSource(options) — Returns a drill‑down data source.

You will be able to bind underlying data to our Blazor Grid component and allow users to review detailed records within the same page.

Blazor Themes

Fluent Themes — High Contrast Mode

In Development

DevExpress Blazor Fluent themes will support high contrast mode in our June release. They will automatically modify colors if Windows high contrast mode is active.

Blazor Reporting

Learn more: Reporting & BI Dashboard — June 2026 Roadmap (v26.1)

Your Feedback Matters

DevExpress Blazor AI Chat — Agent2Agent (A2A) Protocol Integration

Dmitry Tokmachev (DevExpress) — Thu, 08 Jan 2026 01:10:00 Z

Modern AI-powered applications increasingly implement automated functions through specialized AI agents. The statistics show impressive growth: in 2025, 85% of organizations have integrated AI agents into at least one workflow. Users now expect conversational interfaces for various business tasks: customer service automation, personalized shopping assistance, financial transaction management, content creation, and streamlined workflow coordination.

The key distinction between AI agents and working with standard large language models lies in a simple formula: an agent equals LLM plus instructions and tools it can invoke, representing an autonomous system.

Source/Credit: Microsoft Developer YouTube channel.

While LLMs can only generate text, agents extend these capabilities into actionable intelligence by integrating external APIs, accessing databases, managing files, and connecting with enterprise systems. This transforms them from passive text generators into autonomous systems capable of executing complex, multi-step tasks. One of the first agents that was introduced in the industry were ChatGPT plugins that added web browsing and code interpreter capabilities (allowing the LLM to search the Web and execute code while replying to a user query).

In April 2025, Google introduced its Agent2Agent (A2A) protocol — an open standard for standardizing communication between agents. The protocol has gained support from over 150 organizations, including tech giants like Microsoft, Salesforce, SAP, ServiceNow, and Amazon Web Services. The protocol's advantage lies in enabling agents developed by different teams on various platforms to seamlessly exchange information and coordinate actions, creating essentially an "internet of agents" or "agentic web" — similar to how HTTP allowed websites to interact with each other.

The benefits notwithstanding, integrating agents with user interface components presents technical challenges. Agents use structured data exchange formats and support complex task lifecycles, while chat components expect simple text messages and streaming responses. In this article, I describe how to connect the DevExpress Blazor AI Chat component to A2A protocol-compliant agents with a small adapter. The implementation hosts four agents in separate ASP.NET Core servers and switches agents at runtime within a single chat UI. The sample also includes a Researcher agent from the official Microsoft A2A .NET SDK samples to show compatibility with existing agents.

This example focuses on agent connectivity rather than orchestration. The A2A protocol supports advanced inter-agent patterns such as routing, delegation, and task handoffs, but this sample does not implement them. Any A2A-compliant agent can connect to the Blazor AI Chat component with the approach documented here.

Architecture Overview

The solution uses a distributed layout. A shared library defines all agent classes and base types. Four ASP.NET Core projects host Poem, Shakespearean Style, Task, and Researcher agents. Each server runs on its own port and exposes a single A2A endpoint at /agent. A Blazor Server app embeds the DevExpress AI Chat component and talks to agents through IChatClient-based adapters.

Agent Server Apps

Each agent server follows the same pattern. The example below shows a minimal setup that maps the A2A pipeline to /agent and wires an agent to a task manager.

using A2A;
using A2A.AspNetCore;
using Azure;
using Azure.AI.OpenAI;
using A2AAgents.Shared;
using A2AAgentsServer.Agents;
using Microsoft.Extensions.AI;

var builder = WebApplication.CreateBuilder(args);
var app = builder.Build();

TaskManager taskManager = new TaskManager();

var settings = builder.Configuration.GetSection("AzureOpenAISettings").Get<AzureOpenAIServiceSettings>();
if (settings == null || string.IsNullOrEmpty(settings.Endpoint) || string.IsNullOrEmpty(settings.Key) || string.IsNullOrEmpty(settings.DeploymentName))
    throw new InvalidOperationException("Specify Azure OpenAI endpoint, key, and deployment name in appsettings.json.");
var chatClient = new AzureOpenAIClient(new Uri(settings.Endpoint), new AzureKeyCredential(settings.Key))
    .GetChatClient(settings.DeploymentName)
    .AsIChatClient();

var agent = new PoemAgent(chatClient, taskManager);

app.UseHttpsRedirection();
app.MapA2A(taskManager, "/agent");
app.Run();

Shakespearean Style, Task, and Researcher servers use the same structure. They differ by agent type and the port configured in each project's launch settings.

Protocol Compliance Validation with a2a-inspector

All agents pass validation with the a2a-inspector tool. The inspector checks Agent Card metadata, message format, and streaming support, task state signaling for task agents, and protocol version compatibility.

Bridging A2A to IChatClient

The key to this integration is a lightweight adapter that translates between A2A protocol messages and the IChatClient interface used by DevExpress Blazor AI Chat to interact with LLMs. This adapter maintains conversation context, converts chat messages to A2A protocol format, and streams responses back to the UI:

public sealed class MessageAgentChatClient : DelegatingChatClient {
    private readonly A2AClient _agentClient;
    private readonly string _contextId;

    public MessageAgentChatClient(IChatClient innerClient, A2AClient agentClient, string contextId) 
        : base(innerClient) {
        _agentClient = agentClient ?? throw new ArgumentNullException(nameof(agentClient));
        _contextId = $"{contextId}-{Guid.NewGuid()}";
    }

    public override async IAsyncEnumerable<ChatResponseUpdate> GetStreamingResponseAsync(
        IEnumerable<ChatMessage> messages, 
        ChatOptions? options = null,
        [EnumeratorCancellation] CancellationToken cancellationToken = default) {

        var sendParams = new MessageSendParams { 
            Message = CreateA2AMessage(messages) 
        };

        await foreach (var item in _agentClient.SendMessageStreamingAsync(sendParams, cancellationToken)) {
            if (item.Data is AgentMessage message && message.Parts.FirstOrDefault() is TextPart textPart) {
                yield return new ChatResponseUpdate(ChatRole.Assistant, textPart.Text);
            }
        }
    }
    
    private AgentMessage CreateA2AMessage(IEnumerable<ChatMessage> messages) {
            return new AgentMessage() {
                Role = MessageRole.User,
                ContextId = _contextId,
                Parts = [new TextPart() { Text = messages.Last().Text }]
            };
        }
}

Runtime Agent Selection

The app registers each agent as a keyed IChatClient service and switches between them at runtime through a simple dropdown.

// Register each A2A agent as a keyed IChatClient service
builder.Services.AddKeyedScoped<IChatClient>(AgentsEndpoints.PoemAgent, (provider, key) =>
    new MessageAgentChatClient(chatClient, 
        new A2AClient(new Uri(AgentsEndpoints.PoemAgent)), 
        AgentsEndpoints.PoemAgent));

builder.Services.AddKeyedScoped<IChatClient>(AgentsEndpoints.ShakespeareanStyleAgent, (provider, key) =>
    new MessageAgentChatClient(chatClient, 
        new A2AClient(new Uri(AgentsEndpoints.ShakespeareanStyleAgent)), 
        AgentsEndpoints.ShakespeareanStyleAgent));

builder.Services.AddKeyedScoped<IChatClient>(AgentsEndpoints.TaskAgent, (provider, key) =>
    new TaskAgentChatClient(chatClient, 
        new A2AClient(new Uri(AgentsEndpoints.TaskAgent)), 
        AgentsEndpoints.TaskAgent));

builder.Services.AddKeyedScoped<IChatClient>(AgentsEndpoints.ResearcherAgent, (provider, key) =>
    new TaskAgentChatClient(chatClient, 
        new A2AClient(new Uri(AgentsEndpoints.ResearcherAgent)), 
        AgentsEndpoints.ResearcherAgent));

The ChatClientServiceKey property (available with DevExpress v25.1.4) enables runtime switching between multiple IChatClient services.

<DxAIChat @ref="_dxAIChat" 
          UseStreaming="true" 
          ChatClientServiceKey="@CurrentServiceKey"
          CssClass="chat-container" />

<DxComboBox Data="@AgentOptions"
            TextFieldName="nameof(AgentOption.Text)"
            ValueFieldName="nameof(AgentOption.Value)"
            @bind-Value="@CurrentServiceKey" />

Welcome Chat Screen

The EmptyMessageAreaTemplate shows agent descriptions and instructions when the chat is empty. This helps users understand each agent and start a conversation quickly.

<EmptyMessageAreaTemplate>
        <div class="empty-message-area">
            <h4>🤖 Multi-Agent AI Chat</h4>
            <p>Welcome to the Agent-to-Agent communication platform! Choose your specialized AI agent and start chatting.</p>

            <div>
                <h5>Available Agents:</h5>
                <ul class="agents-list">
                    <li><strong>🎭 Poem Agent:</strong> Enter 2-5 keywords and I'll generate a short lyrical poem</li>
                    <li><strong>📜 Shakespearean Style Agent:</strong> Transform your text into William Shakespeare's style</li>
                    <li><strong>📋 Task Agent:</strong> Help plan and execute task descriptions</li>
                    <li><strong>Researcher Agent:</strong> Agent from https://github.com/a2aproject/a2a-dotnet/blob/main/samples/AgentServer/ResearcherAgent.cs </li>
                    <li><strong>💬 Default Chat Client:</strong> Standard AI conversation</li>
                </ul>
            </div>

            <div>
                <p><strong>Current Agent:</strong> <span class="current-agent-badge">@AgentOptions.FirstOrDefault(x => x.Value == CurrentServiceKey)?.Text</span></p>
            </div>

            <p class="help-text">
                <small>💡 Select an agent from the dropdown above, then type your message to start the conversation!</small>
            </p>
        </div>
    </EmptyMessageAreaTemplate>

User Experience

Users can select Poem, Shakespearean Style, Task, or Researcher agents via a dropdown, utilize manual handoffs by copying output between agents to simulate composition workflows, and enjoy streaming responses that preserve the responsive feel of AI interactions. The video below demonstrates project functionality in action:

Your browser does not support the video tag.

Download the Complete Example

To get started with this integration, clone the Blazor AI Chat — Communicate with Agents That Implement Agent2Agent (A2A) Protocol repository from GitHub and configure your AI service provider in appsettings.json:

{
  "AzureOpenAISettings": {
    "Endpoint": "https://your-instance.openai.azure.com/",
    "Key": "your-api-key",
    "DeploymentName": "your-model-name"
  }
}

Configure Agent Endpoints

The AgentsEndpoints class centralizes agent URLs. The app uses HTTP by default and includes HTTPS alternatives as comments.

public static class AgentsEndpoints {
    public const string PoemAgent = "http://localhost:5003/agent";
    public const string ShakespeareanStyleAgent = "http://localhost:5005/agent";
    public const string TaskAgent = "http://localhost:5007/agent";
    public const string ResearcherAgent = "http://localhost:5009/agent";
    // HTTPS alternatives:
    // public const string PoemAgent = "https://localhost:5004/agent";
    // public const string ShakespeareanStyleAgent = "https://localhost:5006/agent";
    // public const string TaskAgent = "https://localhost:5008/agent";
    // public const string ResearcherAgent = "https://localhost:5010/agent";
}

Start the four agent servers first (PoemAgentServer on http://localhost:5003, ShakespeareanStyleAgentServer on http://localhost:5005, TaskAgentServer on http://localhost:5007, ResearcherAgentServer on http://localhost:5009). Wait until each reports that it is listening on its port. Then start the Blazor Server app, select an agent in the UI, and start chatting. You can switch agents at runtime. The implementation supports Azure OpenAI, OpenAI API, and local runtimes like Ollama with minimal changes.

Your Feedback Matters

We're gathering feedback to prioritize future enhancements to our AI agent integration capabilities. Please take a moment to share your experience and help us shape future AI integration features:

DevExpress Blazor AI Chat — Tool Call Confirmation

Dmitry Tokmachev (DevExpress) — Mon, 18 Aug 2025 01:35:00 Z

Modern AI-powered applications often execute tools automatically in response to user queries. While this automation embraces the potential of LLMs and improves user experiences, it can introduce security risks when sensitive operations are invoked without explicit user consent — for example, modifying databases, sending emails, or making API calls to external services.

This post outlines the purpose of our Tool Call Confirmation API layer and associated customizable interface for the DevExpress Blazor AI Chat component. As you would expect, our solution intercepts AI-initiated function calls, generates detailed confirmation dialogs, and requires user approval before execution. This UI pattern is common in GitHub Copilot Chat, Cursor, Claude, and other AI-powered applications with MCP support.

In this post, I'll walk you through our AI Chat confirmation system, its key components, and customization options (and of course show you how to add this security layer to your AI-powered Blazor applications using the DevExpress Blazor AI Chat control).

The Challenge: Balancing Automation and Security

AI function calling is a powerful resource - one that allows models to interact seamlessly with app functionality. However, this power must be used responsibly. Consider the following usage scenarios:

An AI model deletes user data in response to an ambiguous request.
Unmanaged API calls generate unexpected costs or trigger external processes.
Functions modify application state or UI without the user's knowledge.

The technique described in this post strikes a balance between convenience and control: it preserves the benefits of automated tool calling and gives users explicit authority over sensitive or irreversible operations.

Before You Start

Create and configure the DevExpress Blazor Chat ( DxAIChat ) component in your Blazor application. For setup instructions, review the following: Blazor Chat documentation.

This example targets Azure OpenAI, but the solution is compatible with any AI service that implements the IChatClient interface from the "Microsoft.Extensions.AI" library.

The following code in Program.cs defines the basic configuration:


using Azure;
using Azure.AI.OpenAI;
using Microsoft.Extensions.AI;

var builder = WebApplication.CreateBuilder(args);

// Replace with your endpoint, API key, and model's deployment name
string azureOpenAIEndpoint = Environment.GetEnvironmentVariable("AZURE_OPENAI_ENDPOINT");
string azureOpenAIKey = Environment.GetEnvironmentVariable("AZURE_OPENAI_API_KEY");
string deploymentName = "your-model-deployment-name";

var azureChatClient = new AzureOpenAIClient(
    new Uri(azureOpenAIEndpoint),
    new AzureKeyCredential(azureOpenAIKey))
    .GetChatClient(deploymentName)
    .AsIChatClient();

builder.Services.AddDevExpressBlazor();
builder.Services.AddDevExpressAI();

Architecture Overview

IToolCallFilter
Manages AI tool calls before they are executed.
CustomFunctionInvokingChatClient
Extends the default behavior used to invokes tools.
CustomFunctionInvokingChatClientExtensions
The Fluent API allows you to leverage tool call confirmation with a single line of configuration when building the chat client.
Confirmation UI
Displays the dialog used to confirm tool calls.

Manage Tool Calls (IToolCallFilter)

The heart of our confirmation system is the IToolCallFilter interface - an interface which defines how the chat intercepts and manages function calls.


public interface IToolCallFilter {
    public event Action<FunctionInvocationContext, TaskCompletionSource<bool>> ToolCalled;

    Task<bool> InvokeFunctionFilter(FunctionInvocationContext context);
}

The MyToolCallFilter manages AI-triggered actions and executes sensitive operations only when approved. The API design allows the filter to pause function execution, await user input, and continue or cancel based on the user's decision. A TaskCompletionSource<bool> instance enables asynchronous communication between the UI and filter logic.


public class MyToolCallFilter : IToolCallFilter {
    public event Action<FunctionInvocationContext, TaskCompletionSource<bool>> ToolCalled;

    public Task<bool> InvokeFunctionFilter(FunctionInvocationContext context) {
        if (ToolCalled is null)
            return Task.FromResult(true);

        var tcs = new TaskCompletionSource<bool>();
        ToolCalled.Invoke(context, tcs);
        return tcs.Task;
    }
}

Confirm Tool Calls (CustomFunctionInvokingChatClient)

The CustomFunctionInvokingChatClient class extends our Blazor AI Chat control's default behavior:

Intercepts AI tool calls (defines a custom FunctionInvoker delegate).
Checks for confirmation logic (whether the filter has been registered in the service collection).
Proceeds with user approval. If the user cancels the request, the CustomFunctionInvoker method call returns a cancellation message instead of executing the tool. The message tells the LLM that the operation was aborted and that the requested information is unavailable.


public class CustomFunctionInvokingChatClient : FunctionInvokingChatClient {
    public CustomFunctionInvokingChatClient(IChatClient innerClient, ILoggerFactory? factory = null,
        IServiceProvider? services = null)
        : base(innerClient, factory, services) {
        if(services == null) {
            throw new ArgumentNullException(nameof(services), "Service provider cannot be null.");
        }
        FunctionInvoker = CustomFunctionInvoker;
    }

    private async ValueTask<object?> CustomFunctionInvoker(FunctionInvocationContext context,
        CancellationToken cancellationToken) {
        IToolCallFilter? filter = FunctionInvocationServices!.GetService<IToolCallFilter>();

        if(await (filter?.InvokeFunctionFilter(context) ?? Task.FromResult(true))) {
            return await context.Function.InvokeAsync(context.Arguments, cancellationToken);
        }

        return "The tool call was cancelled by the user. Do not attempt to invoke this tool again. Return a message indicating that the call was cancelled and that the weather information is unavailable at this time.";
    }
}

Create the Confirmation UI

The confirmation dialog displays details about the pending tool call, including tool name, description, and arguments. A user can verify the tool call and ensure that retrieved arguments match the request. Confirm and Cancel buttons allow the user to approve or cancel the operation.


@if(_pendingTcs != null) {
    <div>
        @if(_pendingContext != null) {
            <p><strong>Please confirm the tool call.</strong></p>
            <blockquote>
                <p><strong>Tool Called:</strong> @_pendingContext.Function.Name</p>
                <p><strong>Description:</strong> @_pendingContext.Function.Description</p>
            </blockquote>
            <blockquote>
                <strong>Arguments:</strong>
                <ul>
                    @foreach(var arg in _pendingContext.Arguments) {
                        <li><strong>@arg.Key</strong>: @arg.Value</li>
                    }
                </ul>
            </blockquote>
        }

        <DxButton Text="Confirm"
                  RenderStyle="ButtonRenderStyle.Success"
                  IconCssClass="oi oi-check"
                  Click="() => OnDecisionMade(true)" />
        <DxButton Text="Cancel"
                  RenderStyle="ButtonRenderStyle.Secondary"
                  IconCssClass="oi oi-x"
                  Click="() => OnDecisionMade(false)" />
    </div>
}

The following code implements confirmation workflow. The ConfirmationButtons component subscribes to the ToolCalled event exposed by IToolCallFilter. When AI Chat attempts to invoke a tool, the filter fires this event and passes in a FunctionInvocationContext and a TaskCompletionSource<bool> that awaits the user's decision.


@code {
    private FunctionInvocationContext? _pendingContext;
    private TaskCompletionSource<bool>? _pendingTcs;
    [Inject] IToolCallFilter? ToolCallFilter { get; set; }

    protected override void OnInitialized() {
        if(ToolCallFilter != null) {
            ToolCallFilter.ToolCalled += OnFunctionInvoked;
        }
    }

    private void OnFunctionInvoked(FunctionInvocationContext context, TaskCompletionSource<bool> tcs) {
        _pendingContext = context;
        _pendingTcs = tcs;
        StateHasChanged();
    }

    private void OnDecisionMade(bool decision) {
        _pendingTcs!.SetResult(decision);
        _pendingContext = null;
        _pendingTcs = null;
    }

    public void Dispose() {
        if(ToolCallFilter != null) {
            ToolCallFilter.ToolCalled -= OnFunctionInvoked;
        }
    }
}

Integrate Confirmation UI with Blazor AI Chat

The chat displays the confirmation dialog whenever the LLM is about to execute a tool. The MessageContentTemplate renders the confirmation dialog while the chat is in a "typing" state (indicating that the tool call is being processed).


<DxAIChat CssClass="main-content">
    <MessageContentTemplate Context="context">
        @context.Content
        @if(context.Typing) {
            <ConfirmationButtons />
        }
    </MessageContentTemplate>
</DxAIChat>

Register Services

In Program.cs, register MyToolCallFilter and IChatClient within the dependency injection (DI) container for each user session:


// Register the tool call filter
builder.Services.AddScoped<IToolCallFilter, MyToolCallFilter>();

// Configure the chat client with the confirmation layer
builder.Services.AddScoped(x => {
    return new ChatClientBuilder(azureChatClient)
        .ConfigureOptions(x => {
            x.Tools = [CustomAIFunctions.GetWeatherTool];
        })
        .UseMyToolCallConfirmation()
        .Build(x);
});

builder.Services.AddDevExpressAI();

Fluent API Extension

A fluent API extension allows you to activate tool call confirmation with a single method call in your chat client configuration:


public static class CustomFunctionInvokingChatClientExtensions {
    public static ChatClientBuilder UseMyToolCallConfirmation(this ChatClientBuilder builder,
        ILoggerFactory? loggerFactory = null) {
        return builder.Use((innerClient, services) => {
            loggerFactory ??= services.GetService<ILoggerFactory>();
            return new CustomFunctionInvokingChatClient(innerClient, loggerFactory, services);
        });
    }
}

User Experience in Action

When a user requests weather information, the following sequence occurs:

The LLM identifies that a function call is required.
A confirmation dialog is displayed (instead of executing immediately).
The confirmation dialog displays tool name, description, and retrieved arguments.
The user can approve or cancel the operation
Only approved tools are executed (their results are returned to the LLM).

Your browser does not support the video tag.

Advanced Customization Options

Selective Tool Call Confirmation

SelectiveToolCallFilter extends IToolCallFilter to require user confirmation before calling tools designed to execute sensitive operations (such as deleting data, sending emails, or processing payments):


public class SelectiveToolCallFilter : IToolCallFilter {
    private readonly string[] _sensitiveOperations = { "DeleteData", "SendEmail", "ChargePayment" };

    public Task<bool> InvokeFunctionFilter(FunctionInvocationContext context) {
        // Only require confirmation for sensitive operations
        if (!_sensitiveOperations.Contains(context.Function.Name)) {
            return Task.FromResult(true);
        }

        // Show confirmation for sensitive operations
        if (ToolCalled is null)
            return Task.FromResult(true);

        var tcs = new TaskCompletionSource<bool>();
        ToolCalled.Invoke(context, tcs);
        return tcs.Task;
    }
}

Enhanced Confirmation UI

Modify the ConfirmationButtons.razor component to create a confirmation dialog based on UI requirements. You can modify the layout, apply custom styles, and inform users about the tool they are about to execute.


<div class="tool-confirmation-container">
    <div class="confirmation-header">
        <h5>⚠️ Function Execution Request</h5>
    </div>

    <div class="function-details">
        <div class="detail-row">
            <span class="label">Function:</span>
            <span class="value">@_pendingContext.Function.Name</span>
        </div>
        <div class="detail-row">
            <span class="label">Description:</span>
            <span class="value">@_pendingContext.Function.Description</span>
        </div>
    </div>

    <div class="arguments-section">
        <h6>Arguments:</h6>
        @foreach(var arg in _pendingContext.Arguments) {
            <div class="argument-item">
                <strong>@arg.Key:</strong> @arg.Value
            </div>
        }
    </div>

    <div class="action-buttons">
        <DxButton Text="Approve"
                  RenderStyle="ButtonRenderStyle.Success"
                  Click="() => OnDecisionMade(true)" />
        <DxButton Text="Deny"
                  RenderStyle="ButtonRenderStyle.Danger"
                  Click="() => OnDecisionMade(false)" />
    </div>
</div>

Audit Trail

Log user decisions with relevant details (such as tool name, function arguments, timestamp, and user role):


public class AuditingToolCallFilter : IToolCallFilter {
    private readonly ILogger<AuditingToolCallFilter> _logger;
 
    public AuditingToolCallFilter(ILogger<AuditingToolCallFilter> logger) {
        _logger = logger;
    }

    public event Action<FunctionInvocationContext, TaskCompletionSource<bool>>? ToolCalled;
    public Task<bool> InvokeFunctionFilter(FunctionInvocationContext context)
    {
        if (ToolCalled is null)
            return Task.FromResult(true);

        var tcs = new TaskCompletionSource<bool>();
        
        // Subscribe to the task completion to log the decision
        tcs.Task.ContinueWith(task => {
            if (task.IsCompletedSuccessfully)
            {
                OnDecisionMade(task.Result, context);
            }
        }, TaskContinuationOptions.ExecuteSynchronously);

        ToolCalled.Invoke(context, tcs);
        return tcs.Task;
    }
 
    private void OnDecisionMade(bool decision, FunctionInvocationContext context) {
        _logger.LogInformation("User {Decision} function call: {FunctionName} with args: {Arguments}",
            decision ? "approved" : "denied",
            context.Function.Name,
            string.Join(", ", context.Arguments.Select(a => $"{a.Key}={a.Value}")));
 
        // Send decision data to the analytics service
        // TrackUserDecision(decision, context);
    }
}

Security Considerations

The confirmation UI enhances function calling transparency and user control. To strengthen security alongside the confirmation UI, implement the following measures:

Rate Limiting: Restrict the number of tool calls per user or session.
Permission Checks: Verify user permissions before displaying the confirmation dialog.
Function Validation: Validate function arguments before execution.
Audit Trails: Log all tool calls and user decisions for monitoring and compliance.
Timeout Handling: Automatically deny tool execution if the user does not respond within a predefined period of time.

Download the Example

The full source code for this implementation is available on GitHub. Clone the repo and follow the instructions to setup your tool call confirmation system.

Your Feedback Counts!

This tool call confirmation system demonstrates one approach to balancing AI automation with user control. We're considering including similar functionality as a built-in feature in future versions of the DevExpress Blazor AI Chat component.

In the meantime, we'd love to hear your thoughts on this implementation:

Blazor — Year-End Roadmap (v25.2)

Alex Chuev (DevExpress) — Wed, 13 Aug 2025 08:30:00 Z

Roadmap Updates

Our year-end Blazor roadmap will be updated regularly to reflect development progress. As we get closer to the release, we expect to add additional items and modify the status of planned features. Look for the following labels next to every feature:

Planned — Feature is scheduled but not yet in development.
In Development — Under active development.
Coming in EAP v25.2 — Will be available in our first v25.2 early access preview.
Coming in v25.2 — Will be included in the final v25.2 release.
Released in v25.2 — Fully implemented and available.

.NET 10 Support

Released in v25.2

DevExpress Blazor UI components will support .NET 10 following Microsoft’s official release. Preview builds will be available for early adopters.

Content Security Policy (CSP) Enhancements

Released in v25.2

We plan to enhance Content Security Policy (CSP) support across our Blazor component suite. DevExpress Blazor components will no longer require the unsafe-inline style source.

Accessibility Enhancements

Released in v25.2

Improvements/updates for Data Editors
Screen reader support for the Rich Text Editor
Better keyboard support for Popup, DropDown, and Window components

DevExpress MCP Server for AI-Powered Documentation Access

Available in Preview

We will introduce an MCP server that connects GitHub Copilot Chat, Cursor, and other MCP-compatible AI tools directly to our comprehensive documentation database. The server will provide instant access to over 300,000 help topics through natural language queries within your IDE. This will allow you and AI coding agents such as Claude Code to access current DevExpress documentation directly within the AI assistant's context.

A Focus on Performance

Released in v25.2

We recently introduced significant performance improvements across our Blazor component suite (see v25.1 release notes for additional information). In v25.2, we will extend our performance optimizations with new enhancements. We will update this post with additional information as we get closer to release.

Released in v25.2

We will optimize rendering speed and improve responsiveness for column filter menus used within our Blazor Grid and TreeList components.

Blazor Project Templates — New Sample Views

Released in v25.2

The primary Blazor template in our Template Kit will be able to add sample views for complex component libraries (Blazor Charts, Reporting, Scheduler, and AI Chat).

New Blazor Smart Autocomplete

Released in v25.2

We expect to introduce Smart Autocomplete, a new AI-powered Extension designed to accelerate text input. Smart Autocomplete connects to our Blazor Memo and displays gray inline suggestions based on current input. Suggestions appear seamlessly within the Blazor Memo Editor without interrupting typing flow. Users can accept a suggestion or simply continue typing to dismiss it.

Blazor AI Chat

Tool API

Released in v25.2

New APIs will allow you to create tools that execute any custom command (apply filters to Grids, modify Chart UI, query databases, or perform business actions). With these tools, users will be able to interact with your DevExpress-powered application directly from AI Chat using natural language.

[AIIntegrationTool("DxGrid_SetGridFilter")]
[Description("Applies a filter to the specified DxGrid component using a DevExpress Criteria Language filter string. This changes the UI to display only rows matching the given criteria.")]
public static object SetGridFilter(
        [Description("The DxGrid component to apply the filter to.")]
        DxGrid grid,
        [Description("The filter criteria string in DevExpress Criteria Language Syntax. Example: \"[Status] = 'Active' AND [HireDate] > #2020-01-01#\".")]
        string filter) {
    grid.SetFilterCriteria(CriteriaOperator.Parse(filter ?? string.Empty));
    int visibleRowCount = grid.GetVisibleRowCount();
    return new { success = true, visibleRowCount };
}

Tool Call Visualization

Released in v25.2

The DevExpress Blazor AI Chat control will clearly indicate when it executes tools (declared locally within the app or available via MCP servers). This will increase clarity and transparency and will help users understand what actions are being performed.

Learn more about this feature and take part in our survey: DevExpress Blazor AI Chat — Tool Call Confirmation

Resources

Released in v25.2

We will introduce a resources feature for our Blazor AI Chat control, allowing users to attach additional context to their chat messages. Unlike file attachments, resources can include files or other types of context supplied by the application (binary files including audio, images and PDFs, database schemas, records, logs, etc). Users will be able to view available resources in a dedicated UI element and attach them to their chat context.

Resizing for Input Area

Released in v25.2

Users will be able to resize the chat input area to fit large prompt messages.

Blazor Grid & TreeList

Column Virtualization

Released in v25.2

As you may know, our Blazor Grid and TreeList support row virtualization. In our next major release (v25.2), we plan to extend this capability and support column virtualization. With this feature enabled, the DevExpress Grid and TreeList will only render columns within the current viewport. This will reduce DOM size and ensure fast rendering even for tables with hundreds of columns.

Integrated Filter Builder

Released in v25.2

In our year-end release, we plan to integrate our Filter Builder control directly into the Blazor Grid and TreeList. This integration will reduce the amount of code required to configure filter fields and streamline the process associated with complex filter conditions.

We also expect to synchronize the Filter Builder, Filter Row, and Filter Menus within the same component. Users will be able to view/modify all active filters from a single, centralized UI.

Command Column Icons

Released in v25.2

With v25.2, the DevExpress Blazor Grid and TreeList will display built-in icons for command actions by default. This change will help reduce column width and provide a cleaner, more modern appearance.

Vertical Grid Line Visibility

Postponed to v26.1

We will add an option to hide column lines (vertical separators between adjacent columns) in our Blazor Grid and TreeList components.

This change is part of our ongoing effort to deliver a cleaner and more modern UI.

Blazor Grid

Released in v25.2

We plan to introduce a built-in context menu for the Blazor Grid component. Our context menu will include a predefined set of actions for each Grid region and allow you to define/customize items. Supported regions will include:

Row
Group Row
Column
Footer
Group panel
Group footer

We also plan to include a set of built-in actions for the column region to simplify common operations.

Blazor Data Editors

Released in v25.2

Users will be able to focus individual tags, making it easier to manage tag collections using only the keyboard (e.g., to delete a specific tag).

Date Edit & Time Edit — Time Selection UI Redesign

Released in v25.2

We will rework the popup UI for our Date Edit and Time Edit components to improve usability and make the Accept/Cancel buttons more visible.

As part of this update, the Clear button will also be removed from the popup and will only remain in the edit box. To clear the editor value, users will be able to execute the new Alt+Del shortcut (like our ComboBox editor).

Blazor Memo — Adaptive Height Support

Released in v25.2

Our Blazor Memo will be able to auto-adjust height based on content (to display text without scrolling).

Filter Builder — Official Release

Released in v25.2

The Filter Builder component (introduced as a CTP in v25.1) will be ready for production use in v25.2. Planned new features/enhancements:

Keyboard navigation and accessibility (a11y) support
Improved localization
Direct integration with the Grid, eliminating the need to configure the Filter Builder separately
Expanded customization API with support for additional templates and configurable filter operators
Enhanced performance for large data objects

Blazor Pivot Table — Official Release

In v25.1, we shipped a number of essential Pivot Table-related features, including API and UI-based filtering, field reordering, persistent layout support, and a built-in field list.

We initially planned to announce the official release in v25.1. However, two key features — column virtualization and keyboard navigation, were not yet ready for production use, so we decided to postpone the official release announcement.

With v25.2, we expect to officially ship the DevExpress Blazor Pivot Table control. We will conduct additional testing and apply final polish to ensure the component meets production-ready standards.

Released in v25.2

Users will be able to access every UI element in the DevExpress Blazor Pivot Table via the keyboard. In addition, we plan to add keyboard shortcuts for the following actions:

Sorting
Filtering
Expanding/collapsing grouped values

Column Virtualization

Released in v25.2

To ensure optimal performance with large datasets, our Blazor Pivot Table already supports row virtualization. In v25.2, we plan to extend this functionality by adding column virtualization.

This feature is essential when the Pivot Table displays a large number of columns — for example, when displaying one column per day across an entire year. Column virtualization will allow the component to render visible columns, significantly reducing DOM size and improving responsiveness.

As part of this effort, we will perform extensive internal testing to verify performance and stability in high density scenarios. Our goal is to ensure reliable operation when working with horizontally large datasets.

Blazor Ribbon

Official Release

Released in v25.2

The single-line Ribbon component, previously available as a CTP, will be officially released and ready for production use in v25.2. Planned enhancements include:

Visual improvements, including a redesigned overflow menu with item groups, scrolling support, and a more polished appearance
Extended APIs for Ribbon items
Keyboard navigation and accessibility (a11y) support
Reworked adaptivity logic for better responsiveness

Rich Text Editor and HTML Editor Integration

Released in v25.2

Our Rich Text Editor and HTML Editor components will use the new Ribbon internally and will benefit from its enhanced visuals, reworked adaptivity, and extensive customization options.

Blazor Scheduler

Timeline View — More Compact Cell Height

Released in v25.2

Currently, cell height in the Scheduler Timeline view cannot be less than 150 pixels. In v25.2, we plan to remove minimum cell height restrictions and calculate it based on appointment size. This change will help you to create more compact interfaces and maximize screen real-estate.

UI/UX Enhancements

Time Cells & Appointment Hover Effect

Released in v25.2

In our year-end release, we expect to introduce a new hover effect for both empty cells and appointments:

For an empty area, the hover effect will suggest to create a new appointment
For existing appointments, the hover effect will signal that the item can be edited or resized.

The hover effect will improve perceived responsiveness by indicating that a hovered element is interactive. It will not appear if appointment creation or editing is disabled.

Released in v25.1.4

We plan to introduce minor layout refinements to the Scheduler’s tooltip and edit form. These changes will improve visual structure, reduce unnecessary spacing, and contribute to a cleaner, more consistent UI.

Blazor Themes

Theme API — Current Theme

Postponed to v26.1

We will extend our theme APIs to allow developers to check which theme is currently applied.

Fluent — Bootstrap Styles

Released in v25.1.4

Fluent themes will include optional Bootstrap styles for the default color accent (blue) in both light and dark modes. You will be able to include them as follows:

@DxResourceManager.RegisterTheme(Themes.Fluent.Clone(properties => {
    properties.UseBootstrapStyles = true;
}))

For styles dependent on Fluent accent colors, we recommend using DevExpress CSS variables instead. Due to Bootstrap's CSS architecture, Bootstrap styles will not reflect your accent colors, so use them only for non-color customizations.

Fluent — Public CSS Variables

Released in v25.2

We will document global CSS variables available in Fluent. This documentation will help you customize Fluent themes or simply reference global variables in your own CSS.

.my-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-wrap: break-word;
    background-color: var(--DS-color-surface-neutral-default-rest);
    background-clip: border-box;
    border: var(--DS-border-radius-10) solid var(--DS-color-border-neutral-default-rest);
    border-radius: 0.25rem;
}

Blazor Reporting

Learn more: DevExpress Reports & BI Dashboard — Year-End Roadmap (v25.2)

Your Feedback Matters

DevExpress Blazor AI Chat — Build a Multi-LLM Chat Application

Dmitry Tokmachev (DevExpress) — Tue, 06 May 2025 23:40:00 Z

AI services offer a variety of models tailored to meet user needs, preferences, and resource constraints. As you'd expect, models have strengths/weaknesses — some are optimized for coding tasks, while others are better suited for creative writing or real-time information retrieval.

To select the appropriate model, you often need to balance performance and cost. For example, advanced models like GPT-4.1 deliver exceptional results but require greater computational resources. In contrast, lighter models such as GPT-4.1 Mini or Nano offer faster response and lower costs, making them ideal for those seeking efficiency and responsiveness.

For enterprise applications, the ability to connect to a cloud-based AI service — with the option to fallback to offline models running in restricted environments — is often a must.

In this post, I’ll show you how to build a multi-LLM (Large Language Model) chat application that uses DevExpress Blazor AI Chat and ComboBox components. You’ll learn how to implement the IChatClient interface to manage multiple chat clients and their respective conversation histories (and how to use the DevExpress Blazor ComboBox to switch between LLMs during a chat session).

Getting Started

To get started, you must first integrate the DxAIChat component into your application (see our official guide for additional information in this regard): Add AI Chat to a Project.

In this guide, I will use two LLMs: GPT-4o from Azure OpenAI and Phi4 from Ollama running locally.

Here are my sample registrations for both chat clients from my Program.cs code unit. Note that I store LLM credentials and settings in the app configuration file (appSettings.Development.json). You can modify the following code to match your specific requirements:


using Azure;
using Azure.AI.OpenAI;
using Microsoft.Extensions.AI;
...
var openAiServiceSettings = builder.Configuration.GetSection("OpenAISettings").Get<OpenAIServiceSettings>();
var ollamaSettings = builder.Configuration.GetSection("OllamaSettings").Get<OllamaSettings>();

IChatClient azureChatClient = new AzureOpenAIClient(
    new Uri(openAiServiceSettings.Endpoint),
    new AzureKeyCredential(openAiServiceSettings.Key))
    .AsChatClient(openAiServiceSettings.DeploymentName);

IChatClient ollamaChatClient = new OllamaChatClient(
    new Uri(ollamaSettings.Uri), 
    ollamaSettings.ModelName);

NOTE: To install, run, and download Ollama model, refer to the DevExpress AI Extensions — Prerequisities help topic.

Next, we will implement infrastructure designed to track each client and its history.

CompositeChatClient Implementation

First, declare the ChatClientSession class that represents an individual LLM session (includes the user-friendly model/service name, a client instance, and message history):


using Microsoft.Extensions.AI;
//...
public class ChatClientSession {
    public string Name { get; set; }
    public IChatClient Client { get; }
    public List<BlazorChatMessage> Messages { get; set; }

    public ChatClientSession(IChatClient client, string name) {
        Name = name;
        Client = client ?? throw new ArgumentNullException(nameof(client));
        Messages = new List<BlazorChatMessage>();
    }
}

Next, define the CompositeChatClient class, which implements the IChatClient interface and serves as a container for multiple chat clients. By wrapping multiple clients within a single interface implementation, we can integrate this functionality with the DevExpress Blazor AI Chat component (which relies on the IChatClient interface).

This class is designed to support LLM switch while preserving individual conversation histories. Key considerations include:

Chat Client Management: Stores a list of ChatClientSession objects, where each object represents an LLM and its associated chat history.
Message Handling: Routes messages to the currently selected chat client and retrieves responses.

Here’s the implementation:


using Microsoft.Extensions.AI;
//...
public class CompositeChatClient : IChatClient	{
    public List<ChatClientSession> AvailableChatClients { get; }
    public ChatClientSession? SelectedSession { get; set; }
    public CompositeChatClient(params ChatClientSession[] chatClients)	{
        AvailableChatClients = chatClients.ToList();
        SelectedSession = AvailableChatClients[0];
    }

    public Task<ChatResponse> GetResponseAsync(IEnumerable<ChatMessage> messages, ChatOptions? options = null,
        CancellationToken cancellationToken = new CancellationToken())	{
        return SelectedSession?.Client.GetResponseAsync(messages, options, cancellationToken);
    }

    public IAsyncEnumerable<ChatResponseUpdate> GetStreamingResponseAsync(IEnumerable<ChatMessage> messages, ChatOptions? options = null,
        CancellationToken cancellationToken = new CancellationToken())	{
        return SelectedSession?.Client.GetStreamingResponseAsync(messages, options, cancellationToken);
    }

    public void Dispose()	{
        for (int i = 0; i < AvailableChatClients.Count; i++)	{
            AvailableChatClients[i].Client.Dispose();
            AvailableChatClients[i].Messages.Clear();
        }
    }
    public object? GetService(Type serviceType, object? serviceKey = null) {
        throw new NotImplementedException();
    }
}

Finally, switch back to the Program.cs and register CompositeChatClient as follows:


// Register both clients within a single instance of the IChatClient
var compositeChatClient = new CompositeChatClient(
    new ChatClientSession(azureChatClient, "Azure Open AI — GPT4o"), 
    new ChatClientSession(ollamaChatClient, "Ollama — Phi 4"));

builder.Services.AddScoped<IChatClient>((provider) => compositeChatClient);
builder.Services.AddDevExpressAI();

LLM Selection Using a ComboBox

To allow LLM selection, open the razor page with the DxAIChat component and add the DevExpress Blazor ComboBox. Key considerations include:

CompositeChatClient Injection: The CompositeChatClient is injected to the page. It provides a list of available chat clients to the UI application.
LLM Selection: The DxComboBox component is bound to a list of clients and triggers a callback when selection changes.
Chat Session Management: The OnModelChanged callback handles chat history save and load operations (when a user switches between LLMs).

Here’s a snippet of the implementation:


@page "/"
@using DevExpress.AIIntegration.Blazor.Chat
@using DXBlazorChatSelector.Services
@using Microsoft.Extensions.AI

<div class="main-container">
    <div class="top-container">
        <DxComboBox Data="@ModelsList"
        	CssClass="selector-container-combo-editor"
        	TextFieldName="@nameof(ChatClientSession.Name)"
            Value="ChatClientProvider.SelectedSession"
        	ValueChanged="@((ChatClientSession session) => OnModelChanged(session))"/>
    	</div>
    <DxAIChat @ref="DxAiChat" CssClass="my-chat"></DxAIChat>
</div>

@code{

    [Inject]
    IChatClient? ChatClient { get; set; }
    CompositeChatClient ChatClientProvider => ChatClient as CompositeChatClient;
    DxAIChat? DxAiChat { get; set; }
    List<ChatClientSession> ModelsList => ChatClientProvider?.AvailableChatClients;

    private void OnModelChanged(ChatClientSession value)  {
        SaveLastAssistantMessage(DxAiChat.SaveMessages());
        ChatClientProvider.SelectedSession = value;
        DxAiChat.LoadMessages(ChatClientProvider.SelectedSession.Messages);
    }

    private void SaveLastAssistantMessage(IEnumerable<BlazorChatMessage> saveMessages)	{
        if(ChatClientProvider.SelectedSession != null) {
            ChatClientProvider.SelectedSession.Messages.Clear();
            ChatClientProvider.SelectedSession.Messages.AddRange(saveMessages);
        }
    }
}

Start New Chat Implementation

To clear the message history for the selected LLM and start a new chat session, we will add a DxButton and place it near the DxComboBox in the Index.razor page. Key considerations include:

Button Style: The button uses an SVG icon declared in CSS.
Session Reset: On click, the button clears the message history for the selected LLM and updates the chat UI.

The updated code for the Index.razor page:


@page "/"
@using DevExpress.AIIntegration.Blazor.Chat
@using DXBlazorChatSelector.Services
@using Microsoft.Extensions.AI

<div class="main-container">
    <div class="top-container">
    	<DxButton RenderStyle="ButtonRenderStyle.Primary"
        			RenderStyleMode="ButtonRenderStyleMode.Contained"
                  	IconCssClass="refresh"
                  	IconPosition="ButtonIconPosition.BeforeText"
                  	CssClass="refresh-button"
                  	Text="Start New Chat"
                  	Click="ClearHistory"/>
        <DxComboBox Data="@ModelsList"
        			CssClass="selector-container-combo-editor"
        			TextFieldName="@nameof(ChatClientSession.Name)"
            		Value="ChatClientProvider.SelectedSession"
        			ValueChanged="@((ChatClientSession session) => OnModelChanged(session))"/>
    	</div>
    <DxAIChat @ref="DxAiChat" CssClass="my-chat"></DxAIChat>
</div>

@code{

    [Inject]
    IChatClient? ChatClient { get; set; }
    CompositeChatClient ChatClientProvider => ChatClient as CompositeChatClient;
    DxAIChat? DxAiChat { get; set; }
    List<ChatClientSession> ModelsList => ChatClientProvider?.AvailableChatClients;

 	private void ClearHistory()	{
        ChatClientProvider.SelectedSession.Messages.Clear();
        DxAiChat.LoadMessages(ChatClientProvider.SelectedSession.Messages);
    }
    private void OnModelChanged(ChatClientSession value)	{
        SaveLastAssistantMessage(DxAiChat.SaveMessages());
        ChatClientProvider.SelectedSession = value;
        DxAiChat.LoadMessages(ChatClientProvider.SelectedSession.Messages);
    }

    private void SaveLastAssistantMessage(IEnumerable<BlazorChatMessage> saveMessages)	{
        if(ChatClientProvider.SelectedSession != null) {
            ChatClientProvider.SelectedSession.Messages.Clear();
            ChatClientProvider.SelectedSession.Messages.AddRange(saveMessages);
        }
    }
}

The Final Result

The following video demonstrates our implementation:

Your browser does not support the video tag.

Review our GitHub Example

To download a complete sample and explore the implementation, refer to the following GitHub Repository: DevExpress Blazor AI Chat — Implement Switching Between Multiple AI Services.

Conclusion

By combining the power of the IChatClient interface, the DevExpress Blazor ComboBox, and the DevExpress Blazor AI Chat component, you can deliver curated user experiences when using multiple LLMs.

If you have any questions related to this implementation or would like to discuss AI-related integration needs, feel free to submit a support ticket via the DevExpress Support Center. We'll be happy to follow up.

Blazor — Early Access Preview (v25.1)

Slava Khudyakov (DevExpress) — Wed, 23 Apr 2025 11:55:00 Z

Our next major update (v25.1) is set for release in early June. In this post, I'll summarize some of the features/capabilities available in our early access (EAP) build. Before I begin — a quick reminder: If you are an active Universal or DXperience subscriber and want to explore upcoming v25.1-related features/capabilities before official release, you can download our EAP build via the DevExpress Download Manager. Should you encounter issues with the EAP build, please submit a support ticket using the DevExpress Support Center.

Early Access and CTP builds are provided solely for early testing purposes and are not ready for production use. This build can be installed side by side with other major versions of DevExpress products. Please backup your project and other important data before installing Early Access and CTP builds. This EAP does not include all features/products we expect to ship in our v25.1 release cycle. As its name implies, the EAP offers an early preview of what we expect to ship in two months.

Legacy Data Grid, ComboBox, Tag Box, and List Box are No Longer Available

To streamline our distribution, we have removed the following legacy components from our v25.1 update:

DxDataGrid
DxComboBoxLegacy
DxTagBoxLegacy
DxListBoxLegacy

To avoid issues, please check your projects for components from the DevExpress.Blazor.Legacy namespace and migrate to new DevExpress alternatives.

Helpful resources:

If you are still using older versions of DevExpress Blazor components, please contact us via the DevExpress Support Center and let us know how we can help you migrate to newer alternatives.

Blazor Editors

Blazor ComboBox — Set Data Load Mode

The DevExpress Blazor ComboBox allows you to manage data source interactions using DataLoadMode. Since v24.1, our Blazor ComboBox caches data to reduce frequent database requests. You can now set DataLoadMode to OnDemand (similar to behaviors available prior to v24.1). This option allows the ComboBox to fetch data from the data source each time the dropdown activates. When this option is used, our Blazor ComboBox does not preload data when the page loads (improving initial page load speed.

Blazor List Box — Select All

The DevExpress Blazor List Box allows you to display a Select All check box above list box items.

To explore the capabilities of the EAP version of the DevExpress Blazor List Box control, open our locally installed Blazor demo: ListBox → Multiple Selection .

App Showcase Demo

New CRM, Analytics, and Scheduling/Planning modules (built with our Blazor Grid, TreeList, Scheduler, ListBox, ComboBox, Charts, and other DevExpress Blazor components).

Our showcase demo utilizes InteractiveAuto render mode, introduced in .NET 8 — starting with Blazor Server for fast initial load and seamlessly transitioning to WebAssembly (WASM) for optimal speed and responsiveness.

The application uses our new Fluent theme with light/dark mode support. Each module is built with reusable code, so you can easily adapt/integrate module components into your next DevExpress-powered Blazor project.

To explore the capabilities of the demo, open our locally installed showcase demo: DevExpress Demos 25.1\Components\Blazor\BlazorDemo.Showcase or visit https://demos.devexpress.com/blazor-showcase/

Blazor Pivot Table

Filter Data

The DevExpress Blazor Pivot Table allows you to apply filters to fields displayed in the Filter Header Area. You can define these filter fields in component markup or drag them from other Pivot Table areas. Use the FilterHeaderAreaDisplayMode property to control Filter Header Area visibility.

Filter field headers display filter menu buttons. Users can press these buttons to open Field Filter Menus. You can use the following properties to control filter menu button visibility:

DxPivotTable.FilterMenuButtonDisplayMode - Specifies whether a filter menu button is visible for all filter field headers.
DxPivotTableField.FilterMenuButtonDisplayMode - Specifies whether a filter menu button is visible for a specific field.

The Field Filter Menu displays a drop-down window with all unique values of the field. Users can select/deselect these values to filter Pivot Table data.

You can use the following APIs to customize the filter menu as requirements dictate:

The CustomizeFilterMenu event fires before the drop-down filter is displayed and allows you to customize filter items.
The FilterMenuTemplate property specifies the template used for the content displayed within the field's drop-down filter.
The FieldFilterMenuTemplate property specifies the template used for all drop-down filter menus in the Pivot Table.

In addition to the UI-based filtering options, the DevExpress Blazor Pivot Table allows you to filter data in code. To apply filter criteria, create a criteria operator object that specifies a filter expression and send this object to the SetFilterCriteria method.

To explore the capabilities of the EAP version of the DevExpress Blazor Pivot Table control, open our locally installed Blazor demo: Pivot Table → Filter Data.

Blazor Grid & TreeList

PDF Export

Our Blazor Grid and TreeList now support PDF export APIs. This feature allows you to generate PDF documents while preserving key data presentation elements, including:

Column order, captions, and alignment
Value format and alignment
Group rows, group summaries, and group totals
Total summaries

We do not expect to support full WYSIWYG export - some UI elements (such as the group panel, search panel, toolbar, and pager, as well as custom CSS styles) will be excluded.

To explore the capabilities of the EAP version of the DevExpress Blazor Grid control, open our locally installed Blazor demo: Grid → Export → Export Data.

Keyboard Support Enhancements

Filter Row: Users can now enter a new filter value even if a cell editor is inactive (no need to press Enter first).
Cell Editing: If the EditOnKeyPress property is enabled, users can begin typing to open an editor for a focused cell.

Performance Enhancements

We optimized our Blazor Context Menu's rendering logic to reduce the number of messages sent between the server and client. Depending on connection quality and the number of items, DevExpress Context Menus now open 20-50% faster when used in Blazor Server applications.

Blazor Rich Text Editor

Zoom Operations

With v25.1, the DevExpress Blazor Rich Text Editor allows you to zoom in/out of documents with ease (via the UI and in code). Users can modify document zoom level using a drop-down menu within the View Ribbon tab. Available levels range from 50% to 200% . Disable the AllowZoom property to hide the drop-down zoom level menu. Irrespective of the AllowZoom property value, you can use the ZoomLevel property to zoom a document at runtime.

To explore the capabilities of the EAP version of the DevExpress Blazor RichEdit control, open the following locally installed Blazor demo: Rich Text Editor → Overview .

Blazor Scheduler

The DevExpress Blazor Scheduler allows you to define custom toolbar items and customize the following built-in items:

Today button
Next and Previous buttons
Date navigator
Resource navigator
Scheduler View selector

Customization options include:

Position and alignment of toolbar items.
Enabled, Visible, Tooltip, and Render Style properties.

Use the ToolbarItems tag to modify a collection of visible toolbar items. Declare DxToolbarItem objects to add custom items to this collection. Alternatively, disable the ShowToolbarArea property to hide the toolbar entirely.

      <DxScheduler ...>
    <ToolbarItems>
        <DxSchedulerPreviousIntervalToolbarItem />
        <DxSchedulerNextIntervalToolbarItem />
        <DxSchedulerTodayToolbarItem />
        <DxSchedulerDateNavigatorToolbarItem />
        <DxToolbarItem GroupName="ScaleDuration"
                       Text="1 day"
                       Click="@((i) => CurrentDuration = TimeSpan.FromHours(24))"
                       Checked="@(CurrentDuration == TimeSpan.FromHours(24))"
                       BeginGroup="true"
                       Alignment="ToolbarItemAlignment.Right"></DxToolbarItem>
        <DxToolbarItem GroupName="ScaleDuration"
                       Text="2 days"
                       Click="@((i) => CurrentDuration = TimeSpan.FromHours(48))"
                       Checked="@(CurrentDuration == TimeSpan.FromHours(48))"></DxToolbarItem>
        <DxToolbarItem GroupName="ScaleDuration"
                       Text="3 days"
                       Click="@((i) => CurrentDuration = TimeSpan.FromHours(72))"
                       Checked="@(CurrentDuration == TimeSpan.FromHours(72))"></DxToolbarItem>
    </ToolbarItems>
</DxScheduler>

To explore the capabilities of the EAP version of the DevExpress Blazor Scheduler control, open the following locally installed Blazor demo: Scheduler → Customization → Custom Toolbar Items .

Appointment Form Resize and Drag Operations

You can now drag and resize our Extended Appointment Form (it is now easier to view the entirety of a calendar without discarding changes).

Performance Enhancements

We enhanced performance for the following operations/usage scenarios:

Time needed to open Date Navigator and Resource Navigator popups
Appointment dragging
Time needed to open an appointment’s tooltip and compact/extended form
Creating, updating, and deleting appointments

UI/UX Enhancements

Icons used for the Today button and each view selector (Day, Work Week, Month, Timeline).
A dropdown button for the view selector. In previous versions, we used a button group to select view type. With our new dropdown button, the UI requires less space, improving the user experience and allowing you to add additional custom items to the toolbar.
A new render style mode for built-in toolbar items. We changed the render style mode to Plain.
New appointment label colors in the Fluent theme. We updated default label colors, replacing bright colors with a pastel palette. This modification was designed to improve visual clarity and reduces eye strain.
New status styles for the Fluent theme. Appointment statuses now use styles similar to those of Microsoft Outlook.

Blazor Charts

New APIs include:

ZoomChanged event - triggers whenever a zoom or pan operation is performed.
ResetVisualRange method - restores the maximum possible visual range.
SetArgumentAxisVisualRange method - applies a specific visual range to the argument axis.

Series Label API Enhancements

v25.1 includes an expanded the list of series label options. DxChartSeriesLabel supports the following pie series label-related properties:

TextOverflow and WordWrap - specifies how the Pie Chart displays text for overflowing labels.
RadialOffset - shifts pie series labels radially away from or towards the center of a chart.

Legend Click Events

v25.1 ships with DxChart.LegendClick, DxPolarChart.LegendClick, and DxPieChart.LegendClick events. Handle these events to execute custom logic when users click legend items.

Your Feedback Counts

If you have a specific question about our Blazor EAP (v25.1), feel free to submit a support ticket via the DevExpress Support Center. We will be happy to follow-up.

For additional information on what you can expect from our mid-year release, please refer to our June 2025 Roadmap.

DevExpress Blazor AI Chat — Implement Function Calling

Dmitry Tokmachev (DevExpress) — Wed, 09 Apr 2025 00:15:00 Z

Modern AI-powered applications require seamless interaction with external systems or internal app components. Many AI service providers now support function calling (also known as tool calling), which allows AI models to trigger functions at runtime. This capability is of particular value for agentic workflows/applications wherein AI needs to execute actions such as fetching data, invoking APIs, or initiating tasks within an application (from scheduling appointments and modifying database info to updating the app’s appearance).

The overall flow in this instance looks like this: instead of replying to a user message, the model requests a function invocation with specified arguments. The chat client then invokes the function and supplies the result back to the LLM. At this point, the LLM constructs a response considering the value returned from the function.

In this guide, we'll explore how to enable function calling in the DevExpress Blazor DxAiChat component using:

The IChatClient interface from the Microsoft.Extensions.AI library.
Plugins from Microsoft's Semantic Kernel.

Getting Started

To get started, you must first integrate the DxAiChat component into your application (see our official guide for additional information): Add AI Chat to a Project.

Next, register your AI service. In this example, we’ll use Azure OpenAI. Here’s a sample Program.cs setup:



using Azure.AI.OpenAI;
using Microsoft.Extensions.AI;
...
var builder = WebApplication.CreateBuilder(args);
...
// Replace with your endpoint, API key, and deployed AI model name
string azureOpenAIEndpoint = Environment.GetEnvironmentVariable("AZURE_OPENAI_ENDPOINT");
string azureOpenAIKey = Environment.GetEnvironmentVariable("AZURE_OPENAI_API_KEY");
string deploymentName = string.Empty;
...
var azureChatClient = new AzureOpenAIClient(
    new Uri(azureOpenAIEndpoint),
    new AzureKeyCredential(azureOpenAIKey));

IChatClient chatClient = azureChatClient.AsChatClient(deploymentName);

builder.Services.AddDevExpressBlazor();
builder.Services.AddChatClient(chatClient);
builder.Services.AddDevExpressAI();
...

Run the project to confirm that you can send messages and receive AI responses.

Tool Calling with IChatClient

First, define a simple function to retrieve weather information for a specified city. In this example, this is GetWeatherTool. To help AI understand how to invoke the GetWeatherTool function, use the System.ComponentModel.Description attribute for both the method and its parameters. LLM uses parameters to figure out the most suitable method call and plan a call sequence:

using System.ComponentModel;
using Microsoft.Extensions.AI;

public class CustomAIFunctions
{
    public static AIFunction GetWeatherTool => AIFunctionFactory.Create(GetWeather); 
    [Description("Gets the current weather in the city")]
    public static string GetWeather([Description("The name of the city")] string city)
    {
        switch (city)
        {
            case "Los Angeles":
            case "LA":
                return GetTemperatureValue(20);
            case "London":
                return GetTemperatureValue(15);
            default:
                return $"The information about the weather in {city} is not available.";
        }
    }
    static string GetTemperatureValue(int value)
    {
        var valueInFahrenheits = value * 9 / 5 + 32;
        return $"{valueInFahrenheits}\u00b0F ({value}\u00b0C)";
    }
}

Modify the chat client registration as shown below to provide a list of available functions and allow the client to invoke functions when responding to user questions. Ensure that you configure the chat client options first, as the method call sequence is crucial here:

using Azure;
using Azure.AI.OpenAI;
using Microsoft.Extensions.AI;
...
IChatClient chatClient = new ChatClientBuilder(azureChatClient)
    .ConfigureOptions(opt =>
    {
        opt.Tools = [CustomAIFunctions.GetWeatherTool];
    })
    .UseFunctionInvocation()
    .Build();

builder.Services.AddChatClient(chatClient);

At this point, when the user asks the AI service about the weather, the service will automatically trigger the GetWeatherTool function and add results into its response.

Integrating Semantic Kernel Plugins

Microsoft Semantic Kernel allows developers to incorporate advanced AI capabilities into their apps (including reasoning, workflow orchestration, and dynamic prompt engineering). Microsoft's framework enhances AI-powered solutions by allowing apps to interact with plugins and manage memory more effectively.

To begin, add the following NuGet packages to your project:

Microsoft.SemanticKernel
Microsoft.SemanticKernel.Plugins.Core
Microsoft.SemanticKernel.Connectors.OpenAI (or an appropriate connector for your AI provider)

If you are already using the Semantic Kernel in your app and are familiar with the Plugin concept, you can easily connect it to our Blazor DxAiChat control.

Since DevExpress AI-powered APIs operate with LLMs using the IChatClient interface, you need to implement the interface manually and invoke IChatCompletionService methods from the Semantic Kernel:

using Microsoft.Extensions.AI;
using Microsoft.SemanticKernel;
using Microsoft.SemanticKernel.ChatCompletion;
using Microsoft.SemanticKernel.Connectors.OpenAI;
...
public class SemanticKernelPluginCallingChatClient : IChatClient {
	private IChatCompletionService _chatCompletionService;
    private Kernel _kernel;
    private OpenAIPromptExecutionSettings _executionSettings;
    public SemanticKernelPluginCallingChatClient(Kernel kernel)
    {
    	_kernel = kernel;
        _chatCompletionService = _kernel.GetRequiredService();
        _executionSettings = new OpenAIPromptExecutionSettings() { ToolCallBehavior = ToolCallBehavior.AutoInvokeKernelFunctions };
    }

	public async Task GetResponseAsync(IEnumerable chatMessages, ChatOptions? options = null, CancellationToken cancellationToken = default)
    {
        var history = GetChatHistory(chatMessages);
        ChatMessageContent message = await _chatCompletionService.GetChatMessageContentAsync(history, _executionSettings, _kernel, cancellationToken);
        return new ChatResponse(new ChatMessage(ChatRole.Assistant, message.Content));
    }

	public async IAsyncEnumerable GetStreamingResponseAsync(IEnumerable chatMessages, ChatOptions? options = null, CancellationToken cancellationToken = default)
	{
        var history = GetChatHistory(chatMessages);
        await foreach(var item in _chatCompletionService.GetStreamingChatMessageContentsAsync(history, _executionSettings, _kernel, cancellationToken)) {
        	yield return new ChatResponseUpdate(ChatRole.Assistant, item.Content);
    	}
    }
    
    AuthorRole GetRole(ChatRole chatRole) {
        if(chatRole == ChatRole.User) return AuthorRole.User;
        if(chatRole == ChatRole.System) return AuthorRole.System;
        if(chatRole == ChatRole.Assistant) return AuthorRole.Assistant;
        if(chatRole == ChatRole.Tool) return AuthorRole.Tool;
        throw new Exception();
    }

	private ChatHistory GetChatHistory(IEnumerable chatMessages)
    {
    	var history = new ChatHistory(chatMessages.Select(x => new ChatMessageContent(GetRole(x.Role), x.Text)));
        return history;
    }
...
}

Implement a Semantic Kernel plugin similar to the previous function, but decorate the main function method with the Microsoft.SemanticKernel.KernelFunction attribute:

using Microsoft.SemanticKernel;
using System.ComponentModel;
...

public class WeatherPlugin {
        [KernelFunction]
        [Description("Gets the current weather in the city")]
        public static string GetWeather([Description("The name of the city")] string city) {
            switch(city) {
                case "Los Angeles":
                case "LA":
                    return GetTemperatureValue(20);
                case "London":
                    return GetTemperatureValue(15);
                default:
                    return $"The information about the weather in {city} is not available.";
            }
        }
        static string GetTemperatureValue(int value)
        {
            var valueInFahrenheits = value * 9 / 5 + 32;
            return $"{valueInFahrenheits}\u00b0F ({value}\u00b0C)";
        }
    }

Finally, register the Semantic Kernel and the chat client during app startup:

using Microsoft.SemanticKernel;
using Microsoft.SemanticKernel.Plugins.Core;
...
    
var semanticKernelBuilder = Kernel.CreateBuilder();
semanticKernelBuilder.AddAzureOpenAIChatCompletion(
    deploymentName,
    azureOpenAIEndpoint,
    azureOpenAIKey);

// Add plugins from Microsoft.SemanticKernel.Plugins.Core
#pragma warning disable SKEXP0050
semanticKernelBuilder.Plugins.AddFromType<TimePlugin>(); // this is a built-in plugin
semanticKernelBuilder.Plugins.AddFromType<WeatherPlugin>(); // this is our custom plugin
#pragma warning restore SKEXP0050

var globalKernel = semanticKernelBuilder.Build();
builder.Services.AddChatClient(new SemanticKernelPluginCallingChatClient(globalKernel));

builder.Services.AddDevExpressAI();

Once configured, your application will use the Semantic Kernel plugin to intelligently handle requests:

Additional Resources

For an in-depth understanding of Semantic Kernel tool calling, please review the following YouTube video: Core GenAI Techniques - Function Calling.

You can also explore the following DevExpress GitHub sample: DevExpress Blazor AI Chat — Implement Function/Tool Calling.

DevExpress Blazor AI Chat — AI Assistants for Report Viewer and Grid

Dmitry Tokmachev (DevExpress) — Mon, 24 Mar 2025 03:35:00 Z

In this post, I will detail how you can integrate our Blazor DxAIChat component in your project and provide Copilot-like AI assistants to your end-users.

First, a quick word about this implementation...by incorporating the DevExpress AI-powered Chat component and associated natural language processing services, your DevExpress-powered Blazor app can efficiently filter/analyze/summarize data, generate document insights, ask contextual questions, and obtain answers related to reports, tables, and more.

Review our GitHub Example

To help illustrate what's possible, we published a working example on GitHub. This example features the DevExpress Blazor Report Viewer and Grid control and includes a detailed README with implementation guidelines and practical usage scenarios:

Blazor Grid and Report Viewer — Incorporate an AI Assistant (Azure OpenAI) in your next DevExpress-powered Blazor app.

Expanding AI Integration to WinForms and WPF

A similar AI assistant implementation can also be applied to WinForms and WPF-powered applications (apps that support data export to Excel and/or PDF). If you are looking to introduce a Copilot-like assistant into your next great WinForms/WPF app, please refer to our Blazor DxAIChat component implementation guide in the following example:

Blazor AI Chat - How to add the DevExpress Blazor AI Chat component to your next Blazor, MAUI, WPF, and WinForms application.

Share Your Feedback

We appreciate your continued support and enthusiasm for DevExpress tools. If you have any questions or would like to discuss AI-related integration needs, please submit a support ticket via the DevExpress Support Center.

ASP.NET Team Blog

DevExpress Blazor AI Chat — Multi-Model Support, MCP Server Integration, and a Look at What's Coming Next

Multi-Model Chat with Conversation History

MCP Server Integration

What's Coming in v26.1

Microsoft Agent Framework and OpenAI Responses API Support

API Enhancements

Empty Chat Customization

Share Your Feedback

Blazor — End of Support for Bootstrap v4 (v26.1)

Bootstrap v4: End-of-Life Status

Bootstrap v5 Support

Impact on Existing Apps

Steps to Take Before You Upgrade to v26.1

Your Feedback Matters

Blazor — June 2026 Roadmap (v26.1)

Blazor 2026 Strategy

Styling and Layout Foundations

Classic Theme Deprecation

New Themes

Icon Library

RTL Support

Performance

Security

Accessibility

Share Feedback on the Strategy

Product Plans

Accessibility Enhancements

Blazor Smart Paste

Blazor Grid & TreeList

Focus Cells

Total Number of Records in Pager

Built-in Toolbar Items

Filter Row — Built-in criteria selector menu

Filter Row — Bind Filter On Input Option

UI/UX Enhancements

Vertical Grid Line Visibility

Striped Rows

Filter Menu Button — New On‑Hover Display Mode

Custom Row Height

Blazor TreeList — Unbound Columns

Blazor Data Editors

TextBox — Password Button

SpinEdit & MaskedInput — Disable Arrow Keys

MaskedInput — Disable Mouse Wheel

Focusable Custom Buttons

Blazor FormLayout

New Caption Position Mode

API Enhancements

Blazor Dialog Service - Content Template

Blazor Layout & Navigation

TreeView, Accordion, Menu & Toolbar — Data Mapping API Enhancements

Accordion — Cache Collapsed Content

Blazor Pivot Table

Server Mode

Drill‑Down Support

Blazor Themes

Fluent Themes — High Contrast Mode

Blazor Reporting

Your Feedback Matters

DevExpress Blazor AI Chat — Agent2Agent (A2A) Protocol Integration

Architecture Overview

Agent Server Apps

Protocol Compliance Validation with a2a-inspector

Bridging A2A to IChatClient

Runtime Agent Selection

Welcome Chat Screen

User Experience

Download the Complete Example

Configure Agent Endpoints

Your Feedback Matters

DevExpress Blazor AI Chat — Tool Call Confirmation

The Challenge: Balancing Automation and Security

Before You Start

Architecture Overview

Manage Tool Calls (IToolCallFilter)

Confirm Tool Calls (CustomFunctionInvokingChatClient)

Create the Confirmation UI

Integrate Confirmation UI with Blazor AI Chat

Register Services