Skip to main content
All docs
V25.1
  • 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).

    Web Report Designer - AI Prompt-to-Report Option in Report Designer

    Run Demo: Report Designer AI Extensions

    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:

    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:

    • FixLayoutErrors

      Specifies whether to automatically resolve report control overlapping.

    • SetRetryAttemptCount

      Specifies the number of attempts to fix report layout errors that appear in the LLM response.

    • ConfigurePredefinedPrompts

      Allows you to modify the predefined prompt collection available in the Report Wizard.

    • SetTemperature

      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.

    Web R

    The AI-powered report generation works with two data source options:

    Choose data source option page

    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.

    Web Report Designer - No Data Source Option - Enter Report Description Page

    The following image illustrates the resulting report:

    Web Report Designer - AI-generated Report with no Data Source

    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.

    Web Report Designer - Add Data Source Option - Enter Report Description Page

    The following image illustrates the generated data-bound report and its preview:

    Web Report Designer - AI-generated Data-Bound Report

    Web Report Designer - AI-generated Data-Bound Report 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.

    Web Report Designer - No Data Source Option - Enter Report Description Page

    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:

    Web Report Designer - Custom Prompt in Report Wizard

    The following image illustrates the result:

    Web Report Designer - Report Generated from Custom Prompt in Report Wizard