ASP.NET MVC InlineAIPrompt Overview

The Telerik UI InlineAIPrompt HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI InlineAIPrompt widget.

The ASP.NET MVC InlineAIPrompt is a compact, popup-style component designed to enable seamless interaction with AI language models directly within your content.

It offers a streamlined interface for submitting prompts and receiving AI-generated responses, all without interrupting the user's workflow. This makes it ideal for use cases where contextual AI assistance is needed—providing intelligent support right where users are working.

• Demo page for the InlineAIPrompt HtmlHelper

Initializing the InlineAIPrompt

The following example demonstrates how to define the InlineAIPrompt.

Razor

    @(Html.Kendo().InlineAIPrompt()
        .Name("inline-aiprompt")
        .SystemPrompt("systemPrompt")
        .Popup(popup => popup.Width(400))
        .Placeholder("Ask a question")
    )

Basic Configuration

The InlineAIPrompt provides options for configuring its commands, system prompt, and Speech-to-Text functionality. The following example demonstrates the basic configuration of the InlineAIPrompt.

Razor

@(Html.Kendo().Button()
    .Name("ai-btn")
    .Icon("sparkles")
    .Content("AI Assistance")
    .Events(e => e.Click("onClick"))
)

@(Html.Kendo().InlineAIPrompt()
    .Name("inlineAi")
    .Placeholder("Type your prompt here...")
    .Popup(p => p.Width(400))
    .SystemPrompt("systemPrompt")
    .SpeechToText(true)
    .Readonly(false)
    .Events(e => e.PromptResponse("onPromptRequest").PromptRequestCancel("onPromptRequestCancel"))
    .Commands(commands =>
    {
        commands.Add().Id("funnier").Icon("star").Text("Make the text funnier")
            .Prompt("funnierHandler");

        commands.Add().Id("explain").Icon("question").Text("Explain the text")
            .Prompt("explainHandler");
    })
)

@(Html.Kendo().TextArea()
    .Name("textarea")
    .HtmlAttributes(new { style = "height: 200px; width: 100%" })
    .Value("This is an example of post content")
)

JS

    <script>
        function onClick(e) {
            let inline = $("#inlineAi").data('kendoInlineAIPrompt');
            inline.open();
            $('.k-child-animation-container.k-popup').data('kendoPopup').position()
        }

        function systemPrompt(context, prompt) {
            var textarea = $("#textarea").data("kendoTextArea");
            return `${prompt}: ${textarea.value()}`;
        }

        function funnierHandler(e) {
            return `Make the following text funnier: `;
        }

        function explainHandler(e) {
            return `Explain the following text: `;
        }

        function onPromptRequest(ev) {
            console.log("promptRequest event is fired!")
        }

        function onPromptRequestCancel(ev) {
            console.log("promptRequestCancel event is fired!")
        }
    </script>

Functionality and Features

• Templates—The available templates allow you to control the rendering of the response.
• Streaming—The InlineAIPrompt supports streaming responses, allowing users to see AI-generated content as it is being produced.
• Integration with Microsoft.Extensions.AI—The InlineAIPrompt supports using the Microsoft.Extensions.AI library to provide seamless integration with various AI models and boost your workflow when connecting the InlineAIPrompt with AI models.
• Events—The component emits a variety of events that allow you to implement custom functionality.
• Accessibility—The InlineAIPrompt is accessible for screen readers, supports WAI-ARIA attributes, and delivers keyboard shortcuts for faster navigation.

Next Steps

• Getting Started with the InlineAIPrompt
• Basic Usage of the InlineAIPrompt HtmlHelper for ASP.NET MVC (Demo)

See Also

• Using the API of the InlineAIPrompt for ASP.NET MVC (Demo)

• Server-Side API of the InlineAIPrompt HtmlHelper

• Client-Side API of the InlineAIPrompt