@pluno/product-agent-web

Pluno Product Agent Web SDK

Stack-agnostic browser SDK and default widget for embedding Product Agent into customer webapps.

Install

npm install @pluno/product-agent-web

Keep your Product Agent secret_key on your server. Browser code should only receive a short-lived session token, or call your own authenticated token endpoint.

Headless SDK

import { PlunoProductAgent } from "@pluno/product-agent-web";

const agent = await PlunoProductAgent.init({
  tokenProvider: async () => {
    const response = await fetch("/api/pluno-product-agent-token", {
      method: "POST",
      credentials: "include",
    });
    const payload = await response.json();
    return payload.token;
  },
});

agent.on("state", (state) => {
  renderYourOwnChatUi(state);
});

agent.sendMessage("Update my settings");

The SDK always captures product network activity by patching fetch and XMLHttpRequest. There is intentionally no opt-out for now.

Drop-In Widget

<script
  type="module"
  src="https://app.pluno.ai/product-agent/product-agent-widget.js"
  data-pluno-token-endpoint="/api/pluno-product-agent-token"
  data-pluno-launcher-label="Ask for anything..."
  data-pluno-accent-color="#7c3aed"
  data-pluno-font-family='Inter, system-ui, sans-serif'
></script>

The token endpoint must be implemented by the customer backend. It should authenticate the current user, then call Pluno's /api/product-agent/embed/token endpoint with:

• public_key
• secret_key
• origin
• optional metadata, including metadata.user_id when the customer has a stable user id
• optional context