Syncfusion Blazor Smart Pdf Viewer

Syncfusion Blazor Smart PDF Viewer – UI Sample Generator

NuGet: Syncfusion.Blazor.SfSmartPdfViewer + Syncfusion.Blazor.Themes Namespace: Syncfusion.Blazor.SmartPdfViewer

Generate C# Code for the User's Project (default)

Trigger keywords: "how to", "add smart pdfviewer", "code sample", "show me", "example", "snippet", "integrate", "component", "create sample", "document summarization", "smart redaction", "smart fill".

Purpose: Generate minimal, copy-pasteable C# and Razor code that the user can integrate directly into their Blazor project.

Workflow:

⚠️ CRITICAL — Feature Support Policy (STRICT MODE):

FUNDAMENTAL RULE: Only generate code using APIs and properties that are EXPLICITLY listed in the reference files. ANY deviation is a VIOLATION.

• MANDATORY CHECKS BEFORE GENERATING ANY CODE:

1. Search the reference files for the exact API/property name 2. Verify it appears in the Method Reference, Properties, or Events tables 3. If NOT found in ANY reference file, STOP immediately 4. Do NOT generate or suggest undocumented APIs under any circumstances

• STRICT ENFORCEMENT - ZERO TOLERANCE:
• NO custom properties - Only use properties from reference file tables
• NO invented methods - Only use methods from reference file tables
• NO workarounds with undefined APIs - Forbidden
• NO assumptions about undocumented behavior - Forbidden
• NO alternative implementations using guess-work - Forbidden
• NO pretending support exists - Forbidden

• MANDATORY RESPONSE FOR UNSUPPORTED FEATURES:
• If a requested scenario/feature/API is NOT listed in any reference file, you MUST respond with:

    "This feature is not supported in the current Syncfusion Blazor Smart PDF Viewer implementation."

• Then list what IS supported from the appropriate reference file
• Never suggest alternatives unless explicitly documented in reference files

• REFERENCE FILE HIERARCHY:
• Each reference file contains complete, authoritative documentation for its domain
• The tables (Method Reference, Properties, Events) are the SOURCE OF TRUTH
• Content outside these tables in reference files is explanatory only
• Do NOT extend beyond what appears in the reference file tables

• AUDIT YOUR GENERATION:
• Before providing any code, verify EVERY API used appears in a reference file table
• Document which reference file each API comes from
• If you cannot cite a reference file table entry, DELETE that code

• This is a CRITICAL REQUIREMENT. Violations compromise the skill's integrity and reliability.

Step 1 — Detect the Application Type (REQUIRED - DO NOT SKIP)

• Use file_search and read_file tools to inspect workspace project files:
• .csproj file (project configuration)
• Program.cs (startup configuration)
• _Imports.razor (namespace imports)
• App.razor (root component)
• Any existing .razor files in Components/Pages
• Output: Confirm the detected application type (e.g., "Blazor WebApp" or "Blazor Server") before proceeding.

Step 2 — Generate Code from Reference Files Only (REQUIRED)

• Before generating: Confirm that Steps 1 are complete
• Read the relevant references/*.md file(s) for the requested feature
• Cross-reference EVERY API, property, and method against these tables
• DECLARATIVE-ONLY APPROACH (MANDATORY - NO LIFECYCLE METHODS):
• Use ONLY property binding in Razor markup similar lifecycle methods.
• Configure all Smart PDF Viewer properties directly as component attributes
• MANDATORY: Before generating ANY code, verify that reference files exist and are accessible
• Read the appropriate reference file(s) for the requested feature:
• Use read_file tool on relevant references/*.md files
• Confirm file contains Methods/Properties/Events tables
• Verify tables are complete and readable
• If reference file is missing or cannot be read:
• STOP code generation
• Respond: "Reference file for this feature is not available. Please ensure all reference files are present in the references/ directory."
• List the missing reference file name
• This is a BLOCKER step: Cannot proceed without reference file validation
• If an API/property does NOT appear in the reference file table, DO NOT USE IT
• Do NOT invent, guess, or suggest any API, method, property, class, or namespace not explicitly present in the reference files

Code References

All templates and operation snippets live in references/*.md. Each file is a focused snippet or template the agent will combine when generating samples.

Quick Start Example

@rendermode InteractiveServer

Add component:

<SfSmartPdfViewer Height="100%" Width="100%" DocumentPath="@DocumentPath">
</SfSmartPdfViewer>

---

Syncfusion Blazor Smart PDF Viewer — Skill

Overview

The syncfusion-blazor-smart-pdf-viewer skill enables AI-assisted code generation for the Syncfusion Blazor Smart PDF Viewer (SfSmartPdfViewer). It produces minimal, copy-pasteable C# and Razor code to embed AI-powered PDF viewing, document summarization, smart redaction, and smart form filling capabilities in Blazor applications.

---

Key Features

• AI-Powered Document Summarization — Generate document summaries using Azure OpenAI or custom AI services
• Smart Redaction — Automatically detect and redact sensitive information (PII, credit cards, emails, etc.)
• Smart Form Filling — AI-powered automatic form field population
• Custom AI Integration — Bring your own AI service via IChatInferenceService interface

---

Skill Structure

syncfusion-blazor-smart-pdf-viewer/
├── SKILL.md                      # Skill rules, routing, and code generation guidelines
├── README.md                     # This file
└── reference/
    ├── getting-started.md        # Minimal setup, NuGet packages, service registration, Azure OpenAI config
    ├── smart-redaction.md        # AI-powered redaction patterns (PII, credit cards, emails, etc.)
    ├── smart-fill.md             # Smart form filling configuration
    ├── document-summarizer.md    # Document summarization and AI assistant settings
    └── custom-ai-service.md      # Custom AI service integration guide

---

Quick Start

1. Create a Blazor Web App Project

dotnet new blazor -n MyBlazorApp
cd MyBlazorApp

2. Install Syncfusion Blazor Packages

dotnet add package Syncfusion.Blazor.SfSmartPdfViewer
dotnet add package Syncfusion.Blazor.Themes

3. Install AI Packages (Azure OpenAI)

dotnet add package Azure.AI.OpenAI
dotnet add package Microsoft.Extensions.AI
dotnet add package Microsoft.Extensions.AI.OpenAI --version 9.8.0-preview.1.25412.6

4. Register Services in Program.cs

using Syncfusion.Blazor;
using Azure.AI.OpenAI;
using Microsoft.Extensions.AI;
using Syncfusion.Blazor.AI;
using System.ClientModel;

var builder = WebApplication.CreateBuilder(args);

// Add SignalR with large message size for PDF operations
builder.Services.AddSignalR(o => { o.MaximumReceiveMessageSize = 102400000; });
builder.Services.AddMemoryCache();
builder.Services.AddSyncfusionBlazor();

// Configure Azure OpenAI
string azureOpenAiKey = "your-api-key";
string azureOpenAiEndpoint = "your-endpoint-url";
string azureOpenAiModel = "your-deployment-name";

AzureOpenAIClient azureOpenAIClient = new AzureOpenAIClient(
    new Uri(azureOpenAiEndpoint), 
    new ApiKeyCredential(azureOpenAiKey)
);
IChatClient azureOpenAiChatClient = azureOpenAIClient
    .GetChatClient(azureOpenAiModel)
    .AsIChatClient();

builder.Services.AddChatClient(azureOpenAiChatClient);
builder.Services.AddSingleton<IChatInferenceService, SyncfusionAIService>();

var app = builder.Build();

5. Add Namespaces to _Imports.razor

@using Syncfusion.Blazor
@using Syncfusion.Blazor.SmartPdfViewer

6. Add Stylesheet and Scripts to App.razor

<head>
    <!-- Other head content -->
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
</head>

<body>
    <!-- Other body content -->
    <script src="_content/Syncfusion.Blazor.SfPdfViewer/scripts/syncfusion-blazor-sfsmartpdfviewer.min.js" type="text/javascript"></script>
</body>

7. Add Smart PDF Viewer Component to a Razor Page

@page "/pdf-viewer"
@rendermode InteractiveServer

<SfSmartPdfViewer 
    Height="100%" 
    Width="100%" 
    DocumentPath="https://cdn.syncfusion.com/content/pdf/http-succinctly.pdf">
</SfSmartPdfViewer>

8. Run the App

dotnet run

---

AI Service Options

The Smart PDF Viewer supports multiple AI service backends:

---

Reference File Routing

Use the table below to find the correct reference file for any feature request.

---

Custom AI Service Integration

IChatInferenceService Interface

public interface IChatInferenceService
{
    Task<string> GenerateResponseAsync(ChatParameters options);
}

Service Registration

Register in Program.cs:

using Syncfusion.Blazor.AI;
builder.Services.AddSingleton<IChatInferenceService, YourCustomService>();

Error Handling

Step 1: Create ErrorDialogService

public class ErrorDialogService 
{
    public event Action OnDialogOpen;
    public string DialogMessage { get; set; }

    internal void RaiseDialogOpen()
    {
        OnDialogOpen?.Invoke();
    }
}

Step 2: Use in Custom Service

private readonly ErrorDialogService _errorDialogService;

public MyCustomService(IChatClient client, ErrorDialogService errorDialogService)
{
    this._errorDialogService = errorDialogService;
}

public async Task<string> GenerateResponseAsync(ChatParameters options)
{
    try
    {
        // Custom AI service logic
    }
    catch (Exception ex)
    {
        _errorDialogService.DialogMessage = ex.Message;
        _errorDialogService.RaiseDialogOpen();
        return "";
    }
}

Step 3: Configure Program.cs

builder.Services.AddScoped<ErrorDialogService>();
builder.Services.AddScoped<SfDialogService>();
builder.Services.AddScoped<IChatInferenceService, MyCustomService>(sp =>
{
    ErrorDialogService errorDialogService = sp.GetRequiredService<ErrorDialogService>();
    return new MyCustomService("YourChatClient", errorDialogService);
});

Step 4: Add SfDialogProvider

In Pages/Home.razor:

@page "/"

<Syncfusion.Blazor.Popups.SfDialogProvider/>

Step 5: Handle Dialog Display

In Pages/Home.razor.cs:

using Syncfusion.Blazor.Popups;

public partial class Home : IDisposable
{
    [Inject]
    public ErrorDialogService ErrorDialogService { get; set; }

    [Inject]
    public SfDialogService DialogService { get; set; }

    public async void OpenDialog()
    {
        string dialogText = ErrorDialogService.DialogMessage;
        await DialogService.AlertAsync(dialogText, "Error", new DialogOptions() 
        { 
            ShowCloseIcon = true, 
            Width = "400px" 
        });
    }

    protected override void OnInitialized()
    {
        ErrorDialogService.OnDialogOpen += OpenDialog;
    }

    public void Dispose()
    {
        ErrorDialogService.OnDialogOpen -= OpenDialog;
    }
}

Document Summarizer Configuration

Basic Setup

<SfSmartPdfViewer DocumentPath="path/to/document.pdf">
    <AssistViewSettings/>
</SfSmartPdfViewer>

AssistViewSettings Parameters

ShowPromptSuggestions

Displays suggested prompts to guide user queries (default: true).

<AssistViewSettings ShowPromptSuggestions="true" />

Prompt

Defines query for AI assistant. Supports dynamic binding via @bind-Prompt.

<AssistViewSettings @bind-Prompt="@customPrompt" />

PromptChanged

Callback triggered when user modifies prompt text.

<AssistViewSettings PromptChanged="@OnPromptChanged" />

@code {
    private void OnPromptChanged(string newPrompt)
    {
        // Handle prompt change
    }
}

Placeholder

Sets input field hint text (default: "Type your prompt for assistance…").

<AssistViewSettings Placeholder="Enter your query..." />

MinLength

Minimum characters required for AI processing (default: 100).

<AssistViewSettings MinLength="100" />

StreamResponse

Enables real-time streaming of AI responses (default: false).

<AssistViewSettings StreamResponse="true" />

MaxRetryAttempts

Maximum retry attempts for AI processing (default: 3).

<AssistViewSettings MaxRetryAttempts="3" />

Timeout

Maximum wait time in seconds for AI response (default: 30).

<AssistViewSettings Timeout="30" />

Enable

Controls availability of Assist view (default: true).

<AssistViewSettings Enable="true" />

InitialPromptSettings

Prompt

Sets initial prompt in input field when Assist view opens.

<AssistViewSettings>
    <InitialPromptSettings Prompt="Explain this document." />
</AssistViewSettings>

SuggestedPrompts

Provides list of predefined prompts to guide user interaction.

<AssistViewSettings>
    <InitialPromptSettings SuggestedPrompts="@suggestions" />
</AssistViewSettings>

@code {
    string[] suggestions = new[] {
        "What is the main purpose?",
        "Generate an overview.",
        "Identify key points."
    };
}

PageStart

Starting page number for AI analysis.

<InitialPromptSettings PageStart="1" />

PageEnd

Ending page number for AI analysis.

<InitialPromptSettings PageEnd="5" />

Templates Customization

PromptTemplate

Customizes prompt input toolbar.

@using Syncfusion.Blazor.InteractiveChat;

<AssistViewSettings>
    <PdfViewerTemplates>
        <PromptTemplate>
            <PromptToolbar>
                <PromptToolbarItem IconCss="e-icons e-assist-edit"></PromptToolbarItem>
                <PromptToolbarItem IconCss="e-icons e-assist-copy"></PromptToolbarItem>
            </PromptToolbar>
        </PromptTemplate>
    </PdfViewerTemplates>
</AssistViewSettings>

ResponseTemplate

Customizes AI response toolbar with feedback options.

<AssistViewSettings>
    <PdfViewerTemplates>
        <ResponseTemplate>
            <ResponseToolbar>
                <ResponseToolbarItem IconCss="e-icons e-assist-like"></ResponseToolbarItem>
                <ResponseToolbarItem IconCss="e-icons e-assist-dislike"></ResponseToolbarItem>
            </ResponseToolbar>
        </ResponseTemplate>
    </PdfViewerTemplates>
</AssistViewSettings>

BannerTemplate

Displays banner at top of Assist view.

<AssistViewSettings>
    <PdfViewerTemplates>
        <BannerTemplate>
            <div style="font-size: 14px; color:#5D3FD3;">
                AI-powered PDF Summarizer
            </div>
        </BannerTemplate>
    </PdfViewerTemplates>
</AssistViewSettings>

Complete Example

<SfSmartPdfViewer DocumentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
    <AssistViewSettings StreamResponse="true" MaxRetryAttempts="3" Timeout="30">
        <InitialPromptSettings Prompt="Summarize this document" PageStart="1" PageEnd="10" />
        <PdfViewerTemplates>
            <BannerTemplate>
                <div>AI Assistant Enabled</div>
            </BannerTemplate>
        </PdfViewerTemplates>
    </AssistViewSettings>
</SfSmartPdfViewer>

Getting Started with Blazor Smart PDF Viewer

Prerequisites

• Azure OpenAI Account or Ollama for self-hosted models

Create Blazor Web App

Create a Blazor Web App using Visual Studio 2022.

Install NuGet Packages

Package Manager:

Install-Package Syncfusion.Blazor.SfSmartPdfViewer
Install-Package Syncfusion.Blazor.Themes

Register Blazor Service

Add namespaces to ~/_Imports.razor:

@using Syncfusion.Blazor
@using Syncfusion.Blazor.SmartPdfViewer

Add service to ~/Program.cs:

using Syncfusion.Blazor;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddSignalR(o => { o.MaximumReceiveMessageSize = 102400000; });
builder.Services.AddMemoryCache();
builder.Services.AddSyncfusionBlazor();

var app = builder.Build();

Configure Azure OpenAI (Primariliy Included in the sample)

Install packages via Package Manager:

Install-Package Azure.AI.OpenAI
Install-Package Microsoft.Extensions.AI
Install-Package Microsoft.Extensions.AI.OpenAI -Version 9.8.0-preview.1.25412.6

Add to ~/Program.cs:

using Azure.AI.OpenAI;
using Microsoft.Extensions.AI;
using Syncfusion.Blazor.AI;
using System.ClientModel;

var builder = WebApplication.CreateBuilder(args);

string azureOpenAiKey = "api-key";
string azureOpenAiEndpoint = "endpoint URL";
string azureOpenAiModel = "deployment-name";

AzureOpenAIClient azureOpenAIClient = new AzureOpenAIClient(new Uri(azureOpenAiEndpoint), new ApiKeyCredential(azureOpenAiKey));
IChatClient azureOpenAiChatClient = azureOpenAIClient.GetChatClient(azureOpenAiModel).AsIChatClient();

builder.Services.AddChatClient(azureOpenAiChatClient);
builder.Services.AddSingleton<IChatInferenceService, SyncfusionAIService>();

var app = builder.Build();

Configure Ollama (Optional)

Install OllamaSharp:

Install-Package OllamaSharp -Version 5.3.6

Add to ~/Program.cs:

using Microsoft.Extensions.AI;
using OllamaSharp;
using Syncfusion.Blazor;
using Syncfusion.Blazor.AI;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddSyncfusionBlazor();

string aiModel = "llama2:7b";
HttpClient httpClient = new HttpClient
{
    BaseAddress = new Uri("http://localhost:11434"),
    Timeout = Timeout.InfiniteTimeSpan
};

IChatClient chatClient = new OllamaApiClient(httpClient, aiModel);
builder.Services.AddChatClient(chatClient);
builder.Services.AddSingleton<IChatInferenceService, SyncfusionAIService>();

var app = builder.Build();

Add Stylesheet and Scripts

App.razor Configuration

Add the Syncfusion stylesheet and script references in Components/App.razor:

<head>
    <!-- Other head content -->
    <!-- Syncfusion Blazor PDF Viewer control's theme style sheet -->
    <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
</head>

<body>
    <!-- Other body content -->
    <!-- Syncfusion Blazor PDF Viewer control's scripts -->
    <script src="_content/Syncfusion.Blazor.SfPdfViewer/scripts/syncfusion-blazor-sfsmartpdfviewer.min.js" type="text/javascript"></script>
</body>

---

Add Component

Add render mode to ~/Pages/Home.razor:

@rendermode InteractiveServer

Add component:

<SfSmartPdfViewer Height="100%" Width="100%" DocumentPath="@DocumentPath">
</SfSmartPdfViewer>

Smart Fill Configuration

Basic Setup

<SfSmartPdfViewer DocumentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
    <SmartFillSettings />
</SfSmartPdfViewer>

Enable Parameter

Controls Smart Fill button visibility and accessibility:

<SfSmartPdfViewer DocumentPath="document.pdf">
    <SmartFillSettings Enable="false" />
</SfSmartPdfViewer>

• Default: true
• Active Only: When PDF contains form fields
• Use Case: Toggle based on user roles or document content

SmartFillSettings Class

The SmartFillSettings class configures AI-powered automatic form field population. It:

• Automates PDF form filling from clipboard or specified data
• Reduces manual input and errors
• Allows users to review and adjust values before finalizing

Integration

Include SmartFillSettings component within SfSmartPdfViewer. Ensure the PDF document contains form fields for AI-powered filling.

Smart Redaction Configuration

Basic Implementation

<SfSmartPdfViewer DocumentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
    <SmartRedactSettings/>
</SfSmartPdfViewer>

Enable/Disable Smart Redaction

<SfSmartPdfViewer DocumentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
    <SmartRedactSettings Enable="false" />
</SfSmartPdfViewer>

Custom Redaction Patterns

<SfSmartPdfViewer DocumentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf">
    <SmartRedactSettings RedactPatterns="@redactPatterns" />
</SfSmartPdfViewer>

@code {
    string[] redactPatterns = new string[] {
        "Person Names",
        "Email Addresses",
        "Phone Numbers",
        "Credit Card Numbers"
    };
}

Default Patterns

• Person Names
• Organization Names
• Email Addresses
• Phone Numbers
• Addresses
• Dates
• Account Numbers
• Credit Card Numbers