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

# Basic Usage

> Install, setup, and deploy the Anam AI JavaScript SDK

## Installation

Install the SDK in your project using npm:

```bash theme={"system"}
npm install @anam-ai/js-sdk
```

## Browser Requirements

The Anam SDK uses WebRTC for real-time video and audio streaming. Ensure your target browsers support:

* WebRTC (Chrome 56+, Firefox 44+, Safari 11+, Edge 79+)
* MediaDevices API for microphone access

## HTML Setup

This example requires a video element to display the persona:

```html theme={"system"}
<video id="video-element-id" autoplay playsinline></video>
```

<Note>
  `autoplay` starts the stream when the page loads. `playsinline` prevents
  fullscreen mode on mobile devices.
</Note>

## Basic Usage

To keep your API key secure, exchange it for a short-lived session token on your server before initializing the client. See [Usage in Production](/javascript-sdk/production) for detailed session token information.

### Initialize the Client

Use `createClient` with your session token:

```typescript theme={"system"}
import { createClient, AnamEvent } from "@anam-ai/js-sdk";

const anamClient = createClient(sessionToken);
```

### Start Streaming

Stream the persona to your video element:

```typescript theme={"system"}
try {
  await anamClient.streamToVideoElement("video-element-id");
} catch (error) {
  console.error("Failed to start stream:", error);
}
```

### Listen for Events

Handle connection lifecycle events:

```typescript theme={"system"}
import { AnamEvent, ConnectionClosedCode } from "@anam-ai/js-sdk";

anamClient.addListener(AnamEvent.CONNECTION_ESTABLISHED, () => {
  console.log("Connected to persona");
});

anamClient.addListener(AnamEvent.CONNECTION_CLOSED, (code: ConnectionClosedCode) => {
  console.log("Connection closed:", code);
});
```

## Stopping a Stream

To stop an active session and release resources:

```typescript theme={"system"}
await anamClient.stopStreaming();
```

## Client Options

The `createClient` function accepts an optional second parameter for configuration:

```typescript theme={"system"}
import { createClient } from "@anam-ai/js-sdk";

const anamClient = createClient(sessionToken, {
  disableInputAudio: false,      // Set true to disable microphone
  audioDeviceId: "device-id",    // Specify audio input device
  voiceDetection: {
    endOfSpeechSensitivity: 0.5, // 0-1, higher = more sensitive
  },
  iceServers: [],                // Custom ICE/TURN servers for WebRTC
  metrics: {
    disableClientMetrics: false, // Disable telemetry for air-gapped environments
  },
});
```

## Troubleshooting

| Issue                | Solution                                                                        |
| -------------------- | ------------------------------------------------------------------------------- |
| Video not appearing  | Verify the video element ID matches and has `autoplay playsinline` attributes   |
| No microphone access | Ensure HTTPS (required for getUserMedia) and user has granted permission        |
| Connection fails     | Check browser console for errors; verify session token is valid and not expired |

## Next Steps

<CardGroup cols={2}>
  <Card title="Talk Commands" icon="message" href="/javascript-sdk/reference/talk-commands">
    Control persona output using talk commands
  </Card>

  <Card title="Audio Control" icon="microphone" href="/javascript-sdk/reference/audio-control">
    Control audio input and streaming behavior
  </Card>

  <Card title="User Messages" icon="user" href="/javascript-sdk/reference/user-messages">
    Send messages programmatically on behalf of the user
  </Card>

  <Card title="Events" icon="bolt" href="/javascript-sdk/reference/event-types">
    Handle connection and conversation events
  </Card>
</CardGroup>