Getting Started with Smart PDF Viewer using DeepSeek AI

17 Jul 20266 minutes to read

This article explains how to integrate DeepSeek AI with the Syncfusion Smart PDF Viewer in a Blazor app.

Prerequisites

Before you begin, ensure you have:

Setting Up DeepSeek

  1. DeepSeek API Access

  2. DeepSeek Models

    For detailed specifications and pricing, visit the DeepSeek Models Documentation.

Getting Started for DeepSeek 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 and install the following packages:

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

Step 2: Create a Custom AI Service

To integrate DeepSeek with Syncfusion Smart PDF Viewer, create a custom implementation of the IChatInferenceService interface, which is the bridge between Syncfusion Smart PDF Viewer and your AI service. Create a new file (e.g., MyCustomService.cs) with the implementation shown below:

NOTE

Ensure the project includes required using directives and valid XML documentation tags in custom code implementations.

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 your Blazor application to use the DeepSeek 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 deepSeekApiKey = "Your API Key" ?? throw new InvalidOperationException("DEEPSEEK_API_KEY environment variable is not set.");
string deploymentName = "Your Modle Name"; // This must match your Azure deployment name
string endpoint = "https://deepseek-resourceres.services.ai.azure.com/"; // Base endpoint only
var kernelBuilder = Kernel.CreateBuilder().AddAzureOpenAIChatCompletion(
        deploymentName: deploymentName,
        endpoint: endpoint,
        apiKey: deepSeekApiKey);
Kernel kernel = kernelBuilder.Build();
IChatClient deepSeekChatClient = kernel.GetRequiredService<IChatCompletionService>().AsChatClient();
builder.Services.AddChatClient(deepSeekChatClient);
builder.Services.AddScoped<IChatInferenceService, MyCustomService>(sp =>
{
    return new MyCustomService(deepSeekChatClient);
});
 
var app = builder.Build();
....

NOTE

  • View sample in GitHub
  • Running the DeepSeek service may lead to slower response times due to system resource usage. To accommodate this, configure the Syncfusion Smart PDF Viewer to disable timeout for AI assist view operations by setting the timeout to 0. Learn more

See also