# Angular InlineAIPrompt Configuration

The InlineAIPrompt component provides a focused, popup-based interface for AI interactions. The component helps you integrate Large Language Model (LLM) technology to your application. This adds artificial intelligence (AI) features directly inline with your content.

This article shows the key configuration options for the InlineAIPrompt component. Learn how to set the prompt output from an AI service, configure the appearance, and set predefined prompt actions and commands.

## Setting the Prompt Output

The prompt output is the response that the AI model creates based on what the user types.

> The example uses a Telerik-hosted AI service for demonstration purposes only. For production applications, you should implement your own AI service that understands your specific domain, data, and business requirements.

The following example shows how to set the prompt output and prompt value in the InlineAIPrompt component.

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

To display the generated AI response in the InlineAIPrompt, set the [`promptOutput`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/inlineaipromptcomponent#promptoutput) property to an [`InlineAIPromptOutput`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/inlineaipromptoutput) object.
The `InlineAIPromptOutput` object includes the following properties. Make sure to prepare and return the same format from your AI service:

* `id`—A unique identifier for the prompt output.
* `prompt`—The text of the prompt that the user asked to generate the output.
* `output`—The generated text content based on the prompt input.
* `commandID`—An optional identifier for the command that triggered the prompt generation, if applicable. Refer to [Prompt Commands](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/inline-aiprompt/configuration#adding-prompt-commands) section.

By default, the prompt disappears once you send it to the AI service. To keep the text in the input area, set the [`promptValue`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/inlineaipromptcomponent#promptvalue) property.

```html app.component.html
<kendo-inlineaiprompt
    [promptOutput]="promptOutput"
    [promptValue]="userPrompt">
</kendo-inlineaiprompt>
```

```ts app.component.ts
public userPrompt: string = 'Can you help me with the transcript?';

public promptOutput: InlineAIPromptOutput = {
    id: 1,
    prompt: this.userPrompt,
    output: 'Sure! I can help you with the transcript. Please provide the details or the content you need assistance with.'
};
```

## Adding Prompt Commands

Prompt commands are predefined actions that you can apply to the content for which the InlineAIPrompt displays. They let users quickly modify, enhance, or get more insights about certain information. Refer to the [Grid AI Column Assistant](https://www.telerik.com/kendo-angular-ui-develop/components/grid/smart-grid/ai-column-assistant) article.

> The example uses a Telerik-hosted AI service for demonstration purposes only. For production applications, you need to implement your own AI service that handles your specific domain, data, and business requirements.

The following example shows how to set the prompt commands in the InlineAIPrompt component and quickly improve the writing, make it shorter, or fix grammar issues.

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

To configure the commands, set the [`promptCommands`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/inlineaipromptcomponent#promptcommands) property to an array of [`InlineAIPromptCommand`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/inlineaipromptcommand) objects.

Once you click a command button, the [`commandExecute`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/inlineaipromptcomponent#commandexecute) event fires. The event provides the [`InlineAIPromptCommand`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/inlineaipromptcommand) as an argument, which contains information about the clicked command. This lets you handle the command execution in your application logic.

```html app.component.html
<kendo-inlineaiprompt
    [promptCommands]="promptCommands"
    (commandExecute)="onCommandExecute($event)">
</kendo-inlineaiprompt>
```

```ts app.component.ts
public promptCommands: InlineAIPromptCommand[] = [
    { id: 'fix-grammar', text: 'Fix Grammar', svgIcon: pencilIcon },
    { id: 'explain', text: 'Explain', svgIcon: infoCircleIcon },
    {
        id: 'rewrite',
        text: 'Rewrite',
        svgIcon: rotateIcon,
        children: [
            { id: 'formal', text: 'Formal' },
            { id: 'casual', text: 'Casual' },
            { id: 'creative', text: 'Creative' },
            { id: 'shorter', text: 'Shorter' },
            { id: 'longer', text: 'Longer' }
        ]
    }
];
public onCommandExecute(command: InlineAIPromptCommand): void {
    console.log('Command executed:', command);
}
```

## Adding Prompt Actions

You can perform specific actions directly to the prompt output, like copy, retry, or any other custom action.

The following example shows how to configure the actions available for the prompt output in the InlineAIPrompt component.

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

To configure the actions available for the output, use the [`outputActions`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/inlineaipromptcomponent#outputactions) property. The property accepts an array of [`InlineAIPromptOutputAction`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/inlineaipromptoutputaction) objects. Each object defines a specific action.

```html app.component.html
<kendo-inlineaiprompt
    [outputActions]="outputActions"
    (outputActionClick)="onOutputActionClick($event)"
></kendo-inlineaiprompt>
```

```ts app.component.ts
public outputActions: InlineAIPromptOutputAction[] = [
    { name: 'copy' },
    { name: 'discard' },
    { name: 'retry' },
    { name: 'custom', text: 'Custom Action' }
];
public onOutputActionClick(event: InlineAIPromptOutputActionClickEvent): void {
    console.log('Action clicked:', event);
}
```

The InlineAIPrompt provides three built-in actions - **copy**, **discard**, and **retry**. You can define them in the order you want by specifying their `name` property as `copy`, `discard`, or `retry`.

When you click any of the actions, the [`outputActionClick`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/inlineaipromptcomponent#outputactionclick) event fires. This event provides information about the action and what output was applied for. This lets you handle the action in your application logic, such as copying the output to the clipboard or retrying the prompt generation.

## Configuring the Popup Appearance

The component uses a popup to display the prompt and its output. This provides flexibility in terms of positioning and styling of the component.

The following example shows some of the configuration options of the popup for the InlineAIPrompt component.

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

You can customize how and where the InlineAIPrompt component appears, the animation effect and its duration, and where the popup attaches in the DOM. Set the [`popupSettings`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/inlineaipromptcomponent#popupsettings) property to an [`InlineAIPromptPopupSettings`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/inlineaipromptpopupsettings) object.

```html app.component.html
<kendo-inlineaiprompt [popupSettings]="popupSettings"></kendo-inlineaiprompt>
```

```ts app.component.ts
public popupSettings: InlineAIPromptPopupSettings = {
    collision: { horizontal: 'flip', vertical: 'flip' },
    anchorAlign: { horizontal: 'left', vertical: 'top' },
    popupAlign: { horizontal: 'left', vertical: 'top' },
    popupClass: 'custom-popup-class',
};
```

## Enabling Speech-to-Text

The InlineAIPrompt component supports speech-to-text functionality, allowing users to input prompts using their voice. This feature makes the component more accessible and gives users a more natural way to interact with it.

To turn on the speech-to-text functionality, set the [`enableSpeechToText`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/inlineaipromptcomponent#enablespeechtotext) property to `true` or to a [`SpeechToTextButtonSettings`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/speechtotextbuttonsettings) object.

The following example shows the speech to text feature of the InlineAIPrompt component.

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

## Suggested Links

* [InlineAIPrompt Events](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/inline-aiprompt/events)
* [InlineAIPrompt Templates](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/inline-aiprompt/templates)
* [InlineAIPrompt Streaming](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/inline-aiprompt/streaming)
* [API Reference of the Conversational UI](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api)
* [API Reference of the `InlineAIPromptComponent`](https://www.telerik.com/kendo-angular-ui-develop/components/conversational-ui/api/inlineaipromptcomponent)