We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Syncfusion Feedback

Trusted by the world’s leading companies

Syncfusion Trusted Companies

Overview

The Blazor AI AssistView is a versatile and modern UI component that seamlessly integrates generative AI services into the web applications. It enables users to send prompts, execute commands through a feature-rich toolbar, and display AI-generated responses.

Blazor AI AssistView component


Built-in toolbars

The AI AssistView offers predefined toolbar items, such as copy and edit for prompts and copy, like, and dislike for responses. These toolbars provide quick access to common actions, making interactions more efficient.

Blazor AI AssistView built-in toolbars


Prompt suggestions

The AI AssistView provides options for both initial and on-demand prompt suggestions, helping users start or refine their prompts. Additionally, custom header can be set for suggestions, further enhancing the user experience.

Blazor AI AssistView suggestions


Blazor AI AssistView toolbar

Header toolbar

The Header toolbar enables the addition of custom items to the header area to execute commands such as reload, user settings, and more. It also supports the customization of toolbar items, including icon with text, alignment, and other options.


Custom views

Users can create custom views with or without the default assist view. This flexibility enables users to design personalized layouts with templated content to suit specific requirements.

Blazor AI AssistView custom views


Templates

Supports templates for customizing the appearance of the banner content, prompts, responses, and more. These templates allows users to create a unique and highly personalized AI AssistView that integrates effortlessly into the applications.

Customize the banner content using a banner template to display additional information, such as a welcome note, an introduction to integrated AI services, and more. This banner is positioned at the top of the prompt and response conversation area within the AI AssistView.

Blazor AI AssistView banner template

Blazor AI AssistView prompt response item template

Prompt response item template

Using templates for prompt and response items allows you to customize content, such as displaying the date and time of each entry, and adjusting avatar styling, and more. These templates provide more context for each prompt and response.

Use the footer template to customize the default footer area and manage prompt request actions with a personalized design. This flexibility allows users to create unique footers that meet their specific needs and enhances the overall experience.

Blazor AI AssistView footer template


Built-in themes

The Blazor AI AssistView supports these built-in themes: Tailwind CSS, Bootstrap 5, Bootstrap 4, Bootstrap, Material, Fabric, Fluent, and high contrast. Users can customize these built-in themes or create new themes to achieve their desired look and feel by overriding SASS variables or using our Theme Studio application.


Accessibility

  • Full support for WAI-ARIA accessibility practices for screen readers and assistive devices.
  • UI visual elements such as foreground color, background color, line spacing, text, and images are designed based on WCAG 2.0 standards.
  • Right-to-left (RTL) text direction can be set for users of RTL languages like Hebrew, Arabic, or Persian.

Developer-friendly APIs

The Blazor AI AssistView component offers APIs and templates for customizing its appearance and behavior. With these APIs, developers can create a unique and highly customized AI AssistView that fits seamlessly into their applications.


Blazor AI AssistView Code example

Easily get started with the Blazor AI AssistView using a few simple lines of C# code, as demonstrated below. Also, explore our Blazor AI AssistView Example, which shows you how to include the Blazor AI AssistView component with highlight customization.

Edit in Blazor Playground

@using Syncfusion.Blazor.InteractiveChat

<div class="aiassist-container" style="height: 350px; width: 650px;">
    <SfAIAssistView PromptSuggestions="@promptSuggestions" PromptRequested="@PromptRequest"></SfAIAssistView>
</div>

@code {
    List<string> promptSuggestions = new List<string> { "How do I prioritize my tasks?", "How can I improve my time management skills?" };
    public class AssistModel
    {
        public string Prompt { get; set; }
        public string Response { get; set; }
    }
    private List<AssistModel> prompts = 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!" },
        new AssistModel() { Prompt = "How can I improve my time management skills?", Response = "To improve time management skills, try setting clear goals, using a planner or digital tools, prioritizing tasks, breaking tasks into smaller steps, and minimizing distractions. Regularly review and adjust your approach for better efficiency" }
    };
    private async Task PromptRequest(AssistViewPromptRequestedEventArgs args)
    {
        await Task.Delay(3000);
        var isPromptFound = prompts.Any(prompt => prompt.Prompt == args.Prompt);
        var promptData = prompts.FirstOrDefault(prompt => prompt.Prompt == args.Prompt);
        var defaultResponse = "For real-time prompt processing, connect the AI AssistView component to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.";
        args.Response = isPromptFound ? promptData.Response : defaultResponse;
    }
}

Struggling to decide on the right product?

Our comprehensive competitor comparison of Blazor components will guide you to the perfect choice.

tick-mark 90+ UI components
tick-mark 960+ interactive Blazor demos
tick-mark 2.5M+ downloads
competitive-banner-FT-image

Blazor Components – 90+ UI and DataViz Components

Our Customers Love Us

Having an excellent set of tools and a great support team, Syncfusion® reduces customers’ development time.
Here are some of their experiences.

Rated by users across the globe

Transform your applications today by downloading our free evaluation version
Download Free Trial No credit card required.

Awards

Greatness—it’s one thing to say you have it, but it means more when others recognize it. Syncfusion® is proud to hold the following industry awards.

Up arrow icon