Reporting for Blazor - Summarize and Translate DevExpress Reports

This example adds AI-powered summarize/translate capabilities to the DevExpress Blazor Report Viewer. These capabilities are available within the user interface via two buttons designed to access the report document and process content as follows:

• Summarize: Uses generative AI to summarize report content and displays core insights associated with this report.
• Translate: Uses AI services to translate report content to another language.

These actions are also available in context menu when you select report content. Note the AI Operations icon that floats next to the report page. Users can click it to invoke the context menu.

The following is an image of the application interface. As you can see, users can process the entire document, individual pages, or selected content.

Implementation Details

Add NuGet Packages

Add the following NuGet packages:

• DevExpress.AIIntegration.Blazor.Reporting.Viewer
• DevExpress.Drawing.Skia (if you use a non-Windows environment)
• Microsoft.Extensions.AI.OpenAI, Azure.AI.OpenAI, Azure.Identity or Microsoft.Extensions.AI.Ollama based on your AI service preferences. This project uses Azure OpenAI. The remainder of this document describes steps related to this package.

Note

We use the following versions of the Microsoft.Extensions.AI.* libraries in our source code:

v24.2.6+ | 9.3.0-preview.1.25161.3

We do not guarantee compatibility or correct operation with higher versions. Refer to the following announcement for additional information: Microsoft.Extensions.AI.Abstractions NuGet Package Version Upgrade in v24.2.6.

For the list of supported AI services and the corresponding prerequisites, refer to Supported AI Services in the following help topic: AI-powered Extensions for DevExpress Reporting.

Add Personal Keys

Note

DevExpress AI-powered extensions follow the "bring your own key" principle. DevExpress does not offer a REST API and does not ship any built-in LLMs/SLMs. You need an active Azure/Open AI subscription to obtain the REST API endpoint, key, and model deployment name. These variables must be specified at application startup to register AI clients and enable DevExpress AI-powered Extensions in your application.

To use AI-based Summarize and Translate functionality in your application, you must create an Azure OpenAI resource in the Azure portal. Refer to the following help topic for additional information/guidance: Microsoft - Create and deploy an Azure OpenAI Service resource.

Once you obtain a private endpoint and an API key, open appsettings.json and specify DeploymentName, AzureOpenAIKey, and AzureOpenAIEndpoint values. Note that DeploymentName is set to GPT4o, but you can specify a different model:

"AISettings": {
    "DeploymentName": "GPT4o",
    "AzureOpenAIKey": "",
    "AzureOpenAIEndpoint": ""
}

Create a class to read these settings:

public class AISettings {
    public string AzureOpenAIKey { get; set; }
    public string DeploymentName { get; set; }
    public string AzureOpenAIEndpoint { get; set; }
}

Register AI Services

Call the AddDevExpressAI method at the application startup to register AI services in your application:

using DevExpress.AIIntegration;
using DevExpress.AIIntegration.Reporting;
using DevExpress.AIIntegration.Blazor.Reporting.Viewer.Models;
using Azure.AI.OpenAI;
using Azure;
// ...
var builder = WebApplication.CreateBuilder(args);

var settings = builder.Configuration.GetSection("AISettings").Get<AISettings>();

IChatClient chatClient = new AzureOpenAIClient(
    new Uri(settings.AzureOpenAIEndpoint),
    new AzureKeyCredential(settings.AzureOpenAIKey))
    .AsChatClient(settings.DeploymentName);
builder.Services.AddChatClient(chatClient);

builder.Services.AddDevExpressAI((config) => {
    config.AddBlazorReportingAIIntegration(config => {
        config.SummarizationMode = SummarizationMode.Abstractive;
        config.Languages = new List<LanguageItem>() {
            new LanguageItem() { Key = "de", Text = "German" },
            new LanguageItem() { Key = "es", Text = "Spanish" },
            new LanguageItem() { Key = "en", Text = "English" }
        };
    });
});

var app = builder.Build();
// ...

Files to Review

• Program.cs
• AISettings.cs
• appsettings.json

Documentation

• Summarize and Translate Reports in the Blazor Report Viewer
• AI-powered Extensions for DevExpress Reporting

More Examples

• Reporting for ASP.NET Core - Summarize and Translate DevExpress Reports Using Azure OpenAI
• Reporting for ASP.NET Core - Integrate AI Assistant based on Azure OpenAI
• Rich Text Editor and HTML Editor for Blazor - How to integrate AI-powered extensions
• AI Chat for Blazor - How to add DxAIChat component in Blazor, MAUI, WPF, and WinForms applications

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)