Integration of Microsoft.Extensions.AI with the Blazor AI AssistView component

14 May 20253 minutes to read

The Syncfusion AI AssistView component supports integration with the Microsoft.Extensions.AI framework, enabling seamless communication with various large language models (LLMs) such as Azure OpenAI, OpenAI, and more.

The Microsoft.Extensions.AI simplifies integration with different models, requiring minimal configuration changes depending on the provider. The following example demonstrates integration using Azure OpenAI.

NOTE

The Microsoft AI extension libraries are currently in preview, and breaking changes may occur. Ensure that you use compatible versions to avoid integration issues.

Getting started with AI AssistView

Before integrating AI AssistView with Microsoft.Extensions.AI, ensure the SfAIAssistView component is rendered by following the appropriate project guideline:

Prerequisites for Microsoft.Extensions.AI integration

To add the required NuGet packages, use the NuGet package manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution) search and install the following:

  • Azure.AI.OpenAI
  • Azure.Identity
  • Microsoft.Extensions.AI
  • Microsoft.Extensions.AI.OpenAI
  • Markdig

Alternatively, run the following commands in your terminal:

dotnet add package Azure.AI.OpenAI
dotnet add package Azure.Identity
dotnet add package Microsoft.Extensions.AI
dotnet add package Microsoft.Extensions.AI.OpenAI
dotnet add package Markdig

Configure services in Program.cs

Register the Azure OpenAI client and Syncfusion AI Assistview component within the Blazor application.

using Syncfusion.Blazor;
using Microsoft.Extensions.AI;
using Azure.AI.OpenAI;
using Azure;

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

// Set Azure OpenAI configuration
var endpoint = "https://azure-testresource.openai.azure.com";
var apiKey = "YOUR_API_KEY"; // Replace with your actual key;
var deploymentName = "gpt-4o-mini";

var credential = new AzureKeyCredential(apiKey);

// Register Azure OpenAI chat client
builder.Services.AddChatClient(
    new AzureOpenAIClient(new Uri(endpoint), credential)
        .GetChatClient(deploymentName)
        .AsIChatClient()
);

// Register Syncfusion Blazor components
builder.Services.AddSyncfusionBlazor();

var app = builder.Build();

AI AssistView with IChatClient

The Syncfusion AI AssistView component is built to seamlessly integrate with external AI services. When the IChatClient is registered via Microsoft.Extensions.AI, the component automatically uses it to handle user prompts without any additional configuration.

In the following example, the user input is processed using the injected IChatClient. The AI model’s response is returned in Markdown format which is converted to HTML using the Markdig library before rendering in the AI AssistView component.

@rendermode InteractiveServer

@using Syncfusion.Blazor.InteractiveChat
@using Microsoft.Extensions.AI
@using Markdig;
@using System.Text.RegularExpressions;
@inject IChatClient ChatClient

<div style="height: 350px; width: 650px;">
    <SfAIAssistView PromptRequested="@OnPromptRequested"></SfAIAssistView>
</div>

@code {
    
    private async Task OnPromptRequested(AssistViewPromptRequestedEventArgs args)
    {
        // Send the user’s prompt to the AI model
        var chatResponse = await ChatClient.GetResponseAsync(args.Prompt, new ChatOptions());
        // Convert markdown to HTML
        var htmlContent = Markdown.ToHtml(chatResponse.Text);
        // Clean up extra whitespace
        htmlContent = Regex.Replace(htmlContent, @"\s+", " ").Trim();
        // Set the cleaned HTML as the response
        args.Response = htmlContent;
    }
}

AI AssistView with IChatClient