Syncfusion.Blazor.SmartComponents 33.2.7

Syncfusion® Blazor Smart Components

AI-powered Blazor components for intelligent form data pasting and text autocompletion. Includes Smart Paste Button and Smart TextArea components for streamlined data entry.

Supported components

This package includes the following components:

• Blazor Smart Paste Button
• Blazor Smart TextArea

Blazor Smart Paste Button component

The Blazor Smart Paste Button component is an AI-powered enhancement to the standard Syncfusion® Button component. It intelligently pastes clipboard data into form fields, automatically populating fields based on the clipboard content context.

Key features:

• Intelligent Form Population: Automatically fills form fields with clipboard data
• Context Awareness: Matches clipboard content to appropriate form fields
• Field Annotation: Support for custom field descriptions via data-smartpaste-description
• AI-Powered Parsing: Uses AI to understand and structure pasted content
• Standard Button Features: Inherits all Syncfusion Button component properties
• Form Support: Works with <form>, <EditForm>, and <SfDataForm>
• Smart Field Detection: Automatically detects form fields and labels

Use cases:

• Job Applications: Copy resume/LinkedIn profiles → Auto-populate experience, skills, education
• Bug Tracking: Copy issue descriptions → Auto-populate title, priority, description, steps
• Data Entry Forms: Streamline manual data entry from external sources

Annotating form fields

Override default field descriptions using the data-smartpaste-description attribute:

<input data-smartpaste-description="The user's vehicle registration number, formatted as XYZ-123" />

<textarea data-smartpaste-description="The job description should start with JOB TITLE in all caps"></textarea>

<input type="checkbox" data-smartpaste-description="Check if product is suitable for children" />

Documentation:

• Smart Paste Button Documentation
• API Reference

Blazor Smart TextArea component

The Blazor Smart TextArea is an AI-powered textarea component that provides sentence-level autocompletion suggestions based on context and user role, improving typing efficiency.

Key features:

• AI Autocompletion: Intelligent sentence-level suggestions based on context
• User Role Context: Customize suggestions based on user role
• User Phrases: Define predefined phrases for consistent responses
• Device-Aware Display: Inline suggestions on desktop, overlay on mobile
• Tab-Key Acceptance: Accept suggestions using the Tab key
• Configurable Behavior: Control suggestion display via ShowSuggestionOnPopup
• Standard TextArea Features: Inherits all Syncfusion TextArea properties

Use cases:

• GitHub Issue Responses: Quickly draft consistent, professional responses
• Live Chat Support: Generate common support messages efficiently
• Professional Communications: Autocomplete business emails and messages

Customizing suggestions

Configure autocompletion using UserRole and UserPhrases:

@using Syncfusion.Blazor.SmartComponents

<SfSmartTextArea 
    @bind-Value="@text" 
    UserRole="@userRole" 
    UserPhrases="@userPhrases" />

@code {
    string? text;
    string userRole = "Customer service agent responding to inquiries";
    string[] userPhrases = new[]
    {
        "Thank you for contacting us.",
        "Please provide more details so we can assist you.",
        "You can find help in our documentation at [URL]."
    };
}

Suggestion display modes

Use ShowSuggestionOnPopup to control suggestion display:

<SfSmartTextArea ShowSuggestionOnPopup="true" ... />


<SfSmartTextArea ShowSuggestionOnPopup="false" ... />


<SfSmartTextArea ... />

Behavior:

Documentation:

• Smart TextArea Documentation
• API Reference

Best practices

Managing suggested information

Avoid using specific details in user phrases that might be reused inappropriately. Instead of:

// ❌ Risky: Version might be suggested for all file issues
"Bug report: File not found error occurred in version 2.3"

Use placeholders:

// ✅ Better: Placeholder guides specific information
"Bug report: File not found error occurred in NEED_INFO"

This allows users to fill in specific details while preventing unintended suggestions.

Configuration

AI service setup

To use Smart Components, configure your AI services in Program.cs:

string azureOpenAIKey = "AZURE_OPENAI_KEY";
string azureOpenAIEndpoint = "AZURE_OPENAI_ENDPOINT";
string azureOpenAIModel = "AZURE_OPENAI_MODEL";
AzureOpenAIClient azureOpenAIClient = new AzureOpenAIClient(
     new Uri(azureOpenAIEndpoint),
     new ApiKeyCredential(azureOpenAIKey)
);
IChatClient azureOpenAIChatClient = azureOpenAIClient.GetChatClient(azureOpenAIModel).AsIChatClient();
builder.Services.AddChatClient(azureOpenAIChatClient);
builder.Services.AddSyncfusionSmartComponents()
    .InjectOpenAIInference();

Replace the placeholders with your actual API credentials from your AI service provider.

Add stylesheet and script references

• For Blazor Server App / Blazor Web App, add these to Components/App.razor or App.razor file.
• For Blazor WebAssembly App, add these to wwwroot/index.html file.

<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

Quick start

Register the Syncfusion® Blazor services in the Program.cs file.

using Syncfusion.Blazor;

builder.Services.AddSyncfusionBlazor();

Smart Paste Button

@using Syncfusion.Blazor.DataForm
@using System.ComponentModel.DataAnnotations
@using Syncfusion.Blazor.SmartComponents

<SfDataForm ID="MyForm"
            Model="@EventRegistrationModel">
    <FormValidator>
        <DataAnnotationsValidator></DataAnnotationsValidator>
    </FormValidator>
    <FormItems>
        <FormItem Field="@nameof(EventRegistration.Name)" ID="firstname"></FormItem>
        <FormItem Field="@nameof(EventRegistration.Email)" ID="email"></FormItem>
        <FormItem Field="@nameof(EventRegistration.Phone)" ID="phonenumber"></FormItem>
        <FormItem Field="@nameof(EventRegistration.Address)" ID="address"></FormItem>
    </FormItems>
    <FormButtons>
        <SfSmartPasteButton IsPrimary="true" Content="Smart Paste" IconCss="e-icons e-paste">
        </SfSmartPasteButton>
    </FormButtons>
</SfDataForm>

<br>
<h4 style="text-align:center;">Sample content</h4>
<div>
    Hi, my name is Jane Smith. You can reach me at example@domain.com or call me at +1-555-987-6543. I live at 789 Pine Avenue, Suite 12, Los Angeles, CA 90001.
</div>

@code {
    private EventRegistration EventRegistrationModel = new EventRegistration();

    public class EventRegistration
    {
        [Required(ErrorMessage = "Please enter your name.")]
        [Display(Name = "Name")]
        public string Name { get; set; }

        [Required(ErrorMessage = "Please enter your email address.")]
        [Display(Name = "Email ID")]
        public string Email { get; set; }

        [Required(ErrorMessage = "Please enter your mobile number.")]
        [Display(Name = "Phone Number")]
        public string Phone { get; set; }

        [Required(ErrorMessage = "Please enter your address.")]
        [Display(Name = "Address")]
        public string Address { get; set; }
    }
}

Smart Text Area

<SfSmartTextArea UserRole="@userRole" UserPhrases="@userPhrases" Placeholder="Enter your queries here" @bind-Value="prompt" Width="75%" RowCount="5">
</SfSmartTextArea>

@code {
    private string? prompt;
    public string userRole = "Maintainer of an open-source project replying to GitHub issues";
    public string[] userPhrases = [
        "Thank you for contacting us.",
        "To investigate, We will need a reproducible example as a public Git repository.",
        "Could you please post a screenshot of NEED_INFO?",
        "This sounds like a usage question. This issue tracker is intended for bugs and feature proposals. Unfortunately, we don't have the capacity to answer general usage questions and would recommend StackOverflow for a faster response.",
        "We do not accept ZIP files as reproducible examples.",
        "Bug report: File not found error occurred in NEED_INFO"
    ];
}

Support

• Support portal
• Community forums
• Feature requests

License

This is a commercial product and requires a paid license for possession or use. Review the Syncfusion® EULA.

• Purchase a license
• Start a free 30-day trial

About Syncfusion®

Syncfusion® provides 1600+ UI components and frameworks for web, mobile, and desktop development across multiple platforms:

Web: Blazor | ASP.NET Core | ASP.NET MVC | JavaScript | Angular | React | Vue

Mobile: Flutter | MAUI | UWP

Desktop: WinForms | WPF | WinUI

Learn more at www.syncfusion.com.

sales@syncfusion.com | Toll Free: 1-888-9-DOTNET