AI Document Assistant Integration with PSPDFKit for Web

The exposed functionality from AI Document Assistant is designed to be integrated with PSPDFKit for Web. This guide explains how to connect the two to provide your users with an AI experience.

Configuration

To show the AI Document Assistant user interface (UI) on PSPDFKit for Web, you first need to pass a document-assistant configuration and generated JSON Web Token (JWT) to PSPDFKit.load():

PSPDFKit.load({
  aiDocumentAssistant: {
    sessionId: <sessionId>,
    jwt: <jwt>,
    backendUrl: <backendUrl>,
  },
  ...
});

The <sessionId> placeholder in the code above should be replaced by an alphanumeric unique ID generated by your application. A new ID will open a new chat session, and an existing ID will reopen the session where the user left off.

The <jwt> placeholder should be replaced with a valid and signed JWT. See the guide on generating a JWT for details.

The <backendUrl> placeholder should be replaced with the full URL where your AI Document Assistant service is served from. This will be the protocol and the IP address or domain you’re hosting your service from, followed by the port number, e.g. http://localhost:4000

You can also pass an optional userId to the aiDocumentAssistant object, which will allow you to set a request limit for the user in the JWT, and to manage user data with the server API.

Opening the AI Document Assistant UI

To allow a user to show/hide the AI Document Assistant UI, you can add a toolbar button that will open the AI Document Assistant UI when clicked:

PSPDFKit.load({
	toolbarItems: [
		...PSPDFKit.defaultToolbarItems,
		{ type: 'ai-document-assistant' },
	],
});

Programmatic Opening

It’s also possible to show/hide the AI Document Assistant UI programmatically using the showAIDocumentAssistant view state field:

PSPDFKit.load({
  ...
}).then((instance) => {
  // Show the AI Document Assistant UI.
  instance.setViewState((vs) => vs.set('showAIDocumentAssistant', true));
});