How to display AI generated word by word in .NET MAUI AIAssistView (SfAIAssistView)?

To display an AI-generated response word by word in the .NET MAUI AI AssistView for real-time interaction, you can simulate the process by gradually updating the response text.

To achieve this, define ResponseItemTemplate and bind the IAssistItem.Text property to a Label element and update it dynamically by sequentially adding words to simulate a streaming response.

XAML

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:aiAssist="clr-namespace:Syncfusion.Maui.AIAssistView;assembly=Syncfusion.Maui.AIAssistView"
             xmlns:syncfusion="clr-namespace:Syncfusion.Maui.Chat;assembly=Syncfusion.Maui.Chat"
             xmlns:thickness="clr-namespace:Microsoft.Maui;assembly=Microsoft.Maui"
             xmlns:local="clr-namespace:AssistView"
             x:Class="AssistView.MainPage">

    <ContentPage.BindingContext>
        <local:GettingStartedViewModel x:Name="viewModel"/>
    </ContentPage.BindingContext>

    <ContentPage.Content>
        <Grid>
            <aiAssist:SfAIAssistView x:Name="sfAIAssistView"
                                     ShowHeader="true"
                                     EnableStopResponding="False"
                                     InputText="{Binding InputText}"
                                     AssistItems="{Binding AssistItems}" 
                                     RequestCommand="{Binding AssistViewRequestCommand}" >

                <aiAssist:SfAIAssistView.ResponseItemTemplate>
                    <DataTemplate>
                        <Grid>
                            <Label Text="{Binding Text}" 
                                   TextType="Html"
                                   CharacterSpacing="0.15"
                                   LineHeight="{OnPlatform WinUI=1.6, Default=1.2}"
                                   LineBreakMode="WordWrap"
                                   Padding="10,0,0,0" 
                                   HorizontalOptions="Start"/>
                        </Grid>
                    </DataTemplate>
                </aiAssist:SfAIAssistView.ResponseItemTemplate>
            </aiAssist:SfAIAssistView>
        </Grid>
    </ContentPage.Content>

In .NET MAUI AI AssistView control, the default response indicator (shimmer view) appears when a new request is initiated. To prevent this, add the request item to the ViewModel’s AssistItems collection by setting RequestEventArgs.Handled property to True.

ViewModel.cs

private async void ExecuteRequestCommand(object obj)
{
   // Set Handled to true to prevent the addition of the user-requested item to the view. 
   // If the requested item is added to the ViewModel's AssistItems collection, the response indicator will also be included immediately.
   // To restrict the response generator, we are adding the request item manually to collection.
   var eventArgs = obj as Syncfusion.Maui.AIAssistView.RequestEventArgs;
   eventArgs.Handled = true;

   // Retrieve the user-requested item using RequestEventArgs.RequestItem.
   var request = eventArgs.RequestItem;

   // Manually add the user-requested item to the AssistItems collection.
   this.AssistItems!.Add(request);

   // Clear the text of the editor in the SfAIAssistView.
   this.InputText = string.Empty;

   // Call the GetResult method to retrieve the ResponseItem corresponding to the requested item.
   await this.GetResult(request).ConfigureAwait(true);
}

• Create a dummy response item AssistItem with empty text and add it to the ViewModel’s AssistItems collection.
• Generate the response from the AI service and update ResponseItem.Text property dynamically by splitting the response into individual words and appending them with a slight delay.

private async Task GetResult(object inputQuery)
{
   // Add a dummy response with an empty string to AssistItems Collection and update its content word by word to simulate a streaming response.
    this.ResponseItem = new AssistItem() { Text = string.Empty };
    this.AssistItems!.Add(this.ResponseItem);
     
    AssistItem request = (AssistItem)inputQuery;
    if (request != null)
    {
        // Generate a response.
        var response = “get response from AI service”;
     
        // Split the response into words and store them in an array or collection.
        string[] words = response.Split(' ', StringSplitOptions.RemoveEmptyEntries);
     
        // Update the ResponseItem's Text property word by word with a delay to simulate continuous response generation.
        foreach (string word in words)
        {
             this.ResponseItem.Text += word + " ";
             await Task.Delay(50);
        }
     
        this.ResponseItem.RequestItem = inputQuery;
    }
}

Output

Download the complete sample from GitHub.

Conclusion:

I hope you enjoyed learning how to display AI-generated responses word by word in .NET MAUI AI AssistView.

You can refer to our .NET MAUI AI AssistView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications.

For current customers, check out our components from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our other controls.

Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!