Output Actions
The output actions are interactive controls shown on every generated output card in the Output view of the AIPrompt. Users can click these actions to copy, retry, rate, or run custom logic against the specific AI response.
You can use the built-in actions or define custom actions to let users modify or further process the respective prompt response.
Built-in Actions
The AIPrompt supports the following built-in output actions:
copy()—Copies the output content to the clipboard. The action is displayed by default.retry()—Regenerates the output using the same prompt and settings. The action is displayed by default.rating()—Shows positive and negative rating buttons so users can provide feedback.
To display a specified output action to the right side of the output card, define a Spacer element before the action.
<div id="aiprompt"></div>
<script>
$("#aiprompt").kendoAIPrompt({
outputActions: ["copy", "retry", "rating"]
});
</script>Custom Actions
Custom actions let you add domain-specific commands, such as Export, Translate, Summarize, and more.
The custom output actions support the following appearance options:
| Option | Description |
|---|---|
comamnd() | Defines the name of the action (a command identifier). |
type() | Sets the command type (a Button or a Spacer). |
icon() | Specifies an icon for the button. |
fillMode() | Defines how the color is applied to the action button. |
rounded() | Determines the border radius of the button. |
themeColor() | Sest what color will be applied to the button. |
text() | Sets the button's text. |
title() | Configures a title to the button's element (a tooltip). |
When a custom action is clicked, the AIPrompt triggers the OutputAction client-side event. You can handle the event, identify the selected action, and implement the desired custom logic.
The example below shows how to define custom output actions and handle their click events.
<div id="aiprompt"></div>
<script>
$("#aiprompt").kendoAIPrompt({
outputActions: [
{ command: "export", text: "Export", icon: "download" },
"spacer",
{ command: "share", text: "Share", icon: "share" }
],
outputAction: function(e) {
if (e.command === "export") {
// Handle export action
// e.output contains the text content directly
console.log("Exporting output ID:", e.outputId);
console.log("Content:", e.output);
console.log("Original prompt:", e.prompt);
} else if (e.command === "share") {
// Handle share action
console.log("Sharing output:", e.output);
}
}
});
</script>