# Configuration

The Angular AIPrompt component delivers a set of configuration options, which provide you with pre-determined ways to interact with a trained language model of your choice. The component helps integrate Large Language Model (LLM) technology into your application, adding artificial intelligence (AI) features.

The configuration of the AIPrompt components 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 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 AI.
* **Custom View**—Enables you to customize the view content entirely.

For more details on how to alter the appearance of each view, refer to the article on [customizing the views](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/aiprompt/views).

> The examples in this article use mocked data intentionally. Replace the hard-coded strings with a call to your selected AI API.

## Basics

1. Use the AIPrompt component as a parent for the Views that you want to configure.
2. Place the desired Views and their configuration options as children of the AIPrompt component.
3. Order the views in the sequence that you want them to appear in the AIPropompt's Toolbar.

```html
<kendo-aiprompt>
    <kendo-aiprompt-prompt-view buttonText="Prompt View">
    </kendo-aiprompt-prompt-view>

    <kendo-aiprompt-output-view>
    </kendo-aiprompt-output-view>
</kendo-aiprompt>
```

## Getting Started

The next example demonstrates a simple request handling using the **Prompt** and **Output View**. To reproduce the results, follow the steps below the example.

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

1. Define the **Prompt View** by nesting a `<kendo-aiprompt-prompt-view>` tag inside the `<kendo-aiprompt>` element. This will allow the users to directly interact with the AI model, for example, by asking a question.

2. Define the **Output View** by nesting a `<kendo-aiprompt-output-view>` tag inside the `<kendo-aiprompt>` element. This will allow you to visualize the responses generated by the underlying AI service.

3. Bind to the AIPrompt [`promptOutputs`](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/api/aipromptcomponent#promptoutputs) property.

4. Bind to the AIPrompt [`promptRequest`](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/api/aipromptcomponent#promptrequest) event which will fire each time the user clicks the **Generate** button.

5. Use the [`promptRequest`](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/api/aipromptcomponent#promptrequest) event handler to submit a request to the AI service and to handle the response.

   ```ts
   public onPromptRequest(ev: PromptRequestEvent): void {
       // Execute a call to the LLM API.
   }
   ```

6. Based on the service response, construct a [`PromptOutput`](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/api/promptoutput) object and add it to the `promptOutputs` array.

   ```ts
   public onPromptRequest(ev: PromptRequestEvent): void {
       // Execute a call to the LLM API.

       const output: PromptOutput = {
           id: 1,
           prompt: ev.prompt,
           output: "This is a mocked response."
       };

       this.promptOutputs.unshift(output);
   }
   ```

7. Set the **Output View** as active by setting the [`activeView`](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/api/aipromptcomponent#activeview) property.

   ```ts
   public onPromptRequest(ev: PromptRequestEvent): void {
       // Execute a call to the LLM API.

       const output: PromptOutput = {
           id: 1,
           prompt: ev.prompt,
           output: "This is a mocked response."
       };

       this.promptOutputs.unshift(output);
       this.activeView = 1;
   }
   ```

## Adding Prompt Suggestions

The AIPrompt enables you to display a list of prompt suggestions in the **Prompt View** by binding to the [`promptSuggestions`](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/api/aipromptcomponent#promptsuggestions) property. The user can select any of the available suggestions, which in turn will populate the prompt input with the selected suggestion. The user can then modify the suggestion.

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

## Adding Commands

The AIPrompt allows you to display a set of predefined commands in its **Command View** which the user can browse and execute. You can also organize commands in a hierarchy, through parent-child relationships.

> Parent commands in a hierarchy cannot be executed directly.

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

To add predefined commands to the **Command View**:

1. Define the **Command View** by nesting a `<kendo-aiprompt-command-view>` tag inside the `<kendo-aiprompt>` element.

2. Bind to the AIPrompt [`promptCommands`](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/api/aipromptcomponent#promptcommands) property.

3. Bind to the AIPrompt [`commandExecute`](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/api/aipromptcomponent#commandexecute) event which will fire each time the user clicks an executable command.

4. Use the [`commandExecute`](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/api/aipromptcomponent#commandexecute) event handler to submit request to the AI service and to handle the response.

   ```ts
   public onCommandExecute(ev: CommandExecuteEvent): void {
       // Execute a call to the LLM API.
   }
   ```

5. Based on the service response, construct a [`PromptOutput`](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/api/promptoutput) object and add it to the `promptOutputs` array. When an output is generated by executing a prompt command, set the output's [`commandId`](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/api/promptoutput#commandid) property to the [`id`](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/api/promptcommand#id) property of the command. This instructs the component which event to fire when the user clicks the output's **Retry** button—[`promptRequest`](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/api/aipromptcomponent#promptrequest) or [`commandExecute`](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/api/aipromptcomponent#commandexecute). Outputs that have their [`commandId`](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/api/promptoutput#commandid) property set will fire the [`commandExecute`](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/api/aipromptcomponent#commandexecute) event, and outputs that are missing the property—the [`promptRequest`](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/api/aipromptcomponent#promptrequest) event.

   ```ts
   public onCommandExecute(ev: CommandExecuteEvent): void {
       // Execute a call to the LLM API.

       const output: PromptOutput = {
           id: 1,
           prompt: ev.command.text,
           output: "This is a mocked response.",
           commandId: ev.command.id //make sure to set the `commandId` property
       };

       this.promptOutputs.unshift(output);
   }
   ```

6. Set the **Output View** as active by setting the [`activeView`](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/api/aipromptcomponent#activeview) property.

   ```ts
   public onCommandExecute(ev: CommandExecuteEvent): void {
       // Execute a call to the LLM API.

       const output: PromptOutput = {
           id: 1,
           prompt: ev.command.text,
           output: "This is a mocked response.",
           commandId: ev.command.id
       };

       this.promptOutputs.unshift(output);
       this.activeView = 1;
   }
   ```

### Adding Copy Notification

When the user clicks an output's `Copy` button, the prompt text is copied to the clipboard and the [`AIPrompt`](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/api/aipromptcomponent) emits the [`outputCopy`](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/api/aipromptcomponent#outputcopy) event. Use the event handler to execute custom logic upon copying, for example, to show a notification.

The following example demonstrates rendering a success notification when an output is copied.

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

### Adding Output Rating

All **Output View** cards render **Copy** and **Retry** action buttons by default. You can add additional action buttons to up- and downvote outputs by setting the [`showOutputRating`](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/api/aipromptcomponent#showoutputrating) property of the [`AIPrompt`](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/api/aipromptcomponent) component. To handle the voting interaction, bind to the [`outputRatingChange`](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/api/aipromptcomponent#outputratingchange) event.

The following example demonstrates the voting functionality.

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

## Enabling Speech-to-Text

The AIPrompt component allows you to display a [SpeechToTextButton](https://www.telerik.com/kendo-angular-ui/components/buttons/speechtotextbutton) in the **Prompt View** by setting the [`speechToTextButton`](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/api/aipromptcomponent#speechtotextbutton) property. This button lets users input prompts using their voice, which are then transcribed into text. You can use this feature to streamline user input and improve accessibility.

You can enable the button with a boolean value, or provide a [`SpeechToTextButtonSettings`](https://www.telerik.com/kendo-angular-ui/components/buttons/api/speechtotextbuttonsettings) object for further customization of the SpeechToTextButton behavior.

```html Basic Usage
<kendo-aiprompt [speechToTextButton]="true">
</kendo-aiprompt>
```

```html Customizing the Button
<kendo-aiprompt [speechToTextButton]="{ continuous: true, themeColor: 'primary' }">
</kendo-aiprompt>
```

When the SpeechToTextButton button is clicked, the component will start listening for speech and automatically populate the prompt input with the transcribed text. If any text is already present in the prompt TextArea, the speech input will be appended to the existing content.

The following example demonstrates how to enable voice input for the AIPrompt.

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

## Configuring the Prompt Text Area

You can configure the appearance and behavior of the TextArea in the **Prompt View** by utilizing the [`textAreaSettings`](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/api/aipromptcomponent#textareasettings) property of the AIPrompt component.

This property accepts a [`TextAreaSettings`](https://www.telerik.com/kendo-angular-ui/components/inputs/api/textareasettings) object, allowing you to customize the TextArea appearance, behavior, and accessibility features to best fit your application's requirements.

```html HTML
<kendo-aiprompt [textAreaSettings]="textareaSettings">
</kendo-aiprompt>
```

```ts TypeScript
public textareaSettings: TextAreaSettings = {
    fillMode: 'flat',
    rows: 3,
    placeholder: 'Type your prompt here...',
    cols: 30,
    inputAttributes: { 'aria-label': 'Prompt input' },
};
```

The following example demonstrates how to configure the appearance options, behavior, and accessibility attributes of the prompt TextArea.

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

## Suggested Links

* [API Reference of the `AIPrompt`](https://www.telerik.com/kendo-angular-ui/components/conversational-ui/api/aipromptcomponent)