Build Copilot user experience

In this article, you learn how to create the user interface (UI) for your AI solution that provides users with a Copilot experience that is consistent across Business Central.

Prompt dialog page introduction

The fundamental component of Copilot from the UI perspective is the PromptDialog type page. The PromptDialog page is designed for creating Copilot experiences that assist users in making informed decisions about the AI-generated output. Within a single page object, the PromptDialog page type creates a comprehensive flow in the UI, where users can provide input, view the subsequent output, and revise it as needed. The user can then choose to save their work or discard it.

Start Copilot >	Provide input (prompt) >	AOAI generates results >	Show results (content)

Prompt dialog modes

PromptDialog page type has three different display modes to accommodate the flow for generating AI content:

Fundamental Copilot flow

The following diagram illustrates PromptDialog page type and its different modes within the fundamental Copilot flow. Your flow might vary depending on your design choices, like whether to use a prompt mode and which mode displays when the PromptDialog page opens.

The following table gives an overview of the typical flow from the user's perspective and how it's achieved in AL code.

Code example

page 50100 "Copilot Job Proposal"
{
    Caption = 'Draft new job with Copilot';
    PageType = PromptDialog;
    Extensible = false;
    IsPreview = true;
    DataCaptionExpression = UserInput;

    layout
    {
        area(Prompt) 
        {
            field(ProjectDescription; UserInput)
            {
                ShowCaption = false;
                MultiLine = true;
            }
        }
        area(Content)
        {
            field("Job Short Description"; JobDescription)
            {
            }
            field("Job Full Details"; JobFullDescription)
            {
            }
            field(CustomerNameField; CustomerName)
            {
            }
            part(ProposalDetails; "Copilot Job Proposal Subpart")
            {
            }
        }
    
        area(PromptOptions)
            {
                field(Tone; Tone) {}
                field(TextFormat; TextFormat) {}
                field(Emphasis; Emphasis){}
            }
    }
    actions
    {
        area(SystemActions)
        {
            systemaction(Generate)
            {
                Caption = 'Generate';
                trigger OnAction()
                begin
                    // The code triggering the Copilot interaction. This is where you call the Copilot API, and get the results back. You must implement this yourself. 
                    RunGeneration();
                end;
            }
            systemaction(Regenerate)
            {
                Caption = 'Regenerate';
                ToolTip = 'Regenerate the Job proposed by Dynamics 365 Copilot.';
                trigger OnAction()
                begin
                    // The code triggering the Copilot interaction. This is where you call the Copilot API, and get the results back. You must implement this yourself. 
                    RunGeneration();
                end;
            }
            systemaction(OK)
            {
                Caption = 'Keep it';
                ToolTip = 'Save the proposed Job.';
            }
            systemaction(Cancel)
            {
                Caption = 'Throw it away';
                ToolTip = 'Throw away the proposed Job.';
            }
        }
    }

    trigger OnQueryClosePage(CloseAction: Action): Boolean
    var
        SaveCopilotJobProposal: Codeunit "Save Copilot Job Proposal";
    begin
        if CloseAction = CloseAction::OK then
            SaveCopilotJobProposal.Save(CustomerNo, CopilotJobProposal);
    end;
}

Next steps

Create PromptDialog page.

See also

Integrating AI using developer tools for Copilot