Getting Started with Smart PDF Viewer using Groq AI Service
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:
- System requirements for Blazor components
- A Groq account and API key (see setup instructions below)
- Syncfusion Blazor packages installed and a valid license registered if required
Setting Up Groq
-
Create a Groq account
- Visit Groq Cloud Console
- Sign up for a new account or sign in
- Complete the verification process
-
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:
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:
Step 1: Create a Custom AI Service
Create a bridge between Syncfusion Smart PDF Viewer and the Groq service. This enables Smart PDF Viewer to use Groq’s AI capabilities through the IChatInferenceService
interface.
The IChatInferenceService
interface is part of the Syncfusion infrastructure that allows Smart PDF Viewer to work with different AI providers:
- Create a new file named
MyCustomService.cs
- Add the required Syncfusion and Microsoft namespaces
- 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 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