Angular InlineAIPrompt Templates
The Kendo UI for Angular InlineAIPrompt provides template options that enable you to customize the rendering of AI response content, allowing you to create rich, branded, and user-friendly output displays.
By default, the Inline AI Prompt displays AI responses as plain text in a simple output card. While this works for basic scenarios, you often need more control over the presentation to apply consistent styling, colors, and typography, or to include buttons, links, or other UI components within responses.
Output Template
The Inline AI Prompt component provides the ability to customize the appearance and structure of AI responses displayed in the output card through the output template feature.
To customize the output, apply the InlineAIPromptOutputTemplateDirective to an <ng-template> tag nested inside the <kendo-inlineaiprompt> component. The InlineAIPromptOutput object is available as template context using the let-output syntax.
<kendo-inlineaiprompt>
<ng-template kendoInlineAIPromptOutputTemplate let-output>
Question: {{output.prompt}}
<br />
Answer: {{output.output}}
</ng-template>
</kendo-inlineaiprompt>The following example demonstrates how to create a comprehensive custom template for the AI response in the Inline AI Prompt component.