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.
<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.
-
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.tspublic onPromptRequest(ev: PromptRequestEvent): void { // Execute a call to the LLM API. }
-
Based on the service response, construct a
PromptOutput
object and add it to thepromptOutputs
array.tspublic 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.tspublic 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.
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.
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.tspublic onCommandExecute(ev: CommandExecuteEvent): void { // Execute a call to the LLM API. }
-
Based on the service response, construct a
PromptOutput
object and add it to thepromptOutputs
array. When an output is generated by executing a prompt command, set the output'scommandId
property to theid
property of the command. This instructs the component which event to fire when the user clicks the output's Retry button—promptRequest
orcommandExecute
. Outputs that have theircommandId
property set will fire thecommandExecute
event, and outputs that are missing the property—thepromptRequest
event.tspublic 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.tspublic 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.
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.