Getting started with AI Assistant and Nutrient Web SDK

AI Assistant provides Nutrient Web SDK with AI functionality. Using intelligent document processing (IDP) technology, AI Assistant enables users to query, summarize, translate, compare document text on the fly.

To set up a fully functional AI system, you’ll need a Docker container service and a library working in unison:

• Nutrient Web SDK — A document viewer in the browser that also exposes a user interface (UI) for the AI features.
• AI Assistant — A service to process the AI requests and process documents.

This guide will walk you through the setup for AI Assistant. It’ll then walk you through a Node.js Nutrient Web SDK example to show how each service communicates to serve an AI example.

Prerequisites

AI Assistant is distributed as a Docker container. To run it on your computer, you need to install a Docker runtime distribution for your operating system.

Obtaining an OpenAI API key

AI Assistant requires an API key from either of these LLM providers:

• OpenAI
• Azure OpenAI

This example will use OpenAI, but if you’d like to use Azure OpenAI, refer to the Azure OpenAI guide.

If you don’t have an OpenAI key, create one by following the steps in the next section. Otherwise, skip to the Setting up AI Assistant section.

Creating an OpenAI account

To create an OpenAI account, sign up(opens in a new tab) to obtain an API key(opens in a new tab).

The OpenAI API has attained SOC 2 Type 2 compliance (see the official announcement(opens in a new tab)).

Save your API key somewhere safe, as you’ll need it in the Setting up AI Assistant section.

Setting up AI Assistant

AI Assistant requires a PostgreSQL database with the pgvector(opens in a new tab) extension to operate.

Copy the code snippet below and save it anywhere on your computer in a file called docker-compose.yml. Replace the <your-openai-api-key> placeholder with your OpenAI API key:

version: "3.8"

services:
  ai-assistant:
    image: pspdfkit/ai-assistant:nightly
    environment:
      OPENAI_API_KEY: <your-openai-api-key>
      PGUSER: db-user
      PGPASSWORD: password
      PGDATABASE: ai_assistant
      PGHOST: db
      PGPORT: 5432
      API_AUTH_TOKEN: secret
      JWT_PUBLIC_KEY: |
        -----BEGIN PUBLIC KEY-----
        MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA2gzhmJ9TDanEzWdP1WG+
        0Ecwbe7f3bv6e5UUpvcT5q68IQJKP47AQdBAnSlFVi4X9SaurbWoXdS6jpmPpk24
        QvitzLNFphHdwjFBelTAOa6taZrSusoFvrtK9x5xsW4zzt/bkpUraNx82Z8MwLwr
        t6HlY7dgO9+xBAabj4t1d2t+0HS8O/ed3CB6T2lj6S8AbLDSEFc9ScO6Uc1XJlSo
        rgyJJSPCpNhSq3AubEZ1wMS1iEtgAzTPRDsQv50qWIbn634HLWxTP/UH6YNJBwzt
        3O6q29kTtjXlMGXCvin37PyX4Jy1IiPFwJm45aWJGKSfVGMDojTJbuUtM+8P9Rrn
        AwIDAQAB
        -----END PUBLIC KEY-----
      JWT_ALGORITHM: RS256
      DASHBOARD_USERNAME: dashboard
      DASHBOARD_PASSWORD: secret
      SECRET_KEY_BASE: secret-key-base
    ports:
      - 4000:4000
    depends_on:
      db:
        condition: service_healthy
  db:
    image: pgvector/pgvector:pg16
    healthcheck:
      test: [ "CMD-SHELL", "pg_isready -U db-user -d ai_assistant" ]
      interval: 3s
      timeout: 3s
      retries: 10
    environment:
      POSTGRES_USER: db-user
      POSTGRES_PASSWORD: password
      POSTGRES_DB: ai_assistant
      POSTGRES_INITDB_ARGS: --data-checksums
      PGDATA: /var/lib/postgresql/data/pgdata
    volumes:
      - pgdata:/var/lib/postgresql/data

volumes:
  pgdata:

Starting AI Assistant

Now open a terminal emulator.

Go to the directory where you saved the docker-compose.yml file:

cd <path-to-directory-with-docker-compose-yml>

Run the following:

docker-compose up

This command might take a while to run, depending on your internet connection speed. Wait until you see the following message in the terminal:

ai_document_assistant  | info: AI Assistant started

AI Assistant is now up and running!

Setting up Nutrient Web SDK

Follow the below instructions to set up Nutrient Web SDK viewer with AI Assistant.

Installing Node.js

If you haven’t installed Node.js, head to the official guides(opens in a new tab) and follow the instructions. By the end of the installation process, you should be able to run the following command:

node --version

The output should be something like v14. You can ignore any subsequent number.

Generating the application

You’ll use Express(opens in a new tab), one of the most common Node.js web frameworks. To create a new Express application, you can use the official generator.

Run:

npx express-generator pspdfkit_example --view=ejs

This command will generate a project structure and instruct you on the steps to follow to install dependencies and start the project.

Once you’ve followed all the steps, you should be able to visit http://localhost:3000 to confirm the application is working as expected.

Configuring AI Assistant in Nutrient Web SDK

To configure Nutrient Web SDK to use AI Assistant:

• Generate a JSON Web Token (JWT) on the backend for AI Assistant communication
• Pass the AI Assistant configuration to PSPDFKit.load().

1. Create the document’s route in ./routes/documents.js:

   var express = require("express");
     var router = express.Router();
   
     router.get('/', function (_req, res, _next) {
     res.render('documents/show')
     })
   
    module.exports = router;

2. Create the AI Assistant JWT in ./routes/documents.js:

   var express = require("express");
    var router = express.Router();
    + var fs = require("fs");
    + var path = require("path");
    + var jwt = require("jsonwebtoken");
    + var jwtKey = fs.readFileSync(
    +   path.resolve(__dirname, "../config/pspdfkit/jwt.pem")
    + );
   
    router.get("/", function (req, res, next) {
    +   var aiJwt = prepareAIDocumentAssistantJwt();
    -   res.render("documents/show");
    +   res.render("documents/show", { aiJwt: aiJwt });
      });
    +
    + const prepareAIDocumentAssistantJwt = function (documentId) {
    +   var claims = {}
    +
    +   return jwt.sign(claims, jwtKey, {
    +     algorithm: "RS256",
    +     expiresIn: 60 * 60, // 1hr, this will set the `exp` claim.
    +     allowInsecureKeySizes: true,
    +   });
    + }
   
    module.exports = router;

3. Create a corresponding view with some minimal HTML that loads the Nutrient library, uses the JWT created by the router in the previous step, and adds a toolbar item to activate AI Assistant in /views/documents/show.ejs:

   <script src="https://cdn.cloud.pspdfkit.com/pspdfkit-web@<%= latest_version(:web) %>/pspdfkit.js"></script>
    <!-- 2. Element where PSPDFKit will be mounted. -->
    <div id="pspdfkit" style="width: 100%; max-width: 800px; height: 480px;"></div>
    <!-- 3. Initialize PSPDFKit. -->
    <script>
      PSPDFKit.load({
            document: "/samples/example.pdf",
            container: "#pspdfkit",
            instant: false,
            toolbarItems: [...PSPDFKit.defaultToolbarItems, { type: "ai-document-assistant" }],
            aiDocumentAssistant: {
                sessionId: "my-random-session-id",
                jwt: "<%%= aiJwt %>",
                backendUrl: 'http://localhost:4000/',
            },
      })
       .then(function(instance) {
        console.log("PSPDFKit loaded", instance);
       })
       .catch(function(error) {
       console.error(error.message);
      });
     </script>

Refresh the page, and you’ll see the Nutrient Web SDK viewer with a new AI toolbar button. Click that button and the chat dialog will open and the document processing mechanism will begin. Once the spinner has stopped spinning, you’ll be able to interact with AI Assistant!