> ## Documentation Index
> Fetch the complete documentation index at: https://sippet.ai/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Frontend realtime SDK

> Use @sippet-ai/sdk-js in your frontend for browser calling, sockets, and live call events.

## 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:

* [Console overview](/)
* [Call center](/console/call-center)
* [AI agents](/console/ai-agents)

If your backend needs to call Sippet directly, use the HTTP RPC API:

* [RPC API overview](/api-reference/introduction)
* [Full RPC action reference](/sdk-js/rpc-actions)

## 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

```bash theme={null}
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.

```ts theme={null}
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

```ts theme={null}
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:

```ts theme={null}
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.

## Related pages

* [Realtime session token guide](/guides/realtime-session-tokens)
* [Backend RPC API overview](/api-reference/introduction)
* [Full RPC action reference](/sdk-js/rpc-actions)