---
title: "AI Assistant integration with Nutrient Web SDK | Nutrient"
canonical_url: "https://www.nutrient.io/guides/ai-assistant/viewer-integration/nutrient-web-sdk/"
md_url: "https://www.nutrient.io/guides/ai-assistant/viewer-integration/nutrient-web-sdk.md"
last_updated: "2026-05-15T19:10:04.896Z"
description: "The exposed functionality from AI Assistant is designed to be integrated with Nutrient Web SDK. Discover how to connect the two to provide your users."
---

# AI Assistant integration with Nutrient Web SDK

The exposed functionality from AI Assistant is designed to be integrated with [Nutrient Web SDK](https://www.nutrient.io/sdk/web/). 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)](https://www.nutrient.io/guides/ai-assistant/viewer-integration/client-authentication/generate-a-jwt.md) to [`PSPDFKit.load()`](https://www.nutrient.io/api/web/functions/NutrientViewer.load.html):

```js

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](https://www.nutrient.io/guides/ai-assistant/viewer-integration/client-authentication/generate-a-jwt.md) 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](https://www.nutrient.io/guides/ai-assistant/api.md).

## 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.

| Agent     | Description                                                                                   | Use case                                                    |
| --------- | --------------------------------------------------------------------------------------------- | ----------------------------------------------------------- |
| `agentic` | Full autonomous agent that can read, write, add annotations, fill forms, and redact documents | Document editing workflows, form filling, redaction tasks   |
| `chat`    | Read-only Q&A mode for summarizing, extracting data, and answering questions                  | Customer-facing read-only interfaces, research and analysis |
| `base`    | Minimal configuration intended for full customization                                         | Custom agent implementations                                |

The default is `agentic`. For more details on each agent and when to use them, see the [agents](https://www.nutrient.io/guides/ai-assistant/features/agents.md) guide.

```js

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](https://www.nutrient.io/guides/ai-assistant/features/agent-configuration.md) 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:

```js

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:

```js

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

```
---

## Related pages

- [Chat dialog usage](/guides/ai-assistant/viewer-integration/prompting.md)