• Getting Started
  • Components
    • Barcodes
    • Buttons
    • Chartsupdated
    • Conversational UIupdated
    • Data Query
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filter
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputsupdated
    • Labels
    • Layout
    • ListBox
    • ListView
    • Map
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PDFViewer
    • PivotGrid
    • Popup
    • ProgressBars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • ToolBar
    • Tooltips
    • TreeList
    • TreeViewupdated
    • Typography
    • Uploads
    • Utilities
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Sample Applications
  • FAQ
  • Troubleshooting
  • Updates
  • Changelogs
New to Kendo UI for Angular? Start a free 30-day trial

Angular AIPrompt Views

Currently, the AIPrompt component supports the following views:

Prompt View

The PromptViewComponent allows you to ask the AI model question and use it to generate content which is displayed in the designated Output view.

The following example demonstrates the prompt view in action.

Example
View Source
Change Theme:

Output View

The AIPrompt provides a OutputViewComponent which can be used to visualize the response of the AI model to the request that has been set to it.

To display the AI response inside the OutputViewComponent, create an array of PromptOutput objects and pass them to the built-in promptOutputs property. In case the response is generated by using any of the predefined commands in the Command view, make sure to set the designated commandId property.

The following example demonstrates the output view in action.

Example
View Source
Change Theme:

Command View

The CommandViewComponent allows you to display a set of predetermined commands which will be executed by the AI model.

To specify the available commands, create an array of PromptCommand objects and pass it to the promptCommands property.

The following example demonstrates the command view in action.

Example
View Source
Change Theme:

Custom View

The AIPrompt provides a designated CustomViewComponent which allows you to determine the exact content that will be displayed inside the component.

To specify the custom content, use the ng-template tag and pass its reference to the built-in viewTemplate property.

The following example demonstrates the custom view in action.

Example
View Source
Change Theme:

Changing the Default View

By default, the AIPrompt will display the first view component that is declared inside it.

To programmatically set the active view, use the built-in activeView property. The property supports two-way binding and allows you to keep track of the index of the currently selected view.

The following example demonstrates how to change the default view using the activeView property.

Example
View Source
Change Theme: