New to Kendo UI for Angular? Start a free 30-day trial

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.

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

Basics

Use the AIPrompt component as a parent for the Views that you want to configure.
Place the desired Views and their configuration options as children of the AIPrompt component.
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.

Change Theme

Theme

Loading ...

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.
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.
Bind to the AIPrompt promptOutputs property.
Bind to the AIPrompt promptRequest event which will fire each time the user clicks the Generate button.

Use the promptRequest event handler to submit a request to the AI service and to handle the response.

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

Based on the service response, construct a PromptOutput object and add it to the promptOutputs array.

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);
}

Set the Output View as active by setting the activeView property.

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 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.

Change Theme

Theme

Loading ...

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.

Change Theme

Theme

Loading ...

To add predefined commands to the Command View:

Define the Command View by nesting a <kendo-aiprompt-command-view> tag inside the <kendo-aiprompt> element.
Bind to the AIPrompt promptCommands property.
Bind to the AIPrompt commandExecute event which will fire each time the user clicks an executable command.

Use the commandExecute event handler to submit request to the AI service and to handle the response.

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

Based on the service response, construct a PromptOutput object and add it to the promptOutputs array. When an output is generated by executing a prompt command, set the output's commandId property to the id property of the command. This instructs the component which event to fire when the user clicks the output's Retry button—promptRequest or commandExecute. Outputs that have their commandId property set will fire the commandExecute event, and outputs that are missing the property—the 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);
}
```

Set the Output View as active by setting the activeView property.

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 emits the 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.

Change Theme

Theme

Loading ...

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 property of the AIPrompt component. To handle the voting interaction, bind to the outputRatingChange event.

The following example demonstrates the voting functionality.

Change Theme

Theme

Loading ...

Enabling Speech-to-Text

The AIPrompt component allows you to display a SpeechToTextButton in the Prompt View by setting the 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 object for further customization of the SpeechToTextButton behavior.

html
<kendo-aiprompt [speechToTextButton]="true">
</kendo-aiprompt>
html
<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.

Change Theme

Theme

Loading ...

Configuring the Prompt Text Area

You can configure the appearance and behavior of the TextArea in the Prompt View by utilizing the textAreaSettings property of the AIPrompt component.

This property accepts a TextAreaSettings object, allowing you to customize the TextArea appearance, behavior, and accessibility features to best fit your application's requirements.

html
<kendo-aiprompt [textAreaSettings]="textareaSettings">
</kendo-aiprompt>
ts
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.

Change Theme

Theme

Loading ...