Blazor AI AssistView Documentation Overview

24 Sep 202611 minutes to read

Introduction to Syncfusion Blazor AI AssistView

The Blazor AI AssistView is a powerful and feature-rich UI component designed for building conversational AI interfaces with high performance and flexibility. It offers a comprehensive set of enterprise-grade capabilities, including prompt response chat views, prompt suggestions, custom views, toolbar items, and file attachments, along with seamless integration with AI services such as Azure OpenAI and Google Gemini. Built for scalability, it enables developers to create responsive, AI-assisted user experiences for chatbot, copilots, and intelligent assistants with ease.

Common use cases

The Blazor AI AssistView is ideal for a wide range of business scenarios:

Use Case Description Key Features
Customer Support Chatbot Answer customer questions with AI-generated responses and suggested prompts Prompt Suggestions, Toolbar Items
In-App Copilots Embed AI assistants that help users complete tasks within business apps Custom Views, Toolbar Items
Document Q&A Assistants Let users attach files and ask questions about their content File Attachments, Templates
Content Generation Workflows Draft, edit, and regenerate AI-generated text and code Prompt-Response Collection, Methods
Voice-Driven Assistants Interact hands-free using voice input and spoken responses Speech-to-Text, Text-to-Speech
Enterprise AI Portals Provide company-wide access to AI services with a consistent UI AI Integrations, Style and Appearance

AI service integrations

The Blazor AI AssistView is UI-focused and connects to any AI service through server-side handlers. The following guided integrations show how to wire the component to popular providers:

Provider Key Benefit Best For
Azure OpenAI Enterprise-grade OpenAI models on Azure Production enterprise applications
Google Gemini Google’s multimodal Gemini models Google Cloud based stacks
Ollama LLM Locally hosted open source models Privacy sensitive, offline scenarios
LiteLLM Unified gateway across multiple providers Multi-provider architectures

Microsoft.Extensions.AI integration

The Integration with Microsoft.Extensions.AI topic shows how to connect the AI AssistView to the IChatClient abstraction so the same UI works with any compatible provider.

Assist view

The core chat experience is built from prompts, responses, and suggestions. The following features configure the conversation interface:

Feature Purpose Key Benefit
Setting prompt text Define the initial prompt text Quick initial engagement
Setting prompt placeholder Guide users on what to ask Intuitive input experience
Prompt-response collection Manage the full conversation history Complete chat context
Adding prompt suggestions Show recommended questions to users Faster task discovery
Update response as markdown Render rich text, lists, and code in responses Professional AI output
Enable scroll to bottom icon Jump to the latest response in long chats Easy long-conversation navigation

Toolbars & actions

The Blazor AI AssistViewprovides built-in toolbars in the header and footer that streamline common chat actions:

Feature Purpose Key Benefit
Configure footer toolbar Set up prompt and response toolbar items Message level actions
Adding header toolbar items Add actions to the component header Global chat controls
Built-in toolbar items Use predefined items such as copy, regenerate, and edit Out-of-box productivity
Toolbar positioning Place toolbars wherever they fit the UI Flexible layouts
Adding custom items Add application-specific actions Tailored experiences

Customization

The Blazor AI AssistView offers extensive customization options for creating professional conversations tailored to any workflow:

Custom Views

Feature Purpose Key Benefit
Adding custom views Create alternate views such as FAQs or knowledge bases Beyond chat experiences
Setting view template Render view content with Blazor templates Fully custom designs

Templates

Feature Purpose Key Benefit
Banner template Display welcome content at the top Branded landing experience
Prompt item template Customize user prompt bubbles Branded user messages
Response item template Customize AI response rendering Rich response presentation
Prompt suggestion item template Restyle suggested prompts Custom suggestion chips
Footer template Replace the default footer area Complete layout control

File Attachments & Dimensions

Feature Purpose Key Benefit
Enabling attachment Let users upload files with their prompts Context-rich conversations
Setting file type Restrict uploads to allowed formats Safe file handling
Setting file size Limit individual file sizes Predictable uploads
Setting maximum count Cap attachments per prompt Appropriate input volume
Setting width and Setting height Control component dimensions Precise layout integration
CssClass Apply custom CSS themes Themed experiences

Speech support

The Blazor AI AssistView enables voice-driven interactions using browser-based speech services:

Feature Purpose Key Benefit
Speech to Text Convert spoken input into prompt text Hands-free prompting
Text to Speech Read responses aloud with configurable voices Accessible, audible output

Accessibility

The Blazor AI AssistView is fully accessible and compliant with Web Content Accessibility Guidelines (WCAG 2.2) standards:

  • WAI-ARIA attributes - Accessible roles and attributes for buttons, toolbars, and inputs
  • Keyboard interaction - Complete component operation via keyboard
    • Tab / Shift+Tab - Move focus forward and backward
    • Enter / Space - Select the focused item
    • Arrow Keys - Navigate between toolbar items
    • Home / End - Jump to the first or last toolbar item
  • Ensuring accessibility - axe-core with Playwright validation guidance
  • Right-to-Left support - RTL rendering for RTL languages

Advanced features

The Blazor AI AssistView includes sophisticated capabilities designed for complex enterprise scenarios:

Feature Purpose Use Case Key Benefit
Methods Programmatically execute prompts and control the view Dynamic, code-driven conversations Automation friendly API
Events Handle lifecycle, prompt, and attachment events Custom workflows and integrations Deep integration points

System requirements

The Blazor AI AssistView works with:

  • Blazor Version: .NET 8.0 or higher
  • Hosting Models: Blazor Server, Blazor WebAssembly, Blazor Web App
  • Browsers: Chrome, Firefox, Safari, Edge (latest versions)
  • Mobile: iOS Safari, Android Chrome

Getting Started:

Popular Features:

Support & Resources