Blazor AIPrompt Overview

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

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

Add the <TelerikAIPrompt> tag.
Subscribe to the OnPromptRequest event that will fire whenever the user sends a prompt request. The handler expects an argument of type AIPromptPromptRequestEventArgs.
(optional) Set the Commands parameter to a List<AIPromptCommandDescriptor>. If the parameter is not set, the AIPrompt will not render the Commands view.
(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 },
    };
}

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

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.";
    }
}

Blazor AIPrompt Overview

Creating Blazor AIPrompt

Views

Templates

Events

AIPrompt Parameters

AIPrompt Reference and Methods

Next Steps

See Also