New to Telerik UI for ASP.NET Core? Start a free 30-day trial

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.

Razor
@(Html.Kendo().AIPrompt()
    .Name("aiprompt")
    .OutputActions(action =>
    {
        action.Copy();
        action.Retry();
        action.Custom().Type(ItemType.Spacer);
        action.Rating();
    })
)
Razor
@addTagHelper *, Kendo.Mvc

<kendo-aiprompt name="aiprompt">
    <output-actions>
        <aiprompt-output-action command="copy" />
        <aiprompt-output-action command="retry" />
        <aiprompt-output-action type="ItemType.Spacer" />
        <aiprompt-output-action command="rating" />
    </output-actions>
</kendo-aiprompt>

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.

Razor
@(Html.Kendo().AIPrompt()
    .Name("aiprompt")
    .OutputActions(action =>
    {
        action.Custom().Icon("heart-outline").Command("like");
        action.Custom().Text("Share").Icon("share").Command("share");
    })
    .Events(ev => ev.OutputAction("onOutputAction"))
)
Razor
@addTagHelper *, Kendo.Mvc

<kendo-aiprompt name="aiprompt" on-output-action="onOutputAction">
    <output-actions>
        <aiprompt-output-action type="ItemType.Button" command="like" icon="heart-outline" />
        <aiprompt-output-action type="ItemType.Button" text="Share" command="share" icon="share" />
    </output-actions>
</kendo-aiprompt>
JS
<script>
    function onOutputAction (e) {
        if (e.command === "like") {
            let output = e.output; // The output text content associated with the action.
            // For example, store the liked output result.
        } else if (e.command === "share") {
            let output = e.output;
            let prompt = e.prompt; // The prompt text that was used to generate the output.
            // For example, redirect the user to a social media.
        }
    }
</script>

Output Actions

Built-in Actions

Custom Actions

See Also