AI Assistant integration with Nutrient Web SDK

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

Configuration

To show the AI Assistant user interface (UI) on Nutrient Web SDK, 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 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 Assistant UI

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

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

Programmatic opening

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

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