# 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 title="install.sh"
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

**ESM (modern bundlers):**

```ts title="app.ts"
import {
  LiveLayerWidget,
  LiveKitSession,
  LiveLayerTracker,
} from "@livelayer/sdk";

// Custom element auto-registers when imported
```

Works with Vite, Rollup, Webpack 5, esbuild, etc.

**CJS:**

```ts title="app.cjs"
const { LiveKitSession } = require("@livelayer/sdk");
```

For older Node builds (rare in browser-targeting code).

**UMD / Script tag:**

```html title="page.html"
<script src="https://livelayer.app/v1.js"></script>
<script>
  // Same exports available on window.LiveLayer
  const session = new LiveLayer.LiveKitSession({
    agentId: "agt_abc123",
    baseUrl: "https://livelayer.app",
  });
</script>
```

The same bundle that powers the [Script tag](/docs/develop/script-tag/overview) path. ~150 KB gzipped including `livekit-client`.

## Three quick examples

### Vue 3

```vue title="App.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 title="App.svelte"
<script>
  import "@livelayer/sdk";
</script>

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

### Vanilla JS — programmatic session

```ts title="custom-app.ts"
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();
```

You're now responsible for rendering the avatar (use `session.audioElement` and `session.videoElement` once they're available) and wiring the mic.

## Read next

- [`<livelayer-widget>` reference](/docs/develop/npm/sdk/livelayer-widget) — full custom-element API
- [`LiveKitSession` reference](/docs/develop/npm/sdk/livekit-session) — programmatic session class
- [`LiveLayerTracker` reference](/docs/develop/npm/sdk/tracker) — visitor identity and auto-tracking
- [TypeScript types](/docs/develop/npm/types) — shared types