Components / AIPrompt

Blazor AIPrompt Overview

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

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.

Telerik UI for Blazor Ninja image

The 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.

Download Free Trial

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 = FontIcon.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.

Parameter Type and Default Value Description
AIPromptViews RenderFragment Allows 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.
AIPromptToolBar RenderFragment Any additional buttons that will be rendered within the ToolBar. This parameter will append the new items, rather than override buttons related to existing views.
PromptText string The 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.
PromptTextChanged EventCallback<string> The handler called whenever the PromptText changes.
PromptSuggestions List<string> The prompt suggestions displayed within the Prompt view.
PromptSuggestionItemTemplate RenderFragment<string> The Prompt Suggestion Item template of the AIPrompt.
Commands List<AIPromptCommandDescriptor> The predefined commands displayed within the Commands view.
ShowOutputRating bool
(false)		 Controls the visibility of the rating buttons within the output card.
Class string The class attribute of the <div class="k-prompt"> element. Use it to apply custom styles or override the theme.
Height string The height style of the component in any supported CSS unit. The default AIPrompt dimensions depend on the CSS theme.
Width string The 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.

Method Description
Refresh Re-renders the component.
AddOutput Insert 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

In this article
Related articles
Not finding the help you need? Improve this article