New to Telerik UI for ASP.NET Core? Start a free 30-day trial

Getting Started with the InlineAIPrompt

This tutorial explains how to set up the Telerik UI for ASP.NET Core InlineAIPrompt and goes through the steps in the configuration of the component.

After completing this guide, you will achieve the following results:

Sample Telerik UI for ASP.NET Core InlineAIPrompt

Prerequisites

To successfully complete the tutorial, you need a project that is already configured to use the Telerik UI for ASP.NET Core components:

To create a new pre-configured project for the Telerik UI for ASP.NET Core components, you can use a project template.

1. Prepare the CSHTML File

Optionally, you can structure the document by adding the desired HTML elements like headings, divs, paragraphs, and others.

Razor
    @using Kendo.Mvc.UI

    <h4>Generate responses using the InlineAIPrompt</h4>
    <div>

    </div>
Razor
    @addTagHelper *, Kendo.Mvc

    <h4>Generate responses using the InlineAIPrompt</h4>
    <div>

    </div>

2. Initialize the InlineAIPrompt

Use the InlineAIPrompt HtmlHelper or TagHelper to configure the component.

The Name() configuration method is mandatory as its value is used for the id and the name attributes of the InlineAIPrompt element.

Razor
    @(Html.Kendo().InlineAIPrompt()
        .Name("inlineAi")
        .Placeholder("Type your prompt here...")
        .Popup(p => p.Width(400))
    )
Razor
    <kendo-inlineaiprompt name="inlineAi"
        placeholder="Type your prompt here..."
    >
        <popup width="400" />
    </kendo-inlineaiprompt>

3. Add the Service URL

Configure the AI service endpoint that will process the prompts. The Url option specifies the backend endpoint for AI completion requests.

The example in this article uses a Telerik-hosted AI service for demonstration purposes only.

Razor
    @(Html.Kendo().InlineAIPrompt()
        .Name("inlineAi")
        .Service(s => s.Url("https://demos.telerik.com/service/v2/ai/completion"))
        ...... //Additional configuration
    )
Razor
    <kendo-inlineaiprompt name="inlineAi"
    >
        <service url="https://demos.telerik.com/service/v2/ai/completion" /> 
        <!--Other configuration-->
    </kendo-inlineaiprompt>

Prompt commands are predefined actions that you can apply to the content for which the InlineAIPrompt is displayed. These commands offer a quick way to refine or enhance text—such as improving clarity, shortening the message, or correcting grammar—without needing to write a custom prompt.

The example below demonstrates how to configure commands in the InlineAIPrompt component to streamline text editing tasks.

Razor
    @(Html.Kendo().InlineAIPrompt()
        .Name("inlineAi")
        .Commands(commands =>
        {
            commands.Add().Id("recipe")
                .Text("Suggest a pizza recipe")
                .Icon("star")
                .Prompt("recipeHandler");

            commands.Add().Id("forecast")
                .Text("What is the weather forecast in Toronto")
                .Icon("flag")
                .Prompt("forecastHandler");
        })
        ...... //Additional configuration
    )
Razor
    <kendo-inlineaiprompt name="inlineAi"
    >
        <commands>
            <command id="recipe" icon="star" text="Suggest a pizza recipe" prompt="recipeHandler" />
            <command id="forecast" icon="flag" text="What is the weather forecast in Toronto" prompt="forecastHandler" />
        </commands>
        <!--Other configuration-->
    </kendo-inlineaiprompt>
JS
    <script>
        function recipeHandler() {
            return "Suggest a pizza recipe: "
        }

        function forecastHandler() {
            return "What is the weather forecast in Toronto: "
        }
    </script>

5. Configure the SystemPrompt Option

Set up the logic for how the system prompt is constructed. The SystemPrompt function customizes how the prompt and context are combined before sending to the AI service.

Razor
    @(Html.Kendo().InlineAIPrompt()
        .Name("inlineAi")
        .SystemPrompt("systemPrompt")
        ...... //Additional configuration
    )
Razor
    <kendo-inlineaiprompt name="inlineAi"
        system-prompt="systemPrompt"
    >
        <!--Other configuration-->
    </kendo-inlineaiprompt>
JS
    <script>
        function systemPrompt(context, prompt) {
            return prompt + ": " + context;
        }
    </script>

6. Enable the Speech-to-Text Button

The InlineAIPrompt component supports speech-to-text functionality, allowing users to input prompts using their voice. To enable this feature, set the SpeechToText property to true.

Razor
    @(Html.Kendo().InlineAIPrompt()
        .Name("inlineAi")
        .SpeechToText(true)
        ...... //Additional configuration
    )
Razor
    <kendo-inlineaiprompt name="inlineAi"
        speech-to-text="true"
    >
        <!--Other configuration-->
    </kendo-inlineaiprompt>

7. Handle the InlineAIPrompt Events

The InlineAIPrompt exposes events that you can handle and further customize the functionality of the component. In this tutorial, you will use the exposed PromptRequest which is triggered before a request has been initiated to the specified service.

Razor
    @(Html.Kendo().InlineAIPrompt()
        .Name("inlineaiprompt")
        .Events(ev => ev.PromptRequest("onPromptRequest"))
        ... //Additional configuration
    )
Razor
    @addTagHelper *, Kendo.Mvc

    <kendo-inlineaiprompt name="inlineaiprompt" on-prompt-request="onPromptRequest">
       <!--Other configuration-->
    </kendo-inlineaiprompt>
JS
    <script>
        function onPromptRequest(e) {
            console.log("Prompt requested");
        }
    </script>

8. (Optional) Reference Existing InlineAIPrompt Instances

Referencing existing component instances allows you to build on top of their configuration. To reference an existing InlineAIPrompt instance, use the jQuery.data() method.

Use the Name() option of the component to establish a reference.

    <script>
        var inlineaipromptReference = $("#inlineAi").data("kendoInlineAIPrompt"); // inlineaipromptReference is a reference to the existing instance of the helper.
    </script>

Use the InlineAIPrompt client-side API to control the behavior of the widget. In this example, you will see how to change the current active view (for example, when a button is clicked).

Razor
    @(Html.Kendo().Button()
        .Name("btn")
        .Content("AI Assistance")
        .Events(ev => ev.Click("onBtnClick")))
    
    <script>
        function onBtnClick() {
            var inlineaipromptReference = $("#inlineAi").data("kendoInlineAIPrompt"); 
            inlineaipromptReference.Open();
        }
    </script>
Razor
    @addTagHelper *, Kendo.Mvc

    <kendo-button name="btn" on-click="onBtnClick">
        AI Assistance
    </kendo-button>

    <script>
        function onBtnClick() {
            var inlineaipromptReference = $("#inlineAi").data("kendoInlineAIPrompt");
            inlineaipromptReference.open();
        }
    </script>

Explore this Tutorial in REPL

You can continue experimenting with the code sample above by running it in the Telerik REPL server playground: