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

Commands

configuration

The commands to display in the Prompt's Context Menu.

commands

Array

<div id="inlineaiprompt"></div>
<script>
$("#inlineaiprompt").kendoInlineAIPrompt({
    commands: [
                  {
                    id: "funnier",
                    text: "Make the text funnier with a lot of sarcasm",
                    icon: "star",
                    prompt: (selection) => `Make the following text funnier: ${selection}`
                  },
                  {
                    id: "change-tone",
                    text: "Change tone",
                    icon:() => {return kendo.ui.icon({icon: "minus", type:"svg" }) },
                    items: [
                        {
                            id: "change-tone-neutral",
                            text: "Neutral",
                            prompt: (selection) => `Adjust the tone of the following text to be more neutral while preserving its original meaning and intent.

                                    Selected Text:
                                    ${selection}`
                        },
                        {
                            id: "change-tone-friendly",
                            text: "Friendly",
                            prompt: (selection) => `Adjust the tone of the following text to be more friendly while preserving its original meaning and intent.

                                    Selected Text:
                                    ${selection}`
                        },
                        {
                            id: "change-tone-casual",
                            text: "Casual",
                            prompt: (selection) => `Adjust the tone of the following text to be more casual while preserving its original meaning and intent.

                                    Selected Text:
                                    ${selection}`
                        }
                    ]
                }
    ]
})
</script>

commands.icon

String

The icon name of the command item.

<div id="inlineaiprompt"></div>
<script>
$("#inlineaiprompt").kendoInlineAIPrompt({
    commands: [{
        id: "explain",
        text: "Explain",
        icon: "info-circle"
    }]
});
</script>

commands.id

String

The id of the command item.

<div id="inlineaiprompt"></div>
<script>
$("#inlineaiprompt").kendoInlineAIPrompt({
    commands: [{
        id: "summarize",
        text: "Summarize",
        icon: "file-text"
    }]
});
</script>

commands.items

Object

Allows nesting commands in a hierarchical manner.

<div id="inlineaiprompt"></div>
<script>
$("#inlineaiprompt").kendoInlineAIPrompt({
    commands: [{
        id: "translate",
        text: "Translate",
        icon: "translate",
        items: [
            { id: "translate-es", text: "Spanish", prompt: (context) => `Translate to Spanish: ${context.selectedText}` },
            { id: "translate-fr", text: "French", prompt: (context) => `Translate to French: ${context.selectedText}` }
        ]
    }]
});
</script>

commands.prompt

Function

The prompt that will be composed for the command.

<div id="inlineaiprompt"></div>
<script>
$("#inlineaiprompt").kendoInlineAIPrompt({
    commands: [{
        id: "summarize",
        text: "Summarize",
        icon: "file-text",
        prompt: (context) => `Please summarize the following text: ${context.selectedText}`
    }]
});
</script>

commands.text

String

The text of the command item.

<div id="inlineaiprompt"></div>
<script>
$("#inlineaiprompt").kendoInlineAIPrompt({
    commands: [{
        id: "translate",
        text: "Translate to Spanish",
        icon: "translate"
    }]
});
</script>