Skip to main content

​
What you will build

In this guide, you will build a minimal flow:
  • Mint an ephemeral realtime session token from your backend
  • Connect to Sippet realtime events
  • Render live call updates in your UI

​
Prerequisites

  • Node.js 18+
  • A Sippet API environment
  • A secret key stored on your backend
  • Contact and AI agent records in your Sippet org

​
Step 1: install the SDK

npm install @sippet-ai/sdk-js

​
Step 2: mint realtime session tokens on your backend

export async function createRealtimeSession() {
  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 create realtime session (${response.status})`);
  }

  return response.json();
}

​
Step 3: initialize realtime events in the browser

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

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("incoming_call", payload);
});

channel.on("call_answered", (payload) => {
  console.log("call_answered", payload);
});

channel.on("call_ended", (payload) => {
  console.log("call_ended", payload);
});

​
Step 4: keep token refresh simple

  • Re-mint token on reconnect failures.
  • Re-mint token shortly before expiry.
  • Keep secret keys out of browser code.

​
Next steps

  • Session token guide: /guides/realtime-session-tokens
  • Realtime design patterns: /guides/realtime-telephony-patterns
  • Operator widget quickstart: /guides/operator-widget-quickstart