Getting Started with Smart PDF Viewer using Groq AI Service

17 Jul 20266 minutes to read

This article provides step-by-step instructions for integrating and using Syncfusion Smart PDF Viewer with the Groq AI service in a 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, see Add Smart PDF Viewer to your Blazor pages to render the component on a page.

Step 1: Install the required NuGet packages

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.OpenAI

Step 2: Create a Custom AI Service

Create a bridge between Syncfusion Smart PDF Viewer and the Groq service. The IChatInferenceService interface is the Syncfusion abstraction that allows Smart PDF Viewer to work with different AI providers. Create a new file (e.g., MyCustomService.cs) that imports the Syncfusion.Blazor.AI and Microsoft.Extensions.AI namespaces, then 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 3: Configure the Blazor App

Configure the Blazor app to use the Groq AI service with Syncfusion Smart PDF Viewer. This involves registering the 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