OpenAI Connection for AI AssistView

10 Jul 202612 minutes to read

This section explains how to connect the AI AssistView with OpenAI.

Creating an Application with NuGet Reference

1. Create a Windows Forms app.
2. Add a reference to the Syncfusion.SfAIAssistView.WinForms NuGet package.
3. Import the control namespace Syncfusion.WinForms.AIAssistView in C# code.
4. Initialize the SfAIAssistView control.
5. Add a reference to the Microsoft.SemanticKernel NuGet package.

Creating the OpenAI View Model Class

The following configuration values are required to connect with OpenAI or Azure OpenAI:

• OpenAIApiKey: A string variable where you should add your valid OpenAI API key.
• OpenAIModel: A string variable representing the OpenAI language model you want to use.
• ApiEndpoint: A string variable representing the URL endpoint of the OpenAI API. For Azure OpenAI, this is the endpoint of your Azure OpenAI resource (the default value https://openai.azure.com is the Azure OpenAI endpoint, not the public OpenAI endpoint).

Security Note: Avoid storing API keys in source code in production. Use environment variables, secrets.json, or a secure key vault.

C#

using System;
using System.Collections.ObjectModel;
using System.Collections.Specialized;
using System.ComponentModel;
using System.Drawing;
using System.Threading.Tasks;
using Microsoft.SemanticKernel;
using Microsoft.SemanticKernel.ChatCompletion;
using Syncfusion.WinForms.AIAssistView;

public class ViewModel : INotifyPropertyChanged
{
    AIAssistChatService service;

    private ObservableCollection<object> chats;

    public ObservableCollection<object> Chats
    {
        get
        {
            return this.chats;
        }
        set
        {
            this.chats = value;
            RaisePropertyChanged("Chats");
        }
    }

    private ObservableCollection<string> suggestion;

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

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

    private Author currentUser;
    public Author CurrentUser
    {
        get
        {
            return this.currentUser;
        }
        set
        {
            this.currentUser = value;
            RaisePropertyChanged("CurrentUser");
        }
    }

    public event PropertyChangedEventHandler PropertyChanged;

    public void RaisePropertyChanged(string propName)
    {
        if (PropertyChanged != null)
        {
            PropertyChanged(this, new PropertyChangedEventArgs(propName));
        }
    }

    public ViewModel()
    {
        this.Chats = new ObservableCollection<object>();
        this.Chats.CollectionChanged += Chats_CollectionChanged;
        this.CurrentUser = new Author() { Name = "User" };
        service = new AIAssistChatService();
        service.Initialize();
    }

    private async void Chats_CollectionChanged(object sender, NotifyCollectionChangedEventArgs e)
    {
        var item = e.NewItems?[0] as TextMessage;
        if (item == null) return;
        if (item != null)
        {
            if (item.Author?.Name == CurrentUser?.Name)
            {
                ShowTypingIndicator = true;
                await service.NonStreamingChat(item.Text);
                Chats.Add(new TextMessage
                {
                    Author = new Author { Name = "Bot", AvatarImage = Image.FromFile(@"Asset\AI_Assist.png") },
                    DateTime = DateTime.Now,
                    Text = service.Response
                });
                ShowTypingIndicator = false;
            }
        }
    }

    public class AIAssistChatService
    {
        IChatCompletionService gpt;
        Kernel kernel;

        // Add a valid OpenAI key here. Avoid committing this to source control.
        private const string OpenAIApiKey = "";
        private const string OpenAIModel = "gpt-4o-mini";
        private const string ApiEndpoint = "https://openai.azure.com";

        public async Task Initialize()
        {
            var builder = Kernel.CreateBuilder();
            builder.AddAzureOpenAIChatCompletion(
                deploymentName: OpenAIModel,
                apiKey: OpenAIApiKey,
                endpoint: ApiEndpoint
            );

            kernel = builder.Build();
            gpt = kernel.GetRequiredService<IChatCompletionService>();
        }

        public async Task NonStreamingChat(string line)
        {
            Response = string.Empty;
            var response = await gpt.GetChatMessageContentAsync(line);
            Response = response.ToString();
        }
    }
}

Bind Messages

Create a ViewModel instance in the form. Bind the control’s Messages property to the view-model property.

C#

public partial class Form1 : Form
{      
    ViewModel viewModel;

    public Form1()
    {
        InitializeComponent();
        viewModel = new ViewModel();

        SfAIAssistView sfAIAssistView1 = new SfAIAssistView();
        sfAIAssistView1.Location = new System.Drawing.Point(41, 40);
        sfAIAssistView1.Size = new System.Drawing.Size(818, 457);  
        sfAIAssistView1.Dock= DockStyle.Fill;
        this.Controls.Add(sfAIAssistView1);

        sfAIAssistView1.DataBindings.Add("Messages", viewModel, "Chats", true, DataSourceUpdateMode.OnPropertyChanged);
        sfAIAssistView1.DataBindings.Add("ShowTypingIndicator", viewModel, "ShowTypingIndicator", true, DataSourceUpdateMode.OnPropertyChanged);
        sfAIAssistView1.DataBindings.Add("Suggestions", viewModel, "Suggestion", true, DataSourceUpdateMode.OnPropertyChanged);
        viewModel.CurrentUser = sfAIAssistView1.User;

        sfAIAssistView1.TypingIndicator.Author = new Author() { Name = "Bot", AvatarImage = Image.FromFile(@"Asset\AI_Assist.png") };
        sfAIAssistView1.TypingIndicator.DisplayText = "Typing";
    }
}

NOTE

You can also explore our WinForms AIAssistView example demos.

Troubleshooting

Issue	Possible Cause	Resolution
401 Unauthorized from OpenAI	The API key is empty or invalid.	Verify OpenAIApiKey is set to a valid key from the OpenAI/Azure portal.
Kernel cannot be created	Missing Microsoft.SemanticKernel package reference.	Install the Microsoft.SemanticKernel NuGet package.
No bot response is added to Chats	The submitted message’s Author.Name does not match CurrentUser.Name.	Ensure the user is bound via viewModel.CurrentUser = sfAIAssistView1.User; so the comparison succeeds.
Image.FromFile throws FileNotFoundException	The bot avatar image is missing at the referenced path.	Add AI_Assist.png to the project’s Asset folder.