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.
To display the generated AI response in the InlineAIPrompt, set the promptOutput property to an 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 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 property.
<kendo-inlineaiprompt
[promptOutput]="promptOutput"
[promptValue]="userPrompt">
</kendo-inlineaiprompt>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 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.
To configure the commands, set the promptCommands property to an array of InlineAIPromptCommand objects.
Once you click a command button, the commandExecute event fires. The event provides the InlineAIPromptCommand as an argument, which contains information about the clicked command. This lets you handle the command execution in your application logic.
<kendo-inlineaiprompt
[promptCommands]="promptCommands"
(commandExecute)="onCommandExecute($event)">
</kendo-inlineaiprompt>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.
To configure the actions available for the output, use the outputActions property. The property accepts an array of InlineAIPromptOutputAction objects. Each object defines a specific action.
<kendo-inlineaiprompt
[outputActions]="outputActions"
(outputActionClick)="onOutputActionClick($event)"
></kendo-inlineaiprompt>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 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.
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 property to an InlineAIPromptPopupSettings object.
<kendo-inlineaiprompt [popupSettings]="popupSettings"></kendo-inlineaiprompt>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 property to true or to a SpeechToTextButtonSettings object.
The following example shows the speech to text feature of the InlineAIPrompt component.