# Templates

The AIPrompt provides full control over the rendering of the items by using [Kendo UI templates](https://www.telerik.com/kendo-jquery-ui/documentation/framework/templates/overview).

For a complete example, refer to the [demo on customizing the AIPrompt templates](https://demos.telerik.com/kendo-ui/aiprompt/templates).

## PromptSuggestion Template

The [`promptSuggestionItemTemplate`](https://www.telerik.com/kendo-jquery-ui/documentation/api/ui/aiprompt/configuration/promptsuggestionitemtemplate) allows you to customize the appearance of the prompt suggestion items in the `prompt` view.

```dojo
    <div id="aiprompt"></div>
  <script>
        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"
        }]

        $("#aiprompt").kendoAIPrompt({              
            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,
                };

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

                },
                {
                    type: 'output',
                }
            ]
        });
    </script>
```

## See Also

* [Templates Demo of the AIPrompt](https://demos.telerik.com/kendo-ui/aiprompt/templates)
* [JavaScript API Reference of the AIPrompt](https://www.telerik.com/kendo-jquery-ui/documentation/api/ui/aiprompt)