New to Telerik UI for ASP.NET CoreStart a free 30-day trial

ASP.NET Core AIPrompt Overview

The Telerik UI AIPrompt TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI AIPrompt widget.

The AIPrompt is a standalone view component that helps end users write prompts, use prompt suggestions, and execute predefined commands to interact with a trained language model.

When a prompt is submitted, the component triggers an event that contains information about the prompt and the executed command. You can access this information and use it to create a request to an AI service. When the request response from the AI service is received, the AIPrompt component displays the output as a card with options to copy, retry, or rate the output (with like or dislike reactions).

Initializing the AIPrompt

The following example demonstrates how to define the AIPrompt.

Razor
    @(Html.Kendo().AIPrompt()
        .Name("aiprompt")
        .PromptSuggestions(new string[] { "Act as [actor] and write [format] about [subject] in [100 words]", "Suggest post about [subject] that will be used in [social media]" })
    )

Basic Configuration

The AIPrompt provides options for configuring its views, toolbar items, and appearance options. The following example demonstrates the basic configuration of the AIPrompt.

Razor
    @(Html.Kendo().AIPrompt()
        .Name("aiprompt")
        .Events(ev => ev.CommandExecute("onCommandExecute").PromptRequest("onPromptRequest"))
        .Views(views =>
        {
            views.Add().Type(ViewType.Prompt)
            .PromptSuggestions(new string[] { "Out of office (contact colleague)", "LinkedIn post for well-being" });
            views.Add().Type(ViewType.Output);
            views.Add().Type(ViewType.Commands)
            .PromptCommands(commands =>
            {
                commands.Add().Id("1").Text("Extend").Icon("arrows-left-right");
            });
        })
    )

Functionality and Features

  • Views—The AIPrompt provides predefined and custom views.
  • Templates—The available templates allow you to control the rendering of the views and prompt suggestions layout.
  • Integration with Microsoft.Extensions.AI—The AIPrompt supports using the Microsoft.Extensions.AI library to provide seamless integration with various AI models and boost your workflow when connecting the AIPrompt with AI models.
  • Events—The component emits a variety of events that allow you to implement custom functionality.
  • Accessibility—The AIPrompt is accessible for screen readers, supports WAI-ARIA attributes, and delivers [keyboard shortcuts(slug://keynav_aspnetcore_aiprompt)] for faster navigation.

Next Steps

See Also