DevExpress Blazor AI Integration: Layout

DevExpress.AIIntegration.Blazor.Layout contains AI-powered Extension resources for DevExpress Blazor Layout suite.

Examples

The Smart Paste feature requires the following NuGet packages:

• DevExpress.AIIntegration.Blazor.Layout
• DevExpress.Blazor

Install required packages:

dotnet add package DevExpress.Blazor
dotnet add package DevExpress.AIIntegration.Blazor.Layout

Add a Smart Paste Extension to a Form Layout

@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="smart-paste-form-layout">
    <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: john.smith@dx-email.com.\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();
    }
}

Evaluation Period, Pricing Options, and Licensing Terms

Whether you own a license or want to start a 30-day evaluation period, download and register your DevExpress license key. To obtain your key, log in to the DevExpress Download Manager. Use your existing DevExpress.com account or create a new account for free. For key registration instructions, see License Key for DevExpress Products.

If you purchase a license after evaluating a product, re-register your updated DevExpress license key to remove evaluation version warnings/messages.

This package is included in the following commercial subscriptions:

• DevExpress ASP.NET and Blazor Subscription
• DevExpress DXperience Subscription
• DevExpress Universal Subscription
• DevExpress WinForms Subscription
• DevExpress WPF Subscription

See DevExpress Subscriptions & Licensing for subscription comparison tables, purchasing FAQ, and licensing information.

Software Bill of Materials (SBOM)

To access SBOM files for DevExpress packages, see the following article: Software Bill of Materials (SBOM) for DevExpress .NET assemblies/NuGet packages, JavaScript, VCL and other redistributable artifacts.

See Also: Information Security | Security - What You Need to Know

Related Components/Packages

DevExpress.Blazor - Native DevExpress UI components for Blazor applications.

dotnet add package DevExpress.Blazor

Demos

• DevExpress Blazor Online Demos
• DevExpress Blazor GitHub Demos

Documentation

• AI-powered Smart Paste for Form Layout

Useful Online Resources

• www.devexpress.com
• DevExpress Support Center
• DevExpress Blogs