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

AI Integration

The Editor features AI integration through the AIPrompt component, enabling a smarter and more efficient content creation experience.

You can enable the functionality by using the AI() configuration and specifying the endpoint that will request an answer from the desired LLM service. For that, use the Service() method and pass the respective Action and Controller.

The following example demonstrates the basic AI configuration for the Editor.

Razor
    @(Html.Kendo().Editor()
        .Name("editor")
        .AI(ai => ai
            .AIPrompt(true)
            .Service(s => s.Url("AIChatCompletion", "AIPrompt"))
            .InlineAIPrompt(true)
            .Commands(c =>
            {
                c.Add().Id("rewrite").Text("Rewrite").Icon("arrow-rotate-cw").Prompt(@<text>function(context) {return `Rewrite the selected text while preserving its original meaning and intent. Selected Text: ${context}` }</text>);
                c.Add().Id("fix-spelling").Text("Fix spelling").Icon("spell-checker").Prompt(@<text>function(context) {return `Correct any spelling, grammar, or punctuation mistakes in the selected text while preserving its original meaning and intent. Selected Text: ${context}` }</text>);
                c.Add().Id("change-tone-neutral").Text("Change to neutral tone").Icon("tell-a-friend").Prompt(@<text>function(context) {return `Adjust the tone of the following text to be more neutral while preserving its original meaning and intent. Selected Text: ${context}` }</text>);
                c.Add().Id("change-tone-friendly").Text("Change to friendly tone").Icon("tell-a-friend").Prompt(@<text>function(context) {return `Adjust the tone of the following text to be more friendly while preserving its original meaning and intent. Selected Text: ${context}` }</text>);

                c.Add().Id("adjust-length-shorten").Text("Shorten Length").Icon("col-resize").Prompt(@<text>function(context) {return `Shorten the following text while preserving its original meaning and intent. Selected Text: ${context}` }</text>);
            })
        
        )
    )

For a live example, visit the AI Integration Demo of the Editor.

See Also

In this article
See Also
Not finding the help you need?
Contact Support