Skip to main content

​
What the SDK is for

@sippet-ai/sdk-js is the frontend layer for building realtime Sippet-powered browser experiences. Use it when your app needs to:
  • connect a browser to Sippet’s realtime socket
  • react to live call events in your UI
  • power browser-based voice or operator workflows
  • handle frontend call state without building the socket and SIP glue yourself

​
Why it exists

The backend RPC API and the frontend SDK solve different problems.
  • The Backend RPC API is for your server to read or write Sippet data over HTTP.
  • The Frontend SDK is for your browser app to handle live sockets, realtime events, and voice session behavior.
In practice, most integrations use both:
  1. your backend talks to Sippet securely with a secret key
  2. your backend mints a short-lived realtime session token
  3. your browser uses the SDK to connect to Sippet and react to live events
Without the SDK, you would need to wire up the socket connection, event subscriptions, and browser calling behavior yourself.

​
When to use it

Use the SDK if you are building:
  • an operator dashboard that reacts to incoming calls in real time
  • a browser app that needs live call updates or transcripts
  • a custom frontend for voice calling, queue activity, or socket events
Do not use the frontend SDK as your main backend integration layer. If you are configuring Sippet for your org, start with the console docs instead: If your backend needs to call Sippet directly, use the HTTP RPC API:

​
What it gives you

  • Browser realtime subscriptions over /socket
  • Voice calling helpers for SIP/WebRTC flows
  • Realtime event handling for live call state in your UI
  • A cleaner frontend integration path than building directly against low-level socket and call primitives

​
Install

npm install @sippet-ai/sdk-js

​
Typical frontend flow

  1. Your backend mints a short-lived session token with POST /api/realtime/session
  2. Your browser initializes the socket with session_token
  3. Your UI subscribes to events like incoming_call and call_transcript_delta

​
Backend token minting

Use your secret key from your backend only. 
const response = await fetch("https://api.sippet.ai/api/realtime/session", {
  method: "POST",
  headers: {
    "content-type": "application/json",
    "x-api-key": process.env.SIPPET_SECRET_KEY!,
  },
});

if (!response.ok) throw new Error("Failed to mint realtime session token");

const { token } = await response.json();
return { token };
Do not send secret keys to browsers.

​
Browser socket setup

import { initSocket, joinEventsChannel } from "@sippet-ai/sdk-js/client";

const { token } = await fetch("/api/sippet/realtime-session", {
  method: "POST",
  credentials: "include",
}).then((r) => r.json());

initSocket({
  baseUrl: "https://api.sippet.ai",
  socketOptions: {
    params: {
      session_token: token,
    },
  },
});

const channel = joinEventsChannel();

channel.on("incoming_call", (payload) => {
  console.log(payload);
});
Known event names:
  • incoming_call
  • call_answered
  • call_ended
  • operator_status_change
  • call_queue_entry_updated
  • call_queue_entry_deleted
  • call_participant_joined
  • call_participant_left
  • call_transcript_delta
  • call_transcript_completed
  • call_ai_audit_event
  • call_ai_usage

​
Backend RPC access

If you also want typed backend helpers instead of calling raw HTTP yourself, use the server client from your backend: 
import { createServerClient } from "@sippet-ai/sdk-js/server";

const client = createServerClient({ apiKey: process.env.SIPPET_SECRET_KEY! });

const calls = await client.listCalls({
  fields: ["id", "callUuid", "status"],
});
That server client is a convenience wrapper around the backend RPC API. It is not the browser realtime layer.