TL;DR: Explore the game-changing features of the Syncfusion Blazor AI AssistView component in the 2024 Volume 3 release! Integrate generative AI effortlessly into your Blazor apps, customize prompt suggestions, and create customized views for enhanced AI-driven user experiences.
We are excited to introduce the new Blazor AI AssistView component in our 2024 Volume 3 release. This modern UI component is designed to effortlessly integrate generative AI services into your applications. It provides an interactive interface for sending prompts, executing commands via a toolbar, and viewing AI-generated responses in a user-friendly layout.
Refer to the following image.
Blazor AI AssistView component
The AI AssistView component offers the flexibility to create custom views, modify layouts, and adapt functionality, making it an essential tool for integrating AI services directly into your Blazor apps.
In this blog, we’ll walk you through the features and capabilities of the Blazor AI AssistView component.
Use cases
The Blazor AI AssistView component is versatile, making it ideal for various apps, including:
Automated customer support: Empower users to resolve issues with real-time, context-aware responses generated by AI.
Content generation: Leverage AI to assist with drafting emails, creating reports, or generating code snippets based on user prompts.
Data querying and insights: Allow users to query their data and receive valuable AI-driven insights, supporting more informed decision-making.
Key features
The key features of the AI AssistView component are as follows:
The AI AssistView includes toolbar options for streamlined interaction, such as copy and edit for prompts, and options like copy, like, and dislike for responses. These predefined tools enhance usability and efficiency.
Refer to the following code example to bind the ItemClicked event to handle custom toolbar actions.
@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.InteractiveChat
<div class="aiassistview-container" style="height: 400px; width: 465px;">
<SfAIAssistView Prompts="@PromptsData">
<AssistViewToolbar ItemClicked="ToolbarItemClicked">
<AssistViewToolbarItem Type="ItemType.Spacer"></AssistViewToolbarItem>
<AssistViewToolbarItem IconCss="e-icons e-refresh"></AssistViewToolbarItem>
</AssistViewToolbar>
<AssistView>
<PromptToolbar ItemClicked="PromptToolbarItemClicked"></PromptToolbar>
<ResponseToolbar ItemClicked="ResponseToolbarItemClicked"></ResponseToolbar>
</AssistView>
</SfAIAssistView>
</div>
@code {
private void ToolbarItemClicked(AssistViewToolbarItemClickedEventArgs args)
{
if (args.Item.IconCss == "e-icons e-refresh")
{
// handling your actions.
}
}
private void PromptToolbarItemClicked(AssistViewToolbarItemClickedEventArgs args)
{
if (args.Item.IconCss == "e-icons e-assist-copy")
{
// override default functionality and handle your actions.
// args.Cancel = true;
}
}
private void ResponseToolbarItemClicked(AssistViewToolbarItemClickedEventArgs args)
{
}
private List<AssistViewPrompt> PromptsData = new List<AssistViewPrompt>()
{
new AssistViewPrompt() {
Prompt = "How do I prioritize my tasks?",
Response = "Prioritize tasks by urgency and impact: tackle high-impact tasks first, delegate when possible, and break large tasks into smaller steps. For more assistance, feel free to ask—I’m here to help!"
}
};
}
Refer to the following image.
Predefined toolbar options in Blazor AI AssistView
This feature offers initial and on-demand suggestions, helping users start or refine their prompts. Customizable header text enhances these suggestions, offering better guidance and improving the user experience.
@using Syncfusion.Blazor.InteractiveChat
<div class="aiassistview-container" style="height: 400px; width: 465px;">
<SfAIAssistView PromptSuggestions="@suggestions" PromptRequested="@PromptRequest" PromptSuggestionsHeader="@promptSuggestionsHeader">
</SfAIAssistView>
</div>
@code {
string promptSuggestionsHeader = "Hello, here are some prompt suggestions:";
List<string> suggestions = new List<string> { "How do I prioritize my tasks?", "How can I improve my time management skills?" };
private async Task PromptRequest(AssistViewPromptRequestedEventArgs args)
{
await Task.Delay(1000);
var isPromptFound = PromptsData.Any(prompt => prompt.Prompt == args.Prompt);
var promptData = PromptsData.FirstOrDefault(prompt => prompt.Prompt == args.Prompt);
var defaultResponse = "For real-time prompt processing, connect the AI AssistView control to your preferred AI service.";
args.Response = isPromptFound ? promptData.Response : defaultResponse;
args.PromptSuggestions = isPromptFound ? promptData.SuggestionData : suggestions;
promptSuggestionsHeader = "Prompt suggestions for self-improvement and growth:";
}
private List<AssistModel> PromptsData = new List<AssistModel>()
{
new AssistModel() {
Prompt = "How do I prioritize my tasks?",
Response = "Prioritize tasks by urgency and impact: tackle high-impact tasks first, delegate when possible, and break large tasks into smaller steps. For more assistance, feel free to ask—I’m here to help!",
SuggestionData = new List<string> { "How do I set daily goals in my work day?", "What is the most important thing to focus on?" }
}
};
public class AssistModel
{
public string Prompt { get; set; }
public string Response { get; set; }
public List<string> SuggestionData { get; set; }
}
}
The Blazor AI AssistView component includes a flexible header toolbar that can be customized to suit your needs. You can add and configure toolbar items for essential actions like reload, user settings, and more, enabling the execution of custom commands directly from the header area.
In the following code example, custom toolbar items are added using the <AssistViewToolbarItem> element, with options like Type, IconCss, and Template for further customization.
With AI AssistView, you can create customized views to suit your app’s needs. Whether incorporating or replacing the default assist view, this feature allows for extensive customization, enabling a unique and tailored user interface.
The following code example customizes the default assist view content and creates a custom view for the response area. This showcases how you can customize the interface to enhance the user experience.
The banner area at the top of the prompt and response sections can be customized using a banner template. This customization allows you to display relevant information, such as welcome messages or an introduction to the integrated AI services.
In the following code example, the banner is customized to welcome users and offers assistance using the <BannerTemplate>, highlighting how you can enhance user interaction with meaningful content.
@using Syncfusion.Blazor.InteractiveChat
<div class="aiassistview-container" style="height: 400px; width: 470px;">
<SfAIAssistView>
<AssistView>
<BannerTemplate>
<div class="banner-content">
<p>Hello, I am your AI Assistant.</p>
<p>How can I help you today?</p>
</div>
</BannerTemplate>
</AssistView>
</SfAIAssistView>
</div>
<style>
.banner-content {
display: flex;
flex-direction: column;
font-family: sans-serif;
font-weight: bold;
color: #00aaff;
height: 134px;
}
.banner-content p {
margin: 0;
font-size: 20px;
}
.banner-content p:first-child {
margin-bottom: 10px;
background: linear-gradient(45deg, #ecfb09 0, #07b36d 20%, #0754b3 50%, #b30747 80%, #b3070d 100%);
background-clip: text;
color: transparent;
font-size: 25px;
}
</style>
Refer to the following image.
Custom banner template feature in Blazor AI AssistView
You can customize the appearance of individual entries using prompt and response item templates. This includes displaying additional information such as date and time and adjusting avatar styling, which adds clarity and provides extra context for each prompt and response.
In the following code example, the prompt and response items are customized to display additional information using the <PromptItemTemplate> and <ResponseItemTemplate> elements.
The AI AssistView component’s footer section can be customized to replace the default assist view footer area. This flexibility allows you to design a footer that aligns with your specific needs, manage prompt request actions, and incorporate a customized design.
Thanks for reading! In this blog, we've seen the features of the new Syncfusion Blazor AI AssistView component rolled out in our 2024 Volume 3 release. These features are also listed on our Release Notes and the What’s New pages. Try out the component and share your feedback as comments on this blog.
Existing Syncfusion users can access the most recent version of Essential Studio® on the License and Downloads page. If you’re new to Syncfusion, we offer a 30-day free trial to test these exciting new features.
Silambarasan Ilango is a product manager of web platform team at Syncfusion. He is passionate about .NET web and front-end JavaScript technologies. He has been active in web development since 2016.
