---
title: Overview
position: 1
seo_title: Overview of the AIPrompt Component
seo_description: Learn about the basic features of the Telerik and Kendo UI
  AIPrompt component and its types, check out the extensive set of available
  options in its live demo.
---
## AIPrompt Overview

The Telerik and Kendo UI AIPrompt enables the users of your application to interact with a trained language model of your choice. It comprises an input field, a customizable menu with pre-defined commands, and user-selectable options for query management.

### Live Demo

<LiveDemo data='{"links":[{"text":"Angular","url":"https://www.telerik.com/kendo-angular-ui/components/conversational-ui/aiprompt/"},{"text":"Blazor","url":"https://docs.telerik.com/blazor-ui/components/aiprompt/overview"},{"text":"jQuery","url":"https://docs.telerik.com/kendo-ui/controls/aiprompt/overview"},{"text":"React","url":"https://www.telerik.com/kendo-react-ui/components/conversationalui/ai-prompt/"},{"text":"Vue","url":"https://www.telerik.com/kendo-vue-ui/components/conversationalui/ai-prompt"},{"text":"ASP.NET Core","url":"https://docs.telerik.com/aspnet-core/html-helpers/conversational-ui/aiprompt/overview"},{"text":"ASP.NET MVC","url":"https://docs.telerik.com/aspnet-mvc/html-helpers/conversational-ui/aiprompt/overview"}],"demo":"components/prompt/overview"}'></LiveDemo>

### Appearance

The configuration of the AIPrompt component revolves around the concept of Views. Each View includes elements that are specific to the current stage of the user's interaction with the AI model:

* Prompt View—Serves as a key area for the user input and includes a main input field for entering prompts, a list of suggestions, and a button to submit requests to the large language model (LLM).
* Output View—Visualizes all previous interactions by showing prompts (or commands) and their results and provides options to retry, copy, or rate each response.
* Command View—Lists custom commands that can be used in your specific context or as independent queries to the LLM.
* Custom View—Enables you to customize the view content entirely.

#### Anatomy

The anatomy of the AIPrompt summarizes the elements of the component:

<BlueprintImage data='{"description":"","labels":[{"text":"Toolbar"},{"text":"Prompt view"},{"text":"Output view"},{"text":"Prompt text area"},{"text":"Generate button"},{"text":"Response card"},{"text":"Request command"},{"text":"Request content"},{"text":"Response content"},{"text":"Copy button"},{"text":"Retry button"},{"text":"Vote buttons"}]}'>![A Telerik and Kendo UI AIPrompt component](images/components-ai-prompt-overview-anatomy.png "Anatomy and elements of a Telerik and Kendo UI AIPrompt")</BlueprintImage>

### Prompt Suggestions

The AIPrompt lets the user interact with the AI model in two ways&mdash;by typing their instructions and requests in the dedicated input field and by selecting from a list of predefined prompt suggestions.

<BlueprintImage data='{"description":"","labels":[{"text":"Collapsed view"},{"text":"Expanded view"}]}'>![A Telerik and Kendo UI AIPrompt with collapsed prompt suggestions.](images/components-ai-prompt-overview-prompt-suggestions.png "A Telerik and Kendo UI AIPrompt component shows a list of pre-generated prompt suggestions.")</BlueprintImage>

### Command View

The Telerik and Kendo UI AIPrompt component lets you define custom prompt commands that users can select and apply.

<BlueprintImage data='{"description":"","labels":[]}'>![Three custom command options for the Telerik and Kendo UI AIPrompt component.](images/components-ai-prompt-overview-command-view.png "In the Telerik and Kendo UI AIPrompt you can set custom prompt commands.")</BlueprintImage>

### Framework-Specific Documentation

For specific information about the component, refer to its official product documentation:

<Wrap>
<ExternalResource data='{"title":"Kendo UI for Angular AIPrompt","description":"Find more information about the Kendo UI for Angular AIPrompt in the official product documentation of the component.","url":"http://www.telerik.com/kendo-angular-ui/components/conversational-ui/aiprompt/"}'>![Kendo UI for Angular logo.](/images/angular-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for Blazor AIPrompt","description":"Find more information about the Telerik UI for Blazor AIPrompt in the official product documentation of the component.","url":"https://docs.telerik.com/blazor-ui/components/aiprompt/overview"}'>![Telerik UI for Blazor logo.](/images/blazor-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for jQuery AIPrompt","description":"Find more information about the Kendo UI for jQuery AIPrompt in the official product documentation of the component.","url":"https://docs.telerik.com/kendo-ui/controls/aiprompt/"}'>![Kendo UI for jQuery logo.](/images/jquery-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"KendoReact AIPrompt","description":"Find more information about the KendoReact AIPrompt in the official product documentation of the component.","url":"http://www.telerik.com/kendo-react-ui/components/conversationalui/ai-prompt/"}'>![Kendo UI for React logo.](/images/react-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Kendo UI for Vue AIPrompt","description":"Find more information about the Kendo UI for Vue AIPrompt in the official product documentation of the component.","url":"https://www.telerik.com/kendo-vue-ui/components/components/conversationalui/ai-prompt/"}'>![Kendo UI for Vue logo.](/images/vue-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET Core AIPrompt","description":"Find more information about the Telerik UI for ASP.NET Core AIPrompt component.","url":"https://docs.telerik.com/aspnet-core/html-helpers/conversational-ui/aiprompt/overview"}'>![Telerik UI for ASP.NET Core logo.](/images/core-logo.svg)</ExternalResource>

<ExternalResource data='{"title":"Telerik UI for ASP.NET MVC AIPrompt","description":"Find more information about the Telerik UI for ASP.NET MVC AIPrompt component.","url":"https://docs.telerik.com/aspnet-mvc/html-helpers/conversational-ui/aiprompt/overview"}'>![Telerik UI for ASP.NET MVC logo.](/images/mvc-logo.svg)</ExternalResource>

</Wrap>