Blazor AIPrompt Overview

The Blazor AIPrompt component helps you write input (prompt) instructing the Generative AI to produce the desired response.

ninja-iconThe AIPrompt component is part of Telerik UI for Blazor, a professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.Start Free Trial

The component allows you to interact with the output from the AI and execute a set of predefined commands. Furthermore, the AIPrompt comes with three predefined views—Prompt, Output, and Command, as well as the option to define custom views. Users can navigate the views through the AIPrompt's ToolBar.

Creating Blazor AIPrompt

  1. Add the <TelerikAIPrompt> tag.
  2. Subscribe to the OnPromptRequest event that will fire whenever the user sends a prompt request. The handler expects an argument of type AIPromptPromptRequestEventArgs.
  3. (optional) Set the Commands parameter to a List<AIPromptCommandDescriptor>. If the parameter is not set, the AIPrompt will not render the Commands view.
  4. (optional) Subscribe to the OnCommandExecute event that will fire whenever the user executes a command. The handler expects an argument of type AIPromptCommandDescriptorExecuteEventArgs.

Basic configuration of the Telerik AIPrompt

<TelerikAIPrompt OnPromptRequest="@HandlePromptRequest"
                 OnCommandExecute="@HandleCommandExecute"
                 Commands="@PromptCommands">
</TelerikAIPrompt>

@code {
    private void HandlePromptRequest(AIPromptPromptRequestEventArgs args)
    {
        // The example uses dummy data intentionally. Replace the hard-coded string with a call to your AI API.
        args.Output = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
    }

    private void HandleCommandExecute(AIPromptCommandExecuteEventArgs args)
    {
        // The example uses dummy data intentionally. Replace the hard-coded string with a call to your AI API.
        args.Output = "Vel pretium lectus quam id leo in. Nisl pretium fusce id velit ut tortor pretium.";
    }

    private List<AIPromptCommandDescriptor> PromptCommands { get; set; } = new List<AIPromptCommandDescriptor>()
    {
        new AIPromptCommandDescriptor() { Id = "1", Title = "Correct spelling and grammar", Icon = SvgIcon.SpellChecker },
        new AIPromptCommandDescriptor() { Id = "2", Title = "Change Tone", Icon = SvgIcon.TellAFriend,
            Children = new List<AIPromptCommandDescriptor>
            {
                new AIPromptCommandDescriptor() { Id = "3", Title = "Professional" },
                new AIPromptCommandDescriptor() { Id = "4", Title = "Conversational" },
                new AIPromptCommandDescriptor() { Id = "5", Title = "Humorous" },
                new AIPromptCommandDescriptor() { Id = "6", Title = "Empathic" },
                new AIPromptCommandDescriptor() { Id = "7", Title = "Academic" },
            }
        },
        new AIPromptCommandDescriptor() { Id = "8", Title = "Simplify", Icon = SvgIcon.MinWidth },
        new AIPromptCommandDescriptor() { Id = "9", Title = "Expand", Icon = SvgIcon.MaxWidth },
    };
}

ToolBar

The AIPrompt includes a toolbar with built-in buttons that activate the view they are related to. The component also exposes the option to add custom tools, which may be associated with arbitrary handlers. Read more about the AIPrompt's ToolBar...

Views

The AIPrompt component offers the Prompt, Output, and Commands views that relate to the current state of the prompt-response lifecycle. You can also customize the component through custom views. Read more about the AIPrompt views...

Templates

The AIPrompt component provides templates that enable developers to customize the rendering and appearance of the component. Read more about the AIPrompt templates...

Events

The various AIPrompt events allow you to implement custom functionality and handle user interactions with the component's ToolBar. Read more about the AIPrompt events...

AIPrompt Parameters

The table below lists the AIPrompt parameters. For a full list of the AIPrompt API members (parameters, methods, and events), check the AIPrompt API Reference.

ParameterType and Default ValueDescription
AIPromptViewsRenderFragmentAllows control over the views of the content. Use it to set the visibility of a predefined view or to create custom views. If a render fragment is not provided, the AIPrompt will display its default views.
AIPromptToolBarRenderFragmentAny additional buttons that will be rendered within the ToolBar. This parameter will append the new items, rather than override buttons related to existing views.
PromptTextstringThe value of the text within the prompt view. Use it when you need to add some form of transformation to the prompt. The parameter supports two-way binding.
PromptTextChangedEventCallback<string>The handler called whenever the PromptText changes.
PromptSuggestionsList<string>The prompt suggestions displayed within the Prompt view.
PromptSuggestionItemTemplateRenderFragment<string>The Prompt Suggestion Item template of the AIPrompt.
CommandsList<AIPromptCommandDescriptor>The predefined commands displayed within the Commands view.
ShowOutputRatingbool
(false)
Controls the visibility of the rating buttons within the output card.
ClassstringThe class attribute of the <div class="k-prompt"> element. Use it to apply custom styles or override the theme.
HeightstringThe height style of the component in any supported CSS unit. The default AIPrompt dimensions depend on the CSS theme.
WidthstringThe width style of the component in any supported CSS unit. The default AIPrompt dimensions depend on the CSS theme.

AIPrompt Reference and Methods

The AIPrompt exposes methods for programmatic operation. To use them, define a reference to the component instance with the @ref directive attribute.

MethodDescription
RefreshRe-renders the component.
AddOutputInsert a new output item to the AIPrompt.

AIPrompt reference and method usage

<TelerikAIPrompt @ref="@AIPromptRef" OnPromptRequest="@HandlePromptRequest"></TelerikAIPrompt>
<div style="margin-top: 2em;">
    <TelerikTextBox @bind-Value="@CustomPrompt"></TelerikTextBox>
    <TelerikButton OnClick="@ExternalGenerateHandler">Generate</TelerikButton>
</div>

@code {
    private string CustomPrompt { get; set; }
    private TelerikAIPrompt AIPromptRef { get; set; }

    private void ExternalGenerateHandler()
    {
        // The example uses dummy data intentionally. Replace the hard-coded string with a call to your AI API.
        AIPromptRef.AddOutput(
            output: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
            title: "Generated from an external prompt",
            subtitle: string.Empty,
            prompt: CustomPrompt,
            commandId: null,
            openOutputView: true);
    }

    private void HandlePromptRequest(AIPromptPromptRequestEventArgs args)
    {
        // The example uses dummy data intentionally. Replace the hard-coded string with a call to your AI API.
        args.Output = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
    }
}

Next Steps

See Also