Suggestions

The .NET MAUI AIPrompt control allows you to add pre-defined suggestions, which serve as hints for the end-users to understand what type of inquiries they can make to the AI. To do so, set the Suggestions collection of the AIPrompt.

The user can select any of the available suggestions, which in turn will populate the input editor with the selected suggestion. This interaction will not trigger a response request right away—the user can modify the suggestion first.

The AIPrompt control exposes the following properties related to the suggestions displayed in the InputView:

• SuggestionsHeaderText(string)—Defines the text of the suggestions header.
• Suggestions(IEnumerable)—Sets the suggestions. The items of this collection can be simple string objects. In case more control over the UI is needed, the items in this collection can be objects from a custom class and the SuggestionStyle property can be used to set the AIPromptInputSuggestionView.ControlTemplate.

For more details on how to modify the visual appearance of the Suggestions, go to [Suggestions Styling] topic.

Check a quick example on how to apply suggestions to the AIPrompt:

1. Add the AIPrompt definition with the Suggestions applied:

<telerik:RadAIPrompt x:Name="aiPrompt"
                     InputText="{Binding InputText}"
                     PromptRequestCommand="{Binding PromptRequestCommand}"
                     OutputItems="{Binding OutputItems}"
                     SuggestionsHeaderText="Things to ask the AI:"
                     Suggestions="{Binding Suggestions}" />

2. Add the ViewModel class:

public class ViewModel : NotifyPropertyChangedBase
{
    private string inputText = string.Empty;
    private IList<AIPromptOutputItem> outputItems = new ObservableCollection<AIPromptOutputItem>();
    private ICommand promptRequestCommand;
    private IList<string> suggestions;

    public ViewModel()
    {
        this.promptRequestCommand = new Command(this.ExecutePromptRequestCommand, this.CanExecutePromptRequestCommand);
        this.suggestions = new List<string>
        {
            "What is the current temperature in NYC",
            "Create a generic birthday invitation for my birthday",
            "Tell me the Taurus daily horoscope for today",
        };
    }

    public string InputText { get { return this.inputText; } set { this.UpdateValue(ref this.inputText, value); } }
    public IList<AIPromptOutputItem> OutputItems { get { return this.outputItems; } }
    public ICommand PromptRequestCommand { get { return this.promptRequestCommand; } }
    public IList<string> Suggestions { get { return this.suggestions; } }

    private bool CanExecutePromptRequestCommand(object arg)
    {
        string text = (string)arg;
        return !string.IsNullOrEmpty(text?.Trim());
    }

    private void ExecutePromptRequestCommand(object arg)
    {
        AIPromptOutputItem outputItem = new AIPromptOutputItem
        {
            Title = "Generated with AI:",
            InputText = arg?.ToString(),
            ResponseText = "This is the response from the AI in relation to your request. For real prompt processing, please connect the component to a preferred AI service."
        };

        this.OutputItems.Insert(0, outputItem);
        this.InputText = string.Empty;
    }
}

3. Set the ViewModel as a BindingContext to the page:

this.BindingContext = new ViewModel();

Here is the result on Windows:

See Also

• Views
• Input View
• Suggestions Styling