Web AI Assistant Setup

Introduction

In this tutorial, we will guide you through the process of building an ASP.NET Core Application that uses the ActiveReports.NET Web Report Designer with the enabled AI Assistant feature. By the end of this tutorial, you will have learned how to:

Create an ASP.NET Core application in Visual Studio
Install the ActiveReports.NET NuGet packages
Incorporate the ActiveReports.NET client-side libraries
Configure the Report Designer and AI Assistant ASP.NET middleware
Add and configure the Web Report Designer on the index page

Prerequisites

Before diving into this tutorial, please ensure the following requirements are met:

ActiveReports.NET installed on your machine. If you have not installed ActiveReports.NET yet, see the installation guide for detailed instructions.
.NET SDK: .NET 8.0 SDK or later.
Node.js: a current LTS version of Node.js (includes npm), used to install and serve the client-side designer.
Visual Studio: Visual Studio 2022 or later with the with the ASP.NET and web development workload installed.
An AI provider account: depending on the provider you choose, you need one of the following:
- An OpenAI API key
- An Azure OpenAI resource with a deployment name, endpoint URL, and API key
- A Google AI Studio API key for Gemini
- A local Ollama installation with a model pulled (e.g. ollama pull llama3.2)
Basic Knowledge of C#, JavaScript, and Visual Studio: Familiarity with C# programming, plain JavaScript, and navigating Visual Studio is assumed. If you need a refresher, the Microsoft C# Guide and Visual Studio Documentation are excellent resources.

Creating a New Project

To start, launch Visual Studio (this tutorial is based on Visual Studio 2022, but the steps are similar in other versions). Follow these steps to create your new ASP.NET Core Application:

Select the Create a new project option from the Visual Studio startup window.
In the list of project templates, find and select ASP.NET Core Web App (Razor Pages). Click the Next button to continue.
In the Configure your new project dialog, provide a name for your project in the Project name field, choose a suitable location for your project files, and click Next.
The Additional Information dialog will ask you to select a target framework. For the best compatibility with ActiveReports.NET, select .NET 8.0 or newer. Please ensure that the Authentication is set to None and the Configure for HTTPS is unchecked. Click the Create button to finalize the project setup.
After completing these steps, Visual Studio will generate a new ASP.NET Core application project.

Adding ActiveReports.NET client-side libraries

The ActiveReports.NET Web Designer is a client-side component that interacts with the server-side. Let's include the required client-side libraries into the application:

In Solution Explorer, right-click your project and select Add Client-Side Library.
In the Add Client-Side Library dialog, select unpkg provider and type @mescius/activereportsnet-designer@latest in the Library text input.
Click the Install button.

Visual Studio will download and copy the content of the package into the wwwroot\lib folder.

Installing ActiveReports Nuget Packages

To establish the server-side functionality that is required for the Web Report Designer with the AI Assistance enabled, the following NuGet packages must be added to your project:

MESCIUS.ActiveReports.Aspnetcore.Designer
MESCIUS.ActiveReports.AI.Web
Depending on the AI provider you use:
- Azure Open AI: MESCIUS.ActiveReports.Design.AI.AzureOpenAI
- Open AI: MESCIUS.ActiveReports.Design.AI.OpenAI
- Google Gemini:MESCIUS.ActiveReports.Design.AI.Google
- Ollama: MESCIUS.ActiveReports.Design.AI.Ollama

Follow these steps to install these packages:

In Solution Explorer, right-click your project and select Manage NuGet Packages.
Go to the Browse tab and search for MESCIUS.ActiveReports.Aspnetcore.Designer. Make sure you select the correct package, paying attention to the exact spelling.
Click the package in the search results and then click Install on the right-hand side of the window.
Accept the license terms for the installed packages in the License Acceptance dialog.
Repear steps 2-4 for the rest of the required packages.

Adding a Sample Report

For convenience, we will use the pre-configured report that includes the data. Follow these steps:

In Solution Explorer, right-click the project , select Add/New Folder and set the name of the newly added folder to Reports.
Right-click the Reports folder and select the Add...New Item menu.
In the Add New Item dialog, select the ActiveReports XX Standalone Report, where XX is the version installed on your machine, and click the Add button.
In the Report Wizard, select the Sample Report option and click Next. This option offers a selection of pre-configured reports.
From the Select Sample Report dialog, select the Sales Report and click the Finish >> button:

Configuring the Report Designer and AI Assistance middleware

The report designer communicates with the server-side via the ASP.NET middleware that could be configured using the following steps.

Open the Program.cs file, which is located in the application's root folder.
Insert the following statements at the beginning of the file:

using GrapeCity.ActiveReports.Aspnetcore.Designer;
using GrapeCity.ActiveReports.Web.Designer;

using GrapeCity.ActiveReports.Design.AI.Google.Extensions; // if you use Google Gemini
using GrapeCity.ActiveReports.Design.AI.OpenAI.Extensions; // if you use OpenAI
using GrapeCity.ActiveReports.Design.AI.AzureOpenAI.Extensions; // if you use Azure OpenAI
using GrapeCity.ActiveReports.Design.AI.Ollama.Extensions; // if you use Ollama

Before calling builder.Build(), add the code to register the AI provider . Use the code block below that matches the package you installed.
Option A — OpenAI

builder.Services.AddOpenAI(config =>
{
    config.ApiKey = "sk-..."; // your OpenAI API key
    config.Model = "gpt-4o"; // OpenAI model ID
    config.Timeout = 300 * 1000; // milliseconds
});

Option B — Azure OpenAI

builder.Services.AddAzureOpenAI(config =>
{
    config.Endpoint = "https://my-resource.openai.azure.com/";
    config.DeploymentName = "my-gpt4o-deployment";
    config.Model = "gpt-4o";
    config.ApiKey = "...";
    config.Timeout = 300 * 1000; // milliseconds
});

Option C — Google Gemini

builder.Services.AddGemini(config =>
{
    config.ApiKey = "AIza...";
    config.Model = "gemini-2.0-flash";
    config.Timeout = 300 * 1000; // milliseconds
});

Option D — Ollama (local)

builder.Services.AddOllama(config =>
{
    config.Endpoint = "http://localhost:11434";
    config.Model = "llama3.2";
    config.Timeout = 300 * 1000; // milliseconds
});

Insert the following code before the app.UseStaticFiles(); line:

var reportsDir = new DirectoryInfo(Path.Combine(app.Environment.ContentRootPath, "Reports"));
app.UseReportDesigner(config =>
{
    config.UseFileStore(reportsDir, null, FileStoreOptions.NestedFoldersLookup);
});
app.UseAIReporting();

Initializing the report designer on the client-side

Open the Pages\Index.cshtml file and replace its contents with the following code.

@page
@{
    Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ActiveReports Web Designer</title>
    <link rel="stylesheet" href="~/lib/mescius/activereportsnet-designer/dist/web-designer.css" />
    <style>
        #designer-host{
            width: 100%;
            height: 100vh;
        }
        body{
            margin: 0px;
        }
    </style>
</head>
<body>
    <div id="designer-host">
    </div>
    <script type="module">
        import { arWebDesigner } from "/lib/mescius/activereportsnet-designer/esm/web-designer.js";
        arWebDesigner.create('#designer-host', {
            data: {
              dataSets: {
                canModify: true,
                features: {
                  explore: {
                    enabled: true,
                    apiEndpoint: "/api/reporting/ai"
                  }
                }
              },
              dataSources: {
                canModify: true
              }
            }
        }).then(designer=>{
            designer.documents.openById('Sales Report.rdlx', { platform: 'rdlx', type: 'report', subType: 'msl'});
        });
    </script>
</body>
</html>

Running the Project

With both the server-side and client-side configured, it's time to see the result of your work.

To build your project, go to the Build menu in Visual Studio and select Build Solution. This compiles your project and prepares it for running.
Once the build is successful, on the Debug menu, select Start Debugging or Start Without Debugging to start the application.

The Web Report Designer opens in your default browser and displays the Sales Report:

Web Report Designer

Using AI Assistance

In the Property Panel , open the Data tab. Then, in the Sales Data Set, click the Explore button:
If the AI provider was configured correctly, then after some time, the designer will shows the suggested visualizations:
You can click a suggestion card to add to a report.