Templates
The AIPrompt allows you to control the appearance of the prompt suggestion and view items by using template options.
For more information on the capabilities and syntax of the templates, see the Using Client Templates article. For a runnable example, refer to the demo on customizing the templates in the AIPrompt.
Prompt Suggestion Items Template
The list of prompt suggestions is displayed in the Prompt view. You can customize the appearance of the suggestion items through different template methods like PromptSuggestionItemTemplate(), PromptSuggestionItemTemplateHandler(), and PromptSuggestionItemTemplateId().
The following example demonstrates how to use the PromptSuggestionItemTemplateHandler() option to style each prompt suggestion item based on its content.
@(Html.Kendo().AIPrompt()
.Name("aiprompt")
.PromptSuggestionItemTemplateHandler("promptSuggestionTemplate")
.Views(views =>
{
views.Add().Type(ViewType.Prompt)
.PromptSuggestions(new string[] { "Out of office (contact colleague)", "LinkedIn post for work/life balance and well-being" });
views.Add().Type(ViewType.Output);
})
)Output Items Template
Use the OutputTemplate() option to control how each generated output card is rendered in the Output view. The specified template is applied after the output has finished streaming to render the final content.
The option has a various overloads like OutputTemplateHandler(), OutputTemplateId(), OutputTemplate() that accepts a Template component, and OutputTemplateView().
The following example demonstrates how to customize the default appearance of the output cards.
@(Html.Kendo().AIPrompt()
.Name("aiprompt")
.OutputTemplateHandler("outputTemplate")
... // Additional configuration.
)View Content Templates
The AIPrompt supports custom views through the Views() configuration. By using the ViewTemplate() and the FooterTemplate() methods, you can specify the content and footer of that custom view.
The following example demonstrates how to add a custom view in the AIPrompt component.
@(Html.Kendo().AIPrompt()
.Name("aiprompt")
.Views(views =>
{
views.Add().Type(ViewType.Custom).Name("myCustomView")
.ButtonText("Additional options")
.ViewTemplate("<div><p>Custom View content</p></div>")
.FooterTemplate("<div class='custom-footer'>Custom View footer</div>");
})
)