Getting Started with Smart PDF Viewer using Groq AI Service

This guide provides step-by-step instructions for integrating and using Syncfusion’s Smart Smart PDF Viewer with Groq AI services in your Blazor App.

Prerequisites

Before you begin, ensure you have:

Setting Up Groq

  1. Create a Groq Account
    • Visit Groq Cloud Console
    • Sign up for a new account or sign in
    • Complete the verification process
  2. Get Your API Key
    • Navigate to API Keys in the Groq Console
    • Click “Create API Key”

Models

For detailed model specifications and capabilities, visit the Groq Models Documentation.

Getting Started for Groq 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), search and install the following packages

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

Step 1: Create a Custom AI Service

Create a bridge between Syncfusion’s Smart PDF Viewer and our Groq service. This enables the Smart PDF Viewer to use Groq’s AI capabilities through a IChatInferenceService interface.

The IChatInferenceService interface is part of Syncfusion’s infrastructure that allows Smart PDF Viewer to work with different AI providers:

  1. Create a new file named MyCustomService.cs
  2. Add the Syncfusion namespace
  3. Implement the interface as shown below
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 your Blazor application to use the Groq AI service with Syncfusion Smart PDF Viewer. This involves registering necessary services and setting up the dependency injection container.

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

....

builder.Services.AddSyncfusionBlazor();
string groqApiKey = "Your API Key"?? throw new InvalidOperationException("GROQ_API_KEY environment variable is not set.");
string groqModel = "Your Model Name";
var kernelBuilder = Kernel.CreateBuilder().AddOpenAIChatCompletion(
        modelId: groqModel,
        endpoint: new Uri("https://api.groq.com/openai/v1"),
        apiKey: groqApiKey);
Kernel kernel = kernelBuilder.Build();
IChatClient groqChatClient = kernel.GetRequiredService<IChatCompletionService>().AsChatClient();
builder.Services.AddChatClient(groqChatClient);
builder.Services.AddScoped<IChatInferenceService, MyCustomService>(sp =>
{
    return new MyCustomService(groqChatClient);
});

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

NOTE

View sample in GitHub

See also