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 an AI Assistant configuration and generated JSON Web Token (JWT) to PSPDFKit.load():

PSPDFKit.load({
  aiAssistant: {
    sessionId: <sessionId>,
    jwt: <jwt>,
    backendUrl: <backendUrl>,
    userId: <userId>,
    agentId: <agentId>,
    agentConfiguration: <agentConfiguration>,
  },
  ...
});

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, for example, http://localhost:4000.

You can also pass an optional userId to the aiAssistant object. If set, per-user request limit claims in the JWT are enforced, and you can manage user data with the server API.

Agents

The agentId field selects which agent to use. AI Assistant includes built-in agents out of the box, or you can customize your own.

The default is agentic. For more details on each agent and when to use them, see the agents guide.

PSPDFKit.load({
  aiAssistant: {
    sessionId: 'session123',
    jwt: 'your-jwt-token',
    backendUrl: 'http://localhost:4000',
    agentId: 'chat', // Use read-only mode.
  },
  ...
});

Agent configuration

In addition to selecting a preset, you can provide an optional agentConfiguration object to further customize the AI agent. This configuration lets you specify the agent’s system prompt, knowledge sources, and tool approval policies so that each run produces higher-quality, domain-aware results. For more details, see the agent configuration guide.

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-assistant' },
  ],
});

Programmatic opening

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

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