New to Kendo UI for jQuery? Download free 30-day trial


The AIPrompt provides full control over the rendering of the items by using Kendo UI templates.

For a complete example, refer to the demo on customizing the AIPrompt templates.

PromptSuggestion Template

The promptSuggestionItemTemplate allows you to customize the appearance of the prompt suggestion items in the prompt view.

    <div id="aiprompt"></div>
        var promptData = [
                suggestion: "Out of office (contact colleague)",
                output: "Out of office response generated by AI",
                color: "green"
                suggestion: "LinkedIn post for work/life balance and well-being",
                output: "LinkedIn post response generated by AI",
                color: "red"

            promptRequest: function(ev) {

                //mocked response from AI service
                const response = promptData.find((s) => s.suggestion === ev.prompt);

                const output = {
                    id: kendo.guid(),
                    output: response.output,
                    prompt: ev.prompt,
                    isRetry: ev.isRetry,

            promptSuggestionItemTemplate: ({ suggestion }) => `<span role="listitem" class="k-prompt-suggestion" style="color:${suggestion.color};">${suggestion.text}</span>`,
            views: [
                    type: 'prompt',
                    promptSuggestions: => ({color : x.color, text : x.suggestion }))

                    type: 'output',

See Also

In this article