Getting Started with Smart PDF Viewer using Gemini AI Service

This article provides step-by-step instructions for integrating and using the Syncfusion Blazor Smart PDF Viewer with Gemini AI services in a Blazor app.

Prerequisites

Before you begin, ensure you have:

Models

For a complete list of models and their capabilities, see the Gemini models documentation.

Getting Started for Gemini AI with Smart PDF Viewer

After completing this setup, you can:

  1. Add Smart PDF Viewer to your Blazor pages

Install the following NuGet packages to your project:

Open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install the following packages:

  1. Microsoft.Extensions.AI.
  2. Microsoft.SemanticKernel.
  3. Microsoft.SemanticKernel.Connectors.Google.

Step 1: Create a Custom AI Service

The Syncfusion Smart PDF Viewer is designed to work with different AI backends through the IChatInferenceService interface. This section explains how to create a custom implementation that connects the Smart PDF Viewer to the Gemini AI service.

Understanding the Interface

The IChatInferenceService interface acts as the bridge between the Syncfusion Blazor Smart PDF Viewer and AI services.

  1. Create a new file named MyCustomService.cs.
  2. Add the following implementation:
using Syncfusion.Blazor.AI;
using Microsoft.Extensions.AI;

public class MyCustomService : IChatInferenceService
{
     private IChatClient _chatClient;

     public MyCustomService(IChatClient client)
     {
         this._chatClient = client ?? throw new ArgumentNullException(nameof(client));
     }

     /// <summary>
     /// Sends the chat parameters to the AI client and returns the response.
     /// Also checks and updates token usage.
     /// </summary>
     /// <param name="options">Chat parameters including messages and settings.</param>
     /// <returns>AI-generated response text.</returns
     public async Task<string> GenerateResponseAsync(ChatParameters options)
     {
         ChatOptions completionRequest = new ChatOptions
         {
             Temperature = options.Temperature ?? 0.5f,
             TopP = options.TopP ?? 1.0f,
             MaxOutputTokens = options.MaxTokens ?? 2000,
             FrequencyPenalty = options.FrequencyPenalty ?? 0.0f,
             PresencePenalty = options.PresencePenalty ?? 0.0f,
             StopSequences = options.StopSequences
         };
         try
         {
             ChatResponse completion = await _chatClient.GetResponseAsync(options.Messages[0].Text, completionRequest);
             string rawResponse = completion.Text.ToString();
             if (rawResponse.Contains("```html") || rawResponse.Contains("```"))
             {
                 rawResponse = rawResponse.Replace("```html", "").Replace("```", "").Trim();
             }
             return rawResponse;
         }
         catch (Exception ex)
         {
             throw new ApplicationException("Error generating AI response", ex);
         }
     }

}

Step 2: Configure the Blazor App

Configure the Blazor app to use the Gemini AI service with the Syncfusion Blazor Smart PDF Viewer. This involves registering the necessary services and setting up dependency injection.

using Syncfusion.Blazor.AI;
using Microsoft.Extensions.AI;
using Microsoft.SemanticKernel;
using Microsoft.SemanticKernel.ChatCompletion;
var builder = WebApplication.CreateBuilder(args);

....

builder.Services.AddSyncfusionBlazor();
string geminiApiKey = "Your API Key" ?? throw new InvalidOperationException("GEMINI_API_KEY environment variable is not set.");
string geminiAiModel = "Your Model Name";
#pragma warning disable SKEXP0070
var kernelBuilder = Kernel.CreateBuilder().AddGoogleAIGeminiChatCompletion(geminiAiModel, geminiApiKey);
Kernel kernel = kernelBuilder.Build();
#pragma warning disable SKEXP0001
IChatClient geminiChatClient = kernel.GetRequiredService<IChatCompletionService>().AsChatClient();
builder.Services.AddChatClient(geminiChatClient);
builder.Services.AddScoped<IChatInferenceService, MyCustomService>(sp =>
{
    return new MyCustomService(geminiChatClient);
});

var app = builder.Build();
....

NOTE

View sample in GitHub

See also