Getting started (classic) - Sippet AI

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/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("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