Reporting for ASP.NET Core - Integrate AI Assistant based on Azure OpenAI

This example is an ASP.NET Core application with integrated DevExpress Reports and an AI assistant. User requests and assistant responses are displayed on-screen using the DevExtreme dxChat component.

The AI assistant's role depends on the associated DevExpress Reports component:

• Data Analysis Assistant: An assistant for the DevExpress Web Document Viewer. This assistant analyzes report content and answers questions related to information within the report.
• UI Assistant: An assistant for the DevExpress Web Report Designer. This assistant explains how to use the Designer UI to accomplish various tasks. Responses are based on information from end-user documentation for DevExpress Web Reporting components.

Please note that AI Assistant initialization takes time. The assistant tab appears once Microsoft Azure scans the source document on the server side.

Implementation Details

Common Settings

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.

You need to create an Azure OpenAI resource in the Azure portal to use AI Assistants for DevExpress Reporting. Refer to the following help topic for details: Microsoft - Create and deploy an Azure OpenAI Service resource.

Once you obtain a private endpoint and an API key, register them as AZURE_OPENAI_ENDPOINT and AZURE_OPENAI_APIKEY environment variables. The EnvSettings.cs reads these settings. DeploymentName in this file is a name of your Azure model, for example, GPT4o:

public static class EnvSettings {
    public static string AzureOpenAIEndpoint { get { return Environment.GetEnvironmentVariable("AZURE_OPENAI_ENDPOINT"); } }
    public static string AzureOpenAIKey { get { return Environment.GetEnvironmentVariable("AZURE_OPENAI_APIKEY"); } }
    public static string DeploymentName { get { return "GPT4o"; } }
}

Files to Review:

• EnvSettings.cs

Register AI Services

Register AI services in your application. Add the following code to the Program.cs file:

using DevExpress.AIIntegration;
using Azure;
using Azure.AI.OpenAI;
using Microsoft.Extensions.AI;
using System;
// ...
var azureOpenAIClient = new AzureOpenAIClient(
    new Uri(EnvSettings.AzureOpenAIEndpoint),
    new AzureKeyCredential(EnvSettings.AzureOpenAIKey));
    
var chatClient = azureOpenAIClient.AsChatClient(EnvSettings.DeploymentName);
builder.Services.AddDevExpressAI(config =>
{
    config.RegisterOpenAIAssistants(azureOpenAIClient, EnvSettings.DeploymentName);
});

Note

The availability of Azure Open AI Assistants depends on region. For additional guidance in this regard, refer to the following document: Azure OpenAI Service models -- Assistants (Preview).

Files to Review:

• Program.cs

AI Assistant Provider

On the server side, the AIAssistantProvider service manages assistants. An IAIAssistantFactory instance creates assistants with keys specified in previous steps.

public interface IAIAssistantProvider {
    IAIAssistant GetAssistant(string assistantName);
    Task<string> CreateAssistant(AssistantType assistantType, Stream data);
    Task<string> CreateAssistant(AssistantType assistantType);
    void DisposeAssistant(string assistantName);
}

Files to Review:

• AIAssistantProvider.cs
• IAIAssistantProvider.cs

Web Document Viewer (Data Analysis Assistant)

The following image displays Web Document Viewer UI implemented in this example. The AI Assistant tab uses a dxChat component to display requests and responses:

Add a New Tab

On the BeforeRender event, add a new tab (a container for the assistant interface):

@model DevExpress.XtraReports.Web.WebDocumentViewer.WebDocumentViewerModel
@await Html.PartialAsync("_AILayout")
<script>
    let aiTab;
    function BeforeRender(sender, args) {
        const previewModel = args;
        const reportPreview = previewModel.reportPreview;

        aiTab = createAssistantTab();
        const model = aiTab.model;
        previewModel.tabPanel.tabs.push(aiTab);
        // ...
    }
</script>

@{
    var viewerRender = Html.DevExpress().WebDocumentViewer("DocumentViewer")
        .Height("100%")
        .ClientSideEvents(configure => {
            configure.BeforeRender("BeforeRender");
        })
        .Bind(Model);
    @viewerRender.RenderHtml()
}
@* ... *@

Access the Assistant

Once the document is ready, the DocumentReady event handler sends a request to the server and obtains the assistant's ID:

async function DocumentReady(sender, args) {
    const response = await sender.PerformCustomDocumentOperation(null, true);
    if (response.customData && aiTab?.model) {
        aiTab.model.chatId = response.customData;
        aiTab.visible = true;
    }
}

The PerformCustomDocumentOperation method exports the report to PDF and creates an assistant based on the exported document. See AIDocumentOperationService.cs for implementation details.

Communicate with the Assistant

Each time a user sends a message, the onMessageEntered event handler passes the request to the assistant:

//...
async function getAIResponse(text, id) {
    const formData = new FormData();
    formData.append('text', text);
    formData.append('chatId', id);
    lastUserQuery = text;
    const response = await fetch(`/AI/GetAnswer`, {
        method: 'POST',
        body: formData
    });
    return await response.text();
}
// ...
function RenderAssistantMessage(instance, message) {
    instance.option({ typingUsers: [] });
    instance.renderMessage({ timestamp: new Date(), text: message, author: assistant.name, id: assistant.id });
}
// ...
onMessageEntered: async (e) => {
    const instance = e.component;
    instance.renderMessage(e.message);
    instance.option({ typingUsers: [assistant] });
    const userInput = e.message.text;

    var response = await getAIResponse(userInput, assistant.id);
    RenderAssistantMessage(instance, response);
}
// ...

AIController.GetAnswer receives answers from the assistant.

Files to Review:

• DocumentViewer.cshtml
• AIDocumentOperationService.cs
• AIController.cs
• aiIntegration.js

Web Report Designer (UI Assistant)

The following image displays Web Report Designer UI implemented in this example. The AI Assistant tab uses a dxChat component to display requests and responses:

Add a New Tab

On the BeforeRender event, add a new tab (a container for the assistant interface):

@model DevExpress.XtraReports.Web.ReportDesigner.ReportDesignerModel
<script>
    async function BeforeRender(sender, args) {

        const tab = createAssistantTab(chatId);
        args.tabPanel.tabs.push(tab);
    }
</script>

@await Html.PartialAsync("_AILayout")
@{
    var designerRender = Html.DevExpress().ReportDesigner("reportDesigner")
        .Height("100%")
        .ClientSideEvents(configure => {
            configure.BeforeRender("BeforeRender");
        })
        .Bind(Model);
    @designerRender.RenderHtml()
}

@section Scripts {
    @* ... *@
    <script src="~/js/aiIntegration.js"></script>
    @designerRender.RenderScripts()
}
@* ... *@

Access the Assistant

On the BeforeRender event, send a request to AIController to create the assistant:

async function BeforeRender(sender, args) {
    const result = await fetch(`/AI/CreateUserAssistant`);
}

The AIAssistantProvider service creates an assistant using the provided PDF documentation (the documentation.pdf file):

// ...
public async Task<string> CreateAssistant(AssistantType assistantType, Stream data) {
    var assistantName = Guid.NewGuid().ToString();
    var assistant = await assistantFactory.CreateAssistant(assistantName);
    Assistants.TryAdd(assistantName, assistant);
    var prompt = GetPrompt(assistantType);
    if(assistantType == AssistantType.UserAssistant) {
        await LoadDocumentation(assistant, prompt);
    } 
    return assistantName;
}

Communicate with the Assistant

Each time a user sends a message, the onMessageEntered event handler passes the request to the assistant:

//...
async function getAIResponse(text, id) {
    const formData = new FormData();
    formData.append('text', text);
    formData.append('chatId', id);
    lastUserQuery = text;
    const response = await fetch(`/AI/GetAnswer`, {
        method: 'POST',
        body: formData
    });
    return await response.text();
}
// ...
function RenderAssistantMessage(instance, message) {
    instance.option({ typingUsers: [] });
    instance.renderMessage({ timestamp: new Date(), text: message, author: assistant.name, id: assistant.id });
}
// ...
onMessageEntered: async (e) => {
    const instance = e.component;
    instance.renderMessage(e.message);
    instance.option({ typingUsers: [assistant] });
    const userInput = e.message.text;

    var response = await getAIResponse(userInput, assistant.id);
    RenderAssistantMessage(instance, response);
}
// ...

AIController.GetAnswer receives answers from the specified assistant.

Files to Review:

• ReportDesigner.cshtml
• AIDocumentOperationService.cs
• AIController.cs
• aiIntegration.js

Documentation

• AI-powered Extensions for DevExpress Reporting

More Examples

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

Does this example address your development requirements/objectives?

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