npm package: @madaa-dev/avatar-sdk
Description: CDN SDK for embedding Techanzy Avatar AI streams with WebRTC
Author: Techanzy
Latest version: 1.0.0

# @madaa-dev/avatar-sdk

CDN-distributable SDK for embedding Techanzy Avatar AI streams in any website.

## Installation

### CDN (Recommended)

```html
<script src="https://cdn.jsdelivr.net/npm/@madaa-dev/avatar-sdk@latest/dist/avatar-sdk.js"></script>
```

### NPM

```bash
npm install @madaa-dev/avatar-sdk
```

## Quick Start

```html
<!DOCTYPE html>
<html>
<head>
  <title>Avatar SDK Example</title>
</head>
<body>
  <div id="avatar-container"></div>

  <script src="https://cdn.jsdelivr.net/npm/@madaa-dev/avatar-sdk@latest/dist/avatar-sdk.js"></script>
  <script>
    const sdk = new AvatarSDK({
      apiKey: 'your-api-key',
      backendUrl: 'https://api.techanzy.com', // optional
    });

    sdk.embed({
      containerId: 'avatar-container',
      avatarId: 'your-avatar-uuid',
      autoStart: true,
      onTranscription: (data) => console.log('User:', data.text),
      onAIResponse: (data) => console.log('AI:', data.text),
    });
  </script>
</body>
</html>
```

## API Reference

### Constructor

```javascript
const sdk = new AvatarSDK({
  apiKey: 'required',           // Your API key
  backendUrl: 'optional',        // Backend URL (default: https://api.techanzy.com)
  logLevel: 'warn',              // 'debug' | 'info' | 'warn' | 'error'
  autoReconnect: true,           // Auto-reconnect WebSocket
});
```

### Methods

#### `embed(options)`

Embed avatar in a container element.

```javascript
sdk.embed({
  containerId: 'element-id',     // Required: ID of container element
  avatarId: 'uuid',              // Required: Avatar UUID
  autoStart: false,              // Auto-start session
  showControls: true,            // Show start/stop controls
  showTranscript: true,          // Show transcription display
  theme: {                       // Theme customization
    primaryColor: '#007bff',
    borderRadius: '8px',
  },
  onReady: () => {},            // Callback when ready
  onTranscription: (data) => {}, // Callback for transcriptions
  onAIResponse: (data) => {},    // Callback for AI responses
  onError: (error) => {},       // Callback for errors
});
```

#### `start()`

Start the avatar session.

```javascript
await sdk.start();
```

#### `stop()`

Stop the avatar session.

```javascript
await sdk.stop();
```

#### `destroy()`

Destroy SDK instance and cleanup.

```javascript
sdk.destroy();
```

### Events

```javascript
sdk.on('transcription', (data) => {
  console.log('Transcription:', data.text);
});

sdk.on('ai_response', (data) => {
  console.log('AI Response:', data.text);
});

sdk.on('session_started', (sessionId) => {
  console.log('Session started:', sessionId);
});

sdk.on('session_ended', () => {
  console.log('Session ended');
});

sdk.on('error', (error) => {
  console.error('Error:', error);
});
```

## Features

- ✅ **WebRTC Streaming** - Real-time bidirectional audio/video
- ✅ **Real-time Transcriptions** - Live speech-to-text
- ✅ **AI Response Streaming** - Real-time AI messages
- ✅ **Built-in UI** - Video player, controls, transcript display
- ✅ **Event System** - Subscribe to all SDK events
- ✅ **Auto-reconnect** - Automatic WebSocket reconnection
- ✅ **Theme Customization** - Customize colors and styling

## Browser Support

- Chrome/Edge (latest)
- Firefox (latest)
- Safari (latest)

Requires:
- WebRTC support
- WebSocket support
- MediaDevices API

## License

MIT

## Repository

https://github.com/techanzy/anzyavatar-sdk