# Customizing the Views

The Angular AIPrompt comes with four view types that render different content and let you address different user interactions. You can alter the views by changing the icons and text of the toolbar button and even add entirely custom views. Changing the default [active view](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/aiprompt/views#setting-the-active-view) is also supported.

Currently, the AIPrompt supports the following built-in views:

* **Prompt View**—provides an input field that allows the users to interact with the AI model by typing their instructions or requests.
* **Output View**—allows you to visualize the responses generated by the AI model.
* **Command View**—renders a list of executable commands.
* **Custom View**—enables you to fully customize the content of the view.

For more details on how to configure the views, refer to the [Configuration](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/aiprompt/configuration) article.

## Custom Text

Each view allows you to override its default button text by setting the [`buttonText`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/promptviewcomponent#buttontext) property.

The following example demonstrates customizing the **Prompt View** button text.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/conversational-ui/aiprompt/views/custom-text/source.txt)

## Custom Icons

To customize the default toolbar button icons of a view, set the [`icon`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/promptviewcomponent#icon) or [`svgIcon`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/promptviewcomponent#svgicon) property of the respective view, depending on the [icon type](https://www.telerik.com/kendo-angular-ui-develop/components/icons/icon-settings) that is utilized in your application.

In addition to customizing the toolbar button icons, you can also modify the icon of the **Generate** button in the **Prompt View**. The AIPrompt provides the [`generateButtonSVGIcon`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/aipromptcomponent#generatebuttonsvgicon) and [`generateButtonIcon`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/aipromptcomponent#generatebuttonicon) properties that allow you to specify a custom SVG or font icon for the **Generate** button.

The following example demonstrates how to customize the **Prompt View** button icons.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/conversational-ui/aiprompt/views/custom-icons/source.txt)

## Custom View

The AIPrompt provides a designated [`CustomViewComponent`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/customviewcomponent) which allows you to determine the exact view content.

To specify the custom content, use the `ng-template` tag and pass its reference to the built-in [`viewTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/customviewcomponent#viewtemplate) property.

The following example demonstrates the custom view in action.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/conversational-ui/aiprompt/views/custom-view/source.txt)

## Setting the Active View

By default, the AIPrompt will display the first declared view as active. To control this, use the built-in [`activeView`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/aipromptcomponent#activeview) property. The property supports two-way binding and helps you keep track of the currently selected view index.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/conversational-ui/aiprompt/default-view/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)