Generate Reports From Prompts (Web Report Designer) (CTP)
- 6 minutes to read
Follow the instructions in this help topic to integrate AI-powered Prompt-to-Report functionality into the Web Report Designer. Once integrated, users can create reports by specifying a prompt (report description in natural language). This tutorial uses Azure OpenAI.
Important
The Prompt-to-Report functionality is currently available as a community technology preview (CTP).
Note
This functionality is not supported in the Web Report Designer control for ASP.NET MVC and ASP.NET Web Forms.
Install NuGet Packages
Install the following NuGet packages to use Azure OpenAI:
- DevExpress.AIIntegration.AspNetCore.Reporting
- Microsoft.Extensions.AI (Version=”9.5.0”)
- Microsoft.Extensions.AI.OpenAI (Version=”9.5.0-preview.1.25265.7”)
- Azure.AI.OpenAI (Version=”2.2.0-beta.4”)
For the list of supported AI services and their corresponding prerequisites, refer to the Supported AI Services section of the following help topic: AI-powered Extensions for DevExpress Reporting.
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.
Register AI Service and Activate Extension
Call the following methods at application startup:
- AddDevExpressAI
- Adds DevExpress AI-related services to the application service collection.
- AddWebReportingAIIntegration
- Adds AI-powered functionality to the Web Document Viewer and Web Report Designer.
- AddPromptToReportConverter()
Activates AI-powered Prompt-to-Report functionality in the Web Report Designer.
Use the following methods to specify Prompt-to-Report settings:
-
Specifies whether to automatically resolve report control overlapping.
-
Specifies the number of attempts to fix report layout errors that appear in the LLM response.
-
Allows you to modify the predefined prompt collection available in the Report Wizard.
-
Specifies output randomness. Lower temperatures yield more predictable and focused outputs, while higher temperatures produce more diverse and creative responses.
-
The following snippet registers an Azure OpenAI service, activates the AI-powered Prompt-to-Report option in the Report Wizard, adds a custom prompt, and enables the option that automatically resolves control overlapping:
using Azure.AI.OpenAI;
using Microsoft.Extensions.AI;
using System;
// ...
string azureOpenAIEndpoint = Environment.GetEnvironmentVariable("AZURE_OPENAI_ENDPOINT");
string azureOpenAIKey = Environment.GetEnvironmentVariable("AZURE_OPENAI_API_KEY");
string deploymentName = "MODEL_NAME"
IChatClient chatClient = new AzureOpenAIClient(new Uri(azureOpenAIEndpoint),
new System.ClientModel.ApiKeyCredential(azureOpenAIKey))
.GetChatClient(deploymentName).AsIChatClient();
builder.Services.AddSingleton(chatClient);
builder.Services.AddDevExpressAI(config => {
config.AddWebReportingAIIntegration(aiConfig => {
aiConfig.AddPromptToReportConverter(options => {
options.ConfigurePredefinedPrompts(prompts => {
prompts.Add(new AIReportPrompt {
Title = "Custom Prompt 1",
Text = "Custom Prompt Text"
});
})
.FixLayoutErrors()
.SetRetryAttemptCount(5);
});
});
});
Disable AI-powered Functionality for a Specific Control
AI-powered functionality configured within AIReportingConfigurationBuilder is available for all Report Viewer and Report Designer components in the application. If you need to disable this AI-powered functionality for a specific Web Report Designer control, set the client AIServicesEnabled property to false
in the BeforeRender
event handler. The following snippet disables AI-powered functionality for a Report Designer in an ASP.NET Core application:
<script type="text/javascript">
function onBeforeRender(e, s) {
DevExpress.Reporting.Designer.Settings.AIServicesEnabled(false);
}
</script>
@{
var designerRender = Html.DevExpress().ReportDesigner("reportDesigner")
.Height("100%")
.ClientSideEvents(configure => configure.BeforeRender("onBeforeRender"))
.Bind(Model);
@designerRender.RenderHtml()
}
Generate Reports from Prompts
Once the functionality is registered, the Report Wizard interface displays the new AI Prompt-to-Report option.
Select this option to create an AI-generated report.
The AI-powered report generation works with two data source options:
- No Data Source
- Creates a complete report structure based only on the user’s natural language description.
- Add Data Source
- Allows users to create a report data source in the first step, displays the data source structure in the Report Wizard interface, and automatically includes this metadata in the LLM prompt. Users can reference available data source fields when they describe data-bound report elements.
No Data Source Option
If you select No Data Source, the “Enter Report Description” page appears. The Report Wizard interface includes a prompt input area with placeholder fields that guide users toward detailed prompts. Specify and configure a prompt and click Finish to see the result.
The following image illustrates the resulting report:
You can review the report layout and bind elements to data as needed.
Tip
You can also use our AI-generated Test Data Source functionality to preview created reports with meaningful data. For more information, refer to the following help topic: Preview Reports with AI-generated Test Data.
You can adjust predefined prompts or create a new prompt from scratch. Review the Configure Predefined Prompts section for more information.
Add Data Source Option
If you select Add Data Source, the Wizard proceeds to the Select Data Source page, where you can select an existing data source or create a new data source.
After you connected to a data source, the “Enter Report Description” page appears. The Report Wizard interface includes a prompt input area with placeholder fields that guide users toward detailed prompts. The “Data Source Structure” field list contains the resulting data source schema. You can add field names to a prompt to create a data-bound report.
The following image illustrates the generated data-bound report and its preview:
You can adjust predefined prompts or create a new prompt from scratch. Review the Configure Predefined Prompts section for more information.
Configure Report Prompt
General Tips
The output quality depends on the details you specify in the natural language description. Users should include detailed information about layout preferences, calculations, grouping requirements, and visualization types. Like other LLM implementations, the system has limitations and may need adjustments to meet your requirements.
Call the FixLayoutErrors
method to automatically fix report control overlapping. Use the SetRetryAttemptCount
method to increase the number of attempts to fix report layout errors that appear in the LLM response.
Configure Predefined Prompts
Built-in prompt suggestions show useful examples. You can review these to create your own prompts. For example, check the “Prompt Template” entry - a basic template you can customize. You can set up page layout, styles, fields, and functions. Other templates cover common report types, like invoices.
Note that prompt changes made in the Report Wizard do not persist.
To make permanent changes to built-in prompts, use the ConfigurePredefinedPrompts method to access the predefined prompt collection. You can modify prompt “Text” and “Title”, or remove built-in prompts. You can also add custom prompts to the collection.
Add a New Prompt
Call the ConfigurePredefinedPrompts method to access the predefined prompt collection (collection of AIReportPrompt objects) and add a new prompt.
The following code snippet adds a “Custom Prompt” to the predefined prompt collection:
using DevExpress.AIIntegration.Reporting;
// ...
builder.Services.AddDevExpressAI(config => {
config.AddWebReportingAIIntegration(aiConfig => {
aiConfig.AddPromptToReportConverter(options => {
options.ConfigurePredefinedPrompts(prompts => prompts.Add(new AIReportPrompt {
Title = "Custom Prompt",
Text = Prompts.CustomAIReportPrompt
}));
});
});
});
// ...
public static class Prompts {
public const string CustomAIReportPrompt = "Create Sample Report:\r\n \r\nPage Setup:\r\n- Paper Size: A4\r\n- Report Margins:\r\n - Top & Bottom: 40\r\n - Left & Right: 60\r\n\r\nReport Header:\r\n- Title: Sample Report\r\n- Alignment: Center\r\n- Font: Comic Sans MS, 12pt, Bold\r\n\r\nCreate a horizontal table with the four column headers that correspond to fields in the bound data source.\r\n\r\nFont for column headers: Comic Sans MS, 12pt, Bold\r\n \r\nDetail Section:\r\nBind data cells to the fields corresponding to the column headers defined in the Group Header\r\nFont for data cells: Comic Sans MS, 12pt, Bold\r\n \r\nSummary Section:\r\nInclude calculated values for bound fields.\r\nSummary type: [Sum]\r\nFont for summary values: Comic Sans MS, 12pt, Bold";
// ...
}
After you added a custom prompt to the collection it appears in the Report Wizard:
The following image illustrates the result: