Syncfusion Blazor AI AssistView

Build conversational AI interfaces with the Syncfusion Blazor AI AssistView component. This skill provides complete guidance for creating interactive chat applications, AI assistant UIs, and prompt-response systems in Blazor Server, WebAssembly, and Web App projects.

Component Overview

The SfAIAssistView component is a specialized UI control for building AI-powered chat applications. It manages the presentation and interaction model for prompt-response conversations with built-in support for:

Prompt Management: Input text, suggestions, placeholder text
Response Handling: Async processing, markdown rendering, streaming support
Customization: Avatar icons, styling, theme integration
UX Features: Scroll-to-bottom indicator, conversation history
Event Integration: PromptRequested events for AI service callbacks

Navigation Guide

Getting Started

📄 Read: references/getting-started.md

Installation and NuGet package setup
Basic component structure and initialization
PromptRequested event handler implementation
Minimal working example with async responses

Prompt Configuration

📄 Read: references/prompt-configuration.md

Setting initial prompt text
Configuring prompt placeholder text
Managing prompt-response collections
Handling prompt events asynchronously

Prompt Suggestions

📄 Read: references/prompt-suggestions.md

Adding suggestion lists for user guidance
Customizing suggestion headers
Building suggestion-response mappings
User interaction patterns with suggestions

Customization & Icons

📄 Read: references/customization-styling.md

Customizing user avatar with PromptIconCss
Customizing AI avatar with ResponseIconCss
Applying theme-specific icons
CSS class and icon integration

Advanced Features

📄 Read: references/advanced-features.md

Markdown rendering in AI responses
Scroll-to-bottom navigation (EnableScrollToBottom)
Managing conversation history with Prompts collection
Common patterns and use cases

AI Service Integration

📄 Read: references/ai-service-integration.md

OpenAI API integration (non-streaming and streaming)
Azure OpenAI deployment
Local Ollama LLM hosting
Custom backend patterns
Error handling and rate limiting strategies

Attachments

📄 Read: references/attachments.md

Enabling file attachments
Configuring attachment settings (file types, size limits)
Handling attachment events (upload, click, remove)
Server-side upload implementation
Security and validation best practices

Multi-View Support

📄 Read: references/multi-view-support.md

Creating multiple specialized AI views
Active view management and switching
View-specific configuration
Separate conversation histories per view
Role-based and workspace-based views

Toolbars

📄 Read: references/toolbars.md

Prompt toolbar customization
Response toolbar actions (copy, like, regenerate)
Footer toolbar configuration
Custom toolbar items and templates
Handling toolbar events

Templates

📄 Read: references/templates.md

BannerTemplate for initial/empty state
PromptItemTemplate for custom prompt rendering
ResponseItemTemplate for custom response rendering
PromptSuggestionItemTemplate for custom suggestions
FooterTemplate and ViewTemplate customization
Template contexts and available properties

Streaming Responses

📄 Read: references/streaming.md

Enabling streaming mode
UpdateResponseAsync for progressive updates
Real-time response rendering
Integration with OpenAI, Azure, and Ollama streaming APIs
Stop responding functionality
Performance optimization

Methods & Programmatic API

📄 Read: references/methods-api.md

ExecutePromptAsync for automated prompts
UpdateResponseAsync for streaming updates
RefreshUIAsync for manual UI refresh
ScrollToBottomAsync for scroll control
Automated workflows and batch processing

Quick Start

@using Syncfusion.Blazor.InteractiveChat

<div style="height: 400px; width: 600px;">
    <SfAIAssistView 
        Prompt="What is Blazor?" 
        PromptRequested="@OnPromptRequested">
    </SfAIAssistView>
</div>

@code {
    private async Task OnPromptRequested(AssistViewPromptRequestedEventArgs args)
    {
        // Add delay to simulate AI processing
        await Task.Delay(1000);
        
        // Connect to your AI service here (OpenAI, Azure, etc.)
        var response = await GetAIResponse(args.Prompt);
        args.Response = response;
    }
    
    private async Task<string> GetAIResponse(string prompt)
    {
        // Call your AI service API
        // For testing: return a simple response
        return $"<div>Processing your prompt: {prompt}</div>";
    }
}

Common Patterns

Pattern 1: Pre-Initialized Conversation

Load the component with existing conversation history:

<SfAIAssistView 
    Prompts="@conversationHistory" 
    PromptRequested="@OnPromptRequested">
</SfAIAssistView>

@code {
    private List<AssistViewPrompt> conversationHistory = new()
    {
        new AssistViewPrompt { 
            Prompt = "What is C#?", 
            Response = "<div>C# is a modern object-oriented programming language...</div>" 
        }
    };
}

Pattern 2: Guided Suggestions

Use suggestions to help users refine their prompts:

<SfAIAssistView 
    PromptSuggestions="@suggestions"
    PromptSuggestionsHeader="Try asking about:"
    PromptRequested="@OnPromptRequested">
</SfAIAssistView>

@code {
    private List<string> suggestions = new()
    {
        "How does dependency injection work?",
        "Explain async/await patterns",
        "What are Blazor components?"
    };
}

Pattern 3: Custom Avatars

Personalize user and AI identities with custom icons:

<SfAIAssistView 
    PromptIconCss="e-icons e-user"
    ResponseIconCss="e-icons e-bullet-2"
    PromptRequested="@OnPromptRequested">
</SfAIAssistView>

Key Props

Property	Type	Purpose
`Prompt`	string	Initial prompt text to display
`PromptPlaceholder`	string	Placeholder text in input field (default: "Type prompt for assistance...")
`PromptSuggestions`	List<string>	List of suggested prompts for user guidance
`PromptSuggestionsHeader`	string	Header text above suggestions
`Prompts`	List<AssistViewPrompt>	Collection of prompt-response pairs (conversation history)
`PromptIconCss`	string	CSS classes for user avatar icon
`ResponseIconCss`	string	CSS classes for AI avatar icon (default: "e-assistview-icon")
`EnableScrollToBottom`	bool	Show scroll-to-bottom indicator (default: true)
`EnableStreaming`	bool	Enable streaming mode for progressive responses
`AttachmentSettings`	AssistViewAttachmentSettings	File attachment configuration
`ActiveView`	int	Index of currently active view (for multi-view)
`ShowHeader`	bool	Show/hide component header (default: true)
`Width`	string	Component width (default: "100%")
`Height`	string	Component height (default: "100%")
`CssClass`	string	Custom CSS classes for styling
`EnableRtl`	bool	Enable right-to-left layout (default: false)
`ID`	string	Sets the id attribute for the component

Common Use Cases

Customer Support Chatbot - Combine with knowledge base to answer FAQs
Coding Assistant - Real-time code suggestions and explanations
Content Generator - Interactive writing and editing assistant
Learning Interface - Q&A system for educational content
API Documentation - Interactive API helper with examples

syncfusion-blazor-ai-assistview