SDK

Low-Code

Workflow

DWS API

Compare PDF text using AI and JavaScript

Nutrient SDK’s AI text comparison feature enhances the standard text comparison feature by leveraging artificial intelligence to analyze and categorize the differences found between two documents. This provides users with a high-level summary of changes and allows them to filter differences based on AI-generated categories, making review processes significantly faster and more efficient.

Information

Comparing documents and text is available when using Web SDK in the browser. For more information, refer to the operational mode guide.

AI text comparison is possible in Nutrient Web SDK with the corresponding license components (Comparison and AI). Contact Sales if you’re interested in this functionality.

Setting up AI Assistant

To use AI-powered text comparison, you’ll need to set up AI Assistant, which powers the artificial intelligence capabilities in Nutrient SDK.

For a complete guide on setting up AI Assistant, including Docker configuration, refer to our AI Assistant getting started guide.

Once you have AI Assistant running, you’ll need to configure Nutrient Web SDK to connect to it.

Enabling AI comparison

To enable AI capabilities within the text comparison user interface (UI), you need to configure the aiAssistant object and set the ai.enabled flag to true in the loadTextComparison configuration. The aiAssistant object is responsible for connecting the Nutrient Web SDK to the AI Assistant service. It requires the following properties:

  • sessionId — A unique identifier for the AI session. This is used if you also want to use AI to chat with your documents, but not in AI text comparison.

  • jwt — A JSON Web Token (JWT) used for authenticating requests to the AI Assistant.

  • backendUrl — The URL where the AI Assistant service is hosted.

For detailed steps on integrating the AI Assistant, refer to this integration guide. To get high-quality results while maintaining cost efficiency, we recommend the GPT4.1-nano model, which can be selected in the AIA service configuration.

Here’s an example configuration:

PSPDFKit.loadTextComparison({
  ...defaultConfiguration,
  // AI Assistant configuration.
  aiAssistant: {
    sessionId: "unique-session-id", // A unique identifier for the session.
    jwt: "a-jwt-token", // JWT token for authentication.
    backendUrl: "http://localhost:4000/" // URL where AI Assistant is running.
  },
  ai: true,
  documentA: "text-comparison/static/documentA.pdf",
  documentB: "text-comparison/static/documentB.pdf"
});

The JWT token should be generated on your server as explained in the AI Assistant getting started guide.

Once configured, the AI Assistant will enhance the text comparison UI by providing AI-generated summaries, categories, and filtering options, making it easier to analyze document differences.

AI-powered UI enhancements

With AI enabled, the text comparison UI includes additional elements, outlined below.

  • AI summary panel — Located above the list of changes in the sidebar, this panel displays two things:

    • An AI-generated summary describing the overall nature of the differences found.

    • A list of AI-generated categories (tags) representing the types of changes (e.g. Formatting, Content Addition, Rewording).

  • Filters — You can click the AI-generated categories to filter the list of changes, showing only those relevant to the selected categories.

  • Enhanced highlighting — Changes not matching the active filters are visually deemphasized (grayed out) in the document view.

Customizing comparison highlights

Highlight colors can be customized similarly to the standard text comparison by setting the comparisonSidebarConfig.diffColors option. AI Text Comparison introduces two new color options — disabledColor and disabledBackgroundColor — for changes not matching the active filters:

PSPDFKit.loadTextComparison({
  ...restOfConfigurations,
  comparisonSidebarConfig: {
    diffColors: {
      deletionColor: new PSPDFKit.Color({ r: 255, g: 218, b: 185 }),
      insertionColor: new PSPDFKit.Color({ r: 200, g: 255, b: 200 }),
      disabledColor: new PSPDFKit.Color({ r: 200, g: 200, b: 200 }),
      disabledBackgroundColor: new PSPDFKit.Color({
        r: 230,
        g: 230,
        b: 230
      })
    }
  }
});

Refer to the DiffColors documentation for all available color properties.

Programmatic AI comparison

You can also execute AI-driven comparison programmatically using the Instance.compareDocuments method. To carry out an AI comparison, configure the PSPDFKit.ComparisonOperation type as PSPDFKit.ComparisonOperationType.AI. Additionally, define the specific AI operation by setting the options.operationType property, utilizing the PSPDFKit.AIComparisonOperationType enumeration. We support two kinds of AI comparison operations:

  • PSPDFKit.AIComparisonOperationType.ANALYZE — Returns a summary of the differences between the documents and a list of AI-detected categories based on the changes.

  • PSPDFKit.AIComparisonOperationType.TAG — Returns the results of a text comparison, with each change tagged by the AI service based on predefined categories.

This sample code provides a comprehensive description of the entire workflow:

// Create document descriptors.
const originalDocument = new PSPDFKit.DocumentDescriptor({
  filePath: "/path/to/original.pdf",
  pageIndexes: [0]
});

const changedDocument = new PSPDFKit.DocumentDescriptor({
  filePath: "/path/to/modified.pdf",
  pageIndexes: [0]
});

// Configure documents for comparison.
const comparisonDocuments = { originalDocument, changedDocument };

// Create an AI comparison operation for analysis.
const analyzeOperation = new PSPDFKit.ComparisonOperation(
  PSPDFKit.ComparisonOperationType.AI,
  { operationType: PSPDFKit.AIComparisonOperationType.ANALYZE }
);

// Perform AI analysis of document changes.
instance
  .compareDocuments(comparisonDocuments, analyzeOperation)
  .then((result) => {
    if (PSPDFKit.isAIDocumentComparisonResult(result)) {
      console.log("AI Summary:", result.summary);
      console.log("Categories:", result.categories);
      // Process the AI comparison results.
    }
  })
  .catch((error) => {
    console.error("AI comparison failed:", error);
  });

// For tagging changes with specific categories.
const tagOperation = new PSPDFKit.ComparisonOperation(
  PSPDFKit.ComparisonOperationType.AI,
  {
    operationType: PSPDFKit.AIComparisonOperationType.TAG,
    categories: ["Legal", "Financial", "Semantic"]
  }
);

// Tag changes with specified categories.
instance
  .compareDocuments(comparisonDocuments, tagOperation)
  .then((result) => {
    // Process tagged changes.
    console.log("Tagged references:", result.references);
  });

Understanding the AI comparison result

When using ComparisonOperationType.AI, the Instance.compareDocuments method returns an AIDocumentComparisonResult. You can use type guards to determine the specific type of result:

  • PSPDFKit.isAIDocumentAnalysisResult(result) — This helper checks if the result comes from an “analyze” operation (AIADocumentChangesAnalysisResponse). It contains:

    • summary — A string summarizing the document changes.

    • categories — An array of strings representing the AI-detected text change categories.

    • changes — The underlying standard DocumentComparisonResult containing the detailed text hunks and operations.

  • PSPDFKit.isAIDocumentTaggingResult(result) — Checks if the result is from a “tag” operation (AIADocumentChangesTaggingResponse). It contains:

    • references — An array where each item corresponds to a change and includes a tag array listing the categories assigned to that specific change by the AI.

    • changes — The underlying standard DocumentComparisonResult.

You can use these results to build custom UI elements or integrate the AI analysis into your workflows.