# Angular AIPrompt Templates

The Kendo UI for Angular AIPrompt provides various templates that enable you to customize the rendering of its elements.

## Toolbar Template

The Kendo UI for Angular AIPrompt enables you to render custom toolbar actions in addition to the views' buttons by using the [`AIPromptToolbarActionsDirective`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/aiprompttoolbaractionsdirective) directive.

The following example demonstrates how to display a custom close button.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/conversational-ui/aiprompt/templates/toolbar-template/source.txt)

## Output Template

The AIPrompt component provides the ability to customize the appearance of the responses in the **Output View** that are returned by the AI model.

To implement an output template, apply the [`AIPromptOutputTemplateDirective`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/aipromptoutputtemplatedirective) to an `<ng-template>` tag nested inside the `<kendo-aiprompt>` component. The current [`PromptOutput`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/promptoutput) object is available as template context by using the `let-output` syntax.

The following example demonstrates how to customize the rendering of the responses in the **Output View** of the AIPrompt component.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/conversational-ui/aiprompt/templates/response-template/source.txt)

## Output Body Template

The AIPrompt allows you to only customize the body of the returned responses in the **Output View** by using the [`AIPromptOutputBodyTemplateDirective`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/aipromptoutputbodytemplatedirective). This directive provides context about the current [`PromptOutput`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/promptoutput) object through the `let-output` syntax.

The following example demonstrates how to modify the appearance of the response body in the **Output View** of the AIPrompt.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/conversational-ui/aiprompt/templates/response-body-template/source.txt)

## Suggested Links

* [API Reference of the Conversational UI](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api)
* [API Reference of the `AIPromptComponent`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/aipromptcomponent)
* [API Reference of the `AIPromptToolbarActionsDirective`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/aiprompttoolbaractionsdirective)