FormLayoutSmartPaste Class

Implements AI-powered Smart Paste functionality in the Blazor Form Layout component.

Namespace: DevExpress.AIIntegration.Blazor.Layout

Assembly: DevExpress.AIIntegration.Blazor.Layout.v26.1.dll

Declaration

public class FormLayoutSmartPaste :
    SmartPasteBase

Remarks

The Form Layout component includes an AI-powered Smart Paste extension that simplifies data entry when information is copied from external sources. The extension parses unstructured text (such as email content or free-form notes) and automatically populates matching form fields with extracted values.

Follow the steps below to add a Smart Paste extension to a Form Layout component:

1. Register AI services.

   To build an AI-powered application, choose the approach that best fits your needs:

   • Use the DevExpress Template Kit: Create a new project with pre-configured AI services and NuGet packages. This approach implements our recommended patterns for AI service integration.
   • Add AI capabilities to your current application. The AI-powered Smart Paste extension for Form Layout supports major cloud providers, self-hosted models, and proprietary in-house LLMs.

   Note

   DevExpress AI-powered extensions operate on a “bring your own key” (BYOK) model. We do not provide a proprietary REST API or bundled language models (LLMs/SLMs).

   You can either deploy a self-hosted model or connect to a cloud AI provider and obtain necessary connection parameters (endpoint, API key, language model identifier, and so on). These parameters must be configured at application startup to register an AI client and enable extension functionality.

   Important

   Never hardcode AI provider access keys, credentials, or API endpoints directly in your source code. Refer to the following help topic for additional information: Secret Management for Blazor AI Components.

2. Register the following namespaces in the Components/Imports.razor file or in your Razor file:

   • DevExpress.AIIntegration.Blazor
   • DevExpress.AIIntegration.Blazor.Layout
   • DevExpress.AIIntegration.Extensions
   _Imports.razor

   @using DevExpress.AIIntegration.Blazor
   @using DevExpress.AIIntegration.Blazor.Layout
   @using DevExpress.AIIntegration.Extensions
   

3. Make sure that Form Layout items are defined between <ChildContent>...</ChildContent> tags. Refer to the ChildContent property description for additional information.

4. Use the Extensions property to add a FormLayoutSmartPaste extension to the Form Layout component.

5. Obtain input text from a memo editor, clipboard, file, or another source.

6. Add a button that calls the SmartPasteAsync(DxFormLayout, String) method. Pass the obtained text to this method.

7. Optional. Specify FormLayoutSmartPaste extension properties to improve text parsing accuracy: ItemDescriptions, PromptAugmentation, and so on. You can also handle the Completed event to get the Smart Paste operation result.

The following code snippet adds a Smart Paste extension to a Form Layout component:

• The snippet uses hard-coded text, but you can use a different source. For example, obtain text from the clipboard or from a file.
• The extension’s ItemDescriptions property specifies formatting rules for the Phone Number field.
• The extension’s PromptAugmentation property instructs AI to replace existing field values with extracted data.

Razor

@using DevExpress.AIIntegration.Blazor.Layout
@using DevExpress.AIIntegration.Blazor
@using DevExpress.AIIntegration.Extensions

<DxMemo @bind-Text="SampleText"
        Rows="14"
        ResizeMode="MemoResizeMode.Auto" />

<DxFormLayout @ref="FormLayout"
              Data="@model"
              CssClass="w-100 mb-2">
    <Extensions>
        <FormLayoutSmartPaste ItemDescriptions="@fieldDescriptions"
                              PromptAugmentation="@PromptAugmentation" />
    </Extensions>
    <ChildContent>
        <DxFormLayoutItem Caption="Full Name" ColSpanMd="12"
                          Field="@nameof(BillingFormModel.FullName)">
            <DxTextBox @bind-Text="@model.FullName"
                       NullText="Full Name" />
        </DxFormLayoutItem>
        <DxFormLayoutItem Caption="Amount Due" ColSpanMd="12"
                          Field="@nameof(BillingFormModel.AmountDue)">
            <DxMaskedInput @bind-Value="@model.AmountDue"
                           Mask="@NumericMask.Currency"
                           NullText="$0.00" />
        </DxFormLayoutItem>
        <DxFormLayoutItem Caption="Statement Date" ColSpanMd="12"
                          Field="@nameof(BillingFormModel.StatementDate)">
            <DxDateEdit @bind-Date="@model.StatementDate"
                        NullText="MM/DD/YYYY" />
        </DxFormLayoutItem>
        @*...*@
    </ChildContent>
</DxFormLayout>

<DxButton Text="Smart Paste"
          IconCssClass="icon-ai-sparkle"
          RenderStyle="ButtonRenderStyle.Primary"
          Click="OnSmartPaste" />
<DxButton Text="Reset"
          RenderStyle="ButtonRenderStyle.Secondary"
          Click="@OnResetClick" />

@code {
    DxFormLayout FormLayout { get; set; }
    BillingFormModel model = new();

    readonly Dictionary<string, string> fieldDescriptions = new() {
        { nameof(BillingFormModel.PhoneNumber), "US phone number. 
        Return exactly 10 digits without any formatting characters."}
    };

    const string PromptAugmentation =
        "Always override the current field value with the extracted one.";

    string SampleText { get; set; } =
        "Hi there,\n" +
        " \n" +
        "Following up on billing for April. The balance should be twelve hundred " +
        "— it was adjusted after our last conversation.\n" +
        "I also moved recently. My new billing address is:\n" +
        "123 Market Street, San Francisco, CA 94103\n" +
        "You can keep using my email: [e-mail].\n" +
        "For phone, please use my mobile number going forward: 415-555-0199 " +
        "(not the office line).\n" +
        "The statement date should be mid-April.\n" +
        "Let me know if you need anything else.\n" +
        " \n" +
        "Best regards,\n" +
        "John Smith";

    async Task OnSmartPaste() {
        model.Reset();
        await FormLayout.SmartPasteAsync(SampleText);
    }

    void OnResetClick() {
        model.Reset();
    }
}

BillingFormModel

class BillingFormModel {
    public string FullName { get; set; }
    public decimal AmountDue { get; set; }
    public DateTime? StatementDate { get; set; }
    public string Street { get; set; }
    public string City { get; set; }
    public string State { get; set; }
    public string Zip { get; set; }
    public string PhoneNumber { get; set; }
    public string Note { get; set; }

    public void Reset() {
        FullName = null;
        AmountDue = 0;
        StatementDate = null;
        Street = null;
        City = null;
        State = null;
        Zip = null;
        PhoneNumber = null;
        Note = null;
    }
}

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable

Inheritance

Object

ComponentBase

DxComponentBase

SmartPasteBase

FormLayoutSmartPaste