ASP.NET Core AIPrompt Overview
The Telerik UI AIPrompt TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI AIPrompt widget.
The AIPrompt is a standalone view component that helps end users write prompts, use prompt suggestions, and execute predefined commands to interact with a trained language model.
When a prompt is submitted, the component triggers an event that contains information about the prompt and the executed command. You can access this information and use it to create a request to an AI service. When the request response from the AI service is received, the AIPrompt component displays the output as a card with options to copy, retry, or rate the output (with like or dislike reactions).
Initializing the AIPrompt
The following example demonstrates how to define the AIPrompt.
@(Html.Kendo().AIPrompt()
.Name("aiprompt")
.PromptSuggestions(new string[] { "Act as [actor] and write [format] about [subject] in [100 words]", "Suggest post about [subject] that will be used in [social media]" })
)
Basic Configuration
The AIPrompt provides options for configuring its views, toolbar items, and appearance options. The following example demonstrates the basic configuration of the AIPrompt.
@(Html.Kendo().AIPrompt()
.Name("aiprompt")
.Events(ev => ev.CommandExecute("onCommandExecute").PromptRequest("onPromptRequest"))
.Views(views =>
{
views.Add().Type(ViewType.Prompt)
.PromptSuggestions(new string[] { "Out of office (contact colleague)", "LinkedIn post for well-being" });
views.Add().Type(ViewType.Output);
views.Add().Type(ViewType.Commands)
.PromptCommands(commands =>
{
commands.Add().Id("1").Text("Extend").Icon("arrows-left-right");
});
})
)
Functionality and Features
- Views—The AIPrompt provides predefined and custom views.
- Templates—The available templates allow you to control the rendering of the views and prompt suggestions layout.
- Integration with Microsoft.Extensions.AI—The AIPrompt supports using the Microsoft.Extensions.AI library to provide seamless integration with various AI models and boost your workflow when connecting the AIPrompt with AI models.
- Events—The component emits a variety of events that allow you to implement custom functionality.
- Accessibility—The AIPrompt is accessible for screen readers, supports WAI-ARIA attributes, and delivers [keyboard shortcuts(slug://keynav_aspnetcore_aiprompt)] for faster navigation.
Next Steps
-
Basic Usage of the AIPrompt HtmlHelper for ASP.NET Core (Demo)
-
Basic Usage of the AIPrompt TagHelper for ASP.NET Core (Demo)