AIPrompt Views Templates
This article explains the available templates for the views of the AIPrompt for Blazor.
View Template
The ViewTemplate allows you to control the rendering of view's content. You can define it for each of the predefined views:
Using the ViewTemplate to alter the appearance of the Prompt view
<TelerikAIPrompt @ref="@AIPromptRef" @bind-Prompt="@Prompt">
<AIPromptViews>
<AIPromptPromptView ButtonIcon="@SvgIcon.Sparkles">
<ViewTemplate>
<TelerikTextBox @bind-Value="@Prompt" Placeholder="Type your prompt here..." />
</ViewTemplate>
</AIPromptPromptView>
<AIPromptOutputView ButtonIcon="@SvgIcon.Comment">
</AIPromptOutputView>
</AIPromptViews>
</TelerikAIPrompt>
@code {
private TelerikAIPrompt AIPromptRef { get; set; }
private string Prompt { get; set; }
}
Footer Template
The FooterTemplate allows you to control the rendering of the footer within individual views.
Using the FooterTemplate to define a custom button.
<TelerikAIPrompt @ref="@AIPromptRef" @bind-Prompt="@Prompt">
<AIPromptViews>
<AIPromptPromptView ButtonIcon="@SvgIcon.Sparkles">
<FooterTemplate>
<TelerikButton OnClick="@HandlePromptRequest">Generate</TelerikButton>
</FooterTemplate>
</AIPromptPromptView>
<AIPromptOutputView ButtonIcon="@SvgIcon.Comment">
</AIPromptOutputView>
</AIPromptViews>
</TelerikAIPrompt>
@code {
private TelerikAIPrompt AIPromptRef { get; set; }
private string Prompt { get; set; }
private void HandlePromptRequest()
{
// The example uses dummy data intentionally. Replace the hard-coded string with a call to your AI API.
AIPromptRef.AddOutput(
output: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
title: "Generated response",
subtitle: string.Empty,
prompt: Prompt,
commandId: null,
openOutputView: true);
}
}