Syncfusion Winforms AI Assistview

Implementing AI AssistView

The Syncfusion Windows Forms AI AssistView (SfAIAssistView) is a sophisticated conversational interface control for building AI-powered chat applications with support for suggestions, typing indicators, custom views, and seamless OpenAI/ChatGPT integration.

When to Use This Skill

Use this skill when the user needs to:

• Build AI-powered chat interfaces in Windows Forms applications
• Integrate OpenAI, ChatGPT, or Azure OpenAI services into desktop apps
• Create conversational UI with message bubbles and chat history
• Display AI-driven response suggestions for quick user responses
• Show typing indicators during async AI response generation
• Customize chat message appearance with custom BotView and UserView
• Handle user prompts with validation and custom actions
• Build intelligent assistants with banner customization
• Implement real-time chat experiences with data binding

Component Overview

Key Features:

• Suggestions: Display selectable response suggestions to expedite conversation flow
• Typing Indicator: Show loading animation during AI processing
• Banner Customization: Customizable header with welcome messages and AI service info
• Custom Views: Create custom BotView and UserView for message presentation
• Theme Support: Automatic light/dark theme adaptation
• OpenAI Integration: Seamless connection with OpenAI services via Semantic Kernel
• Events: PromptRequest event for input validation and custom actions
• Data Binding: Full support for ObservableCollection and INotifyPropertyChanged

Documentation and Navigation Guide

Getting Started

📄 Read: references/getting-started.md

• Assembly deployment and NuGet packages
• Creating Windows Forms project with SfAIAssistView
• Adding control via Designer and Code
• Creating ViewModel with message collection
• Message binding and Author configuration
• Basic chat implementation

Suggestions

📄 Read: references/suggestions.md

• Displaying AI-driven suggestions
• Binding suggestions to ViewModel
• Quick response scenarios
• Dynamic suggestion updates

Typing Indicator

📄 Read: references/typing-indicator.md

• ShowTypingIndicator property
• Async communication feedback
• Customizing indicator appearance
• Author and DisplayText configuration

Customization

📄 Read: references/customization.md

• BannerView customization with SetBannerView
• Creating custom BotView with SetBotView
• Creating custom UserView with SetUserView
• Interactive buttons in bot responses
• Custom styling and layouts

Events

📄 Read: references/events.md

• PromptRequest event handling
• Input validation
• Custom action triggers
• Handled property usage

OpenAI Integration

📄 Read: references/openai-integration.md

• Connecting to OpenAI/ChatGPT
• Microsoft Semantic Kernel setup
• API credentials configuration
• NonStreamingChat implementation
• Async response handling
• Complete working example

Quick Start Example

Basic Chat Interface

using Syncfusion.WinForms.AIAssistView;
using System.ComponentModel;
using System.Collections.ObjectModel;

namespace AIAssistViewDemo
{
    public partial class Form1 : Form
    {
        ViewModel viewModel;
        
        public Form1()
        {
            InitializeComponent();
            viewModel = new ViewModel();
            
            // Create AI AssistView
            SfAIAssistView sfAIAssistView1 = new SfAIAssistView();
            sfAIAssistView1.Dock = DockStyle.Fill;
            this.Controls.Add(sfAIAssistView1);
            
            // Bind messages
            sfAIAssistView1.DataBindings.Add("Messages", viewModel, "Chats", 
                true, DataSourceUpdateMode.OnPropertyChanged);
        }
    }
    
    // ViewModel
    public class ViewModel : INotifyPropertyChanged
    {
        private ObservableCollection<object> chats;
        private Author currentUser;
        
        public ViewModel()
        {
            this.Chats = new ObservableCollection<object>();
            this.CurrentUser = new Author { Name = "John" };
            this.GenerateMessages();
        }
        
        private async void GenerateMessages()
        {
            // User message
            this.Chats.Add(new TextMessage 
            { 
                Author = CurrentUser, 
                Text = "What is Windows Forms?" 
            });
            
            await Task.Delay(1000);
            
            // Bot response
            this.Chats.Add(new TextMessage 
            { 
                Author = new Author { Name = "Bot" }, 
                Text = "Windows Forms is a GUI framework for building Windows desktop applications." 
            });
        }
        
        public ObservableCollection<object> Chats
        {
            get => this.chats;
            set
            {
                this.chats = value;
                RaisePropertyChanged("Chats");
            }
        }
        
        public Author CurrentUser
        {
            get => this.currentUser;
            set
            {
                this.currentUser = value;
                RaisePropertyChanged("CurrentUser");
            }
        }
        
        public event PropertyChangedEventHandler PropertyChanged;
        
        public void RaisePropertyChanged(string propName)
        {
            PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propName));
        }
    }
}

Common Patterns

Pattern 1: Chat with Suggestions

// In ViewModel
private IEnumerable<string> suggestion;

public IEnumerable<string> Suggestion
{
    get => this.suggestion;
    set
    {
        this.suggestion = value;
        RaisePropertyChanged("Suggestion");
    }
}

// Set suggestions after bot response
Suggestion = new ObservableCollection<string> 
{ 
    "Tell me more", 
    "What are alternatives?" 
};

// In Form
sfAIAssistView1.DataBindings.Add("Suggestions", viewModel, "Suggestion", 
    true, DataSourceUpdateMode.OnPropertyChanged);

Pattern 2: Typing Indicator During AI Processing

// In ViewModel
private bool showTypingIndicator;

public bool ShowTypingIndicator
{
    get => this.showTypingIndicator;
    set
    {
        this.showTypingIndicator = value;
        RaisePropertyChanged("ShowTypingIndicator");
    }
}

// Usage
ShowTypingIndicator = true;
var response = await GetAIResponse(userMessage);
Chats.Add(new TextMessage { Author = botAuthor, Text = response });
ShowTypingIndicator = false;

// In Form
sfAIAssistView1.DataBindings.Add("ShowTypingIndicator", viewModel, 
    "ShowTypingIndicator", true, DataSourceUpdateMode.OnPropertyChanged);
    
sfAIAssistView1.TypingIndicator.Author = new Author 
{ 
    Name = "Bot", 
    AvatarImage = Image.FromFile(@"Assets\bot.png") 
};
sfAIAssistView1.TypingIndicator.DisplayText = "Typing";

Pattern 3: Custom Banner

BannerStyle customStyle = new BannerStyle
{
    TitleFont = new Font("Segoe UI", 14F, FontStyle.Bold),
    SubTitleFont = new Font("Segoe UI", 12F, FontStyle.Italic),
    ImageSize = AvatarSize.Medium,
    SubTitleColor = Color.Gray,
    TitleColor = Color.DarkBlue
};

string title = "AI Assistant";
string subTitle = "Powered by OpenAI";
sfAIAssistView1.SetBannerView(title, subTitle, 
    Image.FromFile(@"Assets\ai-icon.png"), customStyle);

Pattern 4: Prompt Validation

sfAIAssistView1.PromptRequest += (sender, e) =>
{
    var message = e.Message as TextMessage;
    if (message == null) return;
    
    // Validate input
    if (string.IsNullOrWhiteSpace(message.Text))
    {
        e.Handled = true; // Prevent adding to messages
        MessageBox.Show("Please enter a message.");
        return;
    }
    
    // Custom processing
    LogUserInput(message.Text);
};

Key Properties and Methods

Common Use Cases

Use Case 1: Customer Support Chatbot

Build an AI-powered customer support interface with suggestion chips for common questions and typing indicators during response generation.

Use Case 2: Virtual Assistant

Create an intelligent desktop assistant with custom branded banner, personalized bot responses, and OpenAI integration for natural conversations.

Use Case 3: Interactive Documentation

Implement a conversational documentation browser where users ask questions about software features and receive AI-generated explanations.

Use Case 4: Training Simulator

Build interactive training applications where AI guides users through procedures with step-by-step conversational instructions.

Installation

Install-Package Syncfusion.SfAIAssistView.WinForms

For OpenAI integration:

Install-Package Microsoft.SemanticKernel

Troubleshooting

Messages not displaying:

• Verify data binding is set correctly
• Ensure ObservableCollection is used (not List)
• Check that RaisePropertyChanged is called on collection updates

Typing indicator not showing:

• Set ShowTypingIndicator = true before async operation
• Configure TypingIndicator.Author property
• Ensure binding is established for ShowTypingIndicator

Suggestions not appearing:

• Bind Suggestions property to ViewModel
• Use IEnumerable type
• Update suggestions after bot responses

OpenAI connection issues:

• Verify API key is valid and not expired
• Check API endpoint URL is correct
• Ensure Microsoft.SemanticKernel NuGet is installed
• Confirm network connectivity