Installation
Add the Web SDK to your project with the ESM or standalone build
The Web SDK ships in two build types. Use the ESM build for any project with a bundler; use the standalone build to drop the SDK into a plain HTML page with a single script tag.
Choose a build
ESM vs standalone
ESM build
Install from npm and import
Standalone build
Load from a CDN script tag
Get a token
What to pass to the SDK
Choose a build
| ESM build | Standalone build | |
|---|---|---|
| Install | npm install | <script> tag |
| Best for | React, Vue, Angular, any bundler | Plain HTML, no build step |
| Dependencies | @reduxjs/toolkit peer dependency | All bundled |
| Tree-shaking | Yes | No |
| Entry point | NapsterCompanionApiSdk import | window.napsterCompanionApiSDK |
ESM build
Install the SDK and its peer dependency:
npm install @touchcastllc/napster-companion-api @reduxjs/toolkit@reduxjs/toolkit is a required peer dependency. Import the SDK and its stylesheet in your application:
import { NapsterCompanionApiSdk } from "@touchcastllc/napster-companion-api";
import "@touchcastllc/napster-companion-api/styles";The stylesheet can also be loaded via a <link> tag or CSS @import if you prefer not to import it in JavaScript:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@touchcastllc/napster-companion-api@latest/lib/index.css" />Standalone build
Add a single script tag to your HTML. All dependencies are bundled — no build tools required.
<script src="https://cdn.jsdelivr.net/npm/@touchcastllc/napster-companion-api@latest/lib/index.standalone.js"></script>The SDK attaches itself to window.napsterCompanionApiSDK. The stylesheet is included in the standalone bundle, so no separate CSS import is needed.
Get a token
Before you can initialize the SDK you need a connection token. Tokens are short-lived and minted on your server — never expose your API key in the browser.
- To create a session from an existing Omniagent, see Create a session on the WebRTC channel page.
- To authenticate your backend, see Authentication.