@keyframelabs/elements 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +76 -0
- package/package.json +26 -0
package/README.md
ADDED
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
# @keyframelabs/elements
|
|
2
|
+
|
|
3
|
+
Headless vanilla TypeScript library for embedding Persona avatars. Handles video/audio elements, session wiring, microphone input, and voice agent connections.
|
|
4
|
+
|
|
5
|
+
No UI included — that's your job (or use `@keyframelabs/components-react`).
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
pnpm add @keyframelabs/elements
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Usage
|
|
14
|
+
|
|
15
|
+
```ts
|
|
16
|
+
import { PersonaEmbed } from '@keyframelabs/elements';
|
|
17
|
+
|
|
18
|
+
const embed = new PersonaEmbed({
|
|
19
|
+
container: document.getElementById('avatar')!,
|
|
20
|
+
publishableKey: 'kfl_pk_live_...',
|
|
21
|
+
videoFit: 'contain', // 'cover' (default) or 'contain'
|
|
22
|
+
onStateChange: (status) => console.log('Status:', status),
|
|
23
|
+
onAgentStateChange: (state) => console.log('Agent:', state),
|
|
24
|
+
onDisconnect: () => console.log('Disconnected'),
|
|
25
|
+
onError: (err) => console.error(err),
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
await embed.connect();
|
|
29
|
+
|
|
30
|
+
// Later...
|
|
31
|
+
embed.toggleMute();
|
|
32
|
+
embed.disconnect();
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## API
|
|
36
|
+
|
|
37
|
+
Create your embed config at platform.keyframelabs.com to get a publishable key.
|
|
38
|
+
|
|
39
|
+
### `PersonaEmbed`
|
|
40
|
+
|
|
41
|
+
#### Constructor Options
|
|
42
|
+
|
|
43
|
+
| Option | Type | Default | Description |
|
|
44
|
+
|--------|------|---------|-------------|
|
|
45
|
+
| `container` | `HTMLElement` | required | Target container for video/audio elements |
|
|
46
|
+
| `publishableKey` | `string` | required | Your embed config publishable key |
|
|
47
|
+
| `apiBaseUrl` | `string` | production | API endpoint |
|
|
48
|
+
| `videoFit` | `'cover' \| 'contain'` | `'cover'` | Video scaling mode |
|
|
49
|
+
| `onStateChange` | `(status: EmbedStatus) => void` | - | Status callback |
|
|
50
|
+
| `onAgentStateChange` | `(state: AgentState) => void` | - | Agent state callback |
|
|
51
|
+
| `onDisconnect` | `() => void` | - | Disconnect callback |
|
|
52
|
+
| `onError` | `(err: Error) => void` | - | Error callback |
|
|
53
|
+
|
|
54
|
+
#### Properties
|
|
55
|
+
|
|
56
|
+
| Property | Type | Description |
|
|
57
|
+
|----------|------|-------------|
|
|
58
|
+
| `status` | `EmbedStatus` | `'connecting' \| 'connected' \| 'error' \| 'disconnected'` |
|
|
59
|
+
| `agentState` | `AgentState` | `'idle' \| 'listening' \| 'thinking' \| 'speaking'` |
|
|
60
|
+
| `isMuted` | `boolean` | Microphone mute state |
|
|
61
|
+
| `videoElement` | `HTMLVideoElement` | The video element |
|
|
62
|
+
| `audioElement` | `HTMLAudioElement` | The audio element |
|
|
63
|
+
|
|
64
|
+
#### Methods
|
|
65
|
+
|
|
66
|
+
| Method | Description |
|
|
67
|
+
|--------|-------------|
|
|
68
|
+
| `connect()` | Connect to session (async) |
|
|
69
|
+
| `disconnect()` | Disconnect and cleanup |
|
|
70
|
+
| `toggleMute()` | Toggle microphone mute |
|
|
71
|
+
|
|
72
|
+
## Voice Agents
|
|
73
|
+
|
|
74
|
+
Supports Gemini Live, ElevenLabs, and Cartesia agents. The agent type is determined by your embed config.
|
|
75
|
+
|
|
76
|
+
If you need support for new voice agent platforms built in, drop us a line at support@keyframelabs.com
|
package/package.json
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@keyframelabs/elements",
|
|
3
|
+
"version": "0.0.1",
|
|
4
|
+
"main": "dist/index.js",
|
|
5
|
+
"module": "dist/index.mjs",
|
|
6
|
+
"types": "dist/index.d.ts",
|
|
7
|
+
"files": [
|
|
8
|
+
"dist"
|
|
9
|
+
],
|
|
10
|
+
"publishConfig": {
|
|
11
|
+
"access": "public"
|
|
12
|
+
},
|
|
13
|
+
"dependencies": {
|
|
14
|
+
"@keyframelabs/sdk": "0.1.0"
|
|
15
|
+
},
|
|
16
|
+
"devDependencies": {
|
|
17
|
+
"@types/node": "^25.0.9",
|
|
18
|
+
"typescript": "^5.9.3",
|
|
19
|
+
"vite": "^7.3.1",
|
|
20
|
+
"vite-plugin-dts": "^4.5.4"
|
|
21
|
+
},
|
|
22
|
+
"scripts": {
|
|
23
|
+
"dev": "vite",
|
|
24
|
+
"build": "vite build"
|
|
25
|
+
}
|
|
26
|
+
}
|