ASP.NET MVC AIPrompt Overview

Telerik UI for ASP.NET MVC Ninja image

The AIPrompt is part of Telerik UI for ASP.NET MVC, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

The Telerik UI AIPrompt HtmlHelper for ASP.NET MVC is a server-side wrapper 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.

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

        .Events(ev => ev.CommandExecute("onCommandExecute").PromptRequest("onPromptRequest"))
        .Views(views =>
            .PromptSuggestions(new string[] { "Out of office (contact colleague)", "LinkedIn post for well-being" });
            .PromptCommands(commands =>

        var defaultResponse = 'For real prompt processing, please connect the component to a preferred AI service.';
        var promptData = [
            suggestion: "Out of office (contact colleague)",
            output: "This is an example of out-of-office template content.",
            extend: "This is an extended version of out-of-office template content."

            suggestion: "LinkedIn post for well-being",
            output: "This is an example of post content.",
            extend: "This is an extended version of the post content."

        function onCommandExecute(ev) {
            var aipromptWidget = ev.sender; // Get a reference to the AIPrompt.
            if (this.promptOutputs.length > 0) { // Check if the Output view is not empty.
                let output = this.promptOutputs[0].prompt; // Get the first prompt in the Output view.
                const response = promptData.find((s) => s.suggestion === output); // Find the prompt item in the data collection.
                if (response) {
                    let result = { // Construct the modified output.
                        id: kendo.guid(),
                        output: response[ev.item.text.toLowerCase()], // Pass the extended version of the output.
                        prompt: output,
                        isRetry: ev.isRetry
                    aipromptWidget.addPromptOutput(result); // Add the modified output content when the 'Extend' command is clicked.

        function onPromptRequest(ev) {
            var aipromptWidget = ev.sender; // Get a reference to the AIPrompt.
            const response = promptData.find((s) => s.suggestion === ev.prompt); // Find the prompt item in the data collection.
            const output = {
                id: kendo.guid(),
                output: response?.output || defaultResponse,
                prompt: ev.prompt,
                isRetry: ev.isRetry,

            aipromptWidget.addPromptOutput(output); // Set the output based on the selected prompt suggestion.
            aipromptWidget.activeView(1); // Activate the Output view.

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.
  • 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(/aspnet-mvc/html-helpers/conversational-ui/aiprompt/accessibility/keyboard-navigation)] for faster navigation.

Next Steps

See Also

In this article