SDK overview

@livelayer/sdk is the framework-agnostic core. The React package wraps it; you can also use it directly from any other framework or vanilla JS.

bash

npm install @livelayer/sdk

The SDK ships three independent surfaces — pick whichever fits your need:

Surface	When to use
`<livelayer-widget>` custom element	Drop-in widget for any HTML environment (Vue, Svelte, Solid, vanilla, even React). Handles the entire UI.
`LiveKitSession` class	You want to manage the session lifecycle programmatically and render your own UI.
`LiveLayerTracker` class	Visitor identity + auto-tracking. Independent of the widget — use even when you don't have an agent.

Installation modes

Three quick examples

Vue 3

vue

<script setup lang="ts">
import "@livelayer/sdk";
</script>

<template>
  <livelayer-widget agent-id="agt_abc123" mode="widget" />
</template>

The custom element works inside any framework that respects custom HTML.

Svelte

svelte

<script>
  import "@livelayer/sdk";
</script>

<livelayer-widget agent-id="agt_abc123" mode="widget"></livelayer-widget>

Vanilla JS — programmatic session

import { LiveKitSession } from "@livelayer/sdk";

const session = new LiveKitSession({
  agentId: "agt_abc123",
  baseUrl: "https://livelayer.app",
});

session.onConnectionStateChange = (state) => {
  console.log("connection:", state);
};

session.onTranscript = (entries) => {
  for (const entry of entries) {
    if (!entry.final) continue;
    console.log(`[${entry.role}] ${entry.text}`);
  }
};

await session.connect();