@iwy/live-widgets

Embeddable AI avatar and audio visualizer widgets for live conversations. This package allows you to easily embed interactive AI avatars and audio visualizations on any website with just a few lines of code.

Components

This package provides seven interactive components for Pipecat voice AI applications:

| Component | Description | Use Case |
|-----------|-------------|----------|
| live-avatar | Circular floating bubble in bottom-right corner | Non-intrusive avatar widget similar to chat bubbles |
| live-avatar-rectangular | Rectangular video container that fills parent div | Embedded video chat experience in your page layout |
| audio-visualizer | Audio-only WebGL plasma visualizer | Audio-first experiences without video streaming |
| headless | Framework-agnostic SDK for custom UI development | Build your own UI with full control over styling and behavior |
| iwy-corner-circular | Circular floating bubble with video streaming | Non-intrusive floating avatar with expandable controls |
| webrtc-live-avatar-http | Pure WebRTC widget with HTTP signaling | Simplified signaling without WebSocket dependency |
| webrtc-live-avatar-rectangular | Pure WebRTC widget with WebSocket signaling | Direct peer-to-peer connection without Pipecat/Daily.co |

Click any component name above to view detailed documentation, usage examples, and configuration options.

Quick Start

All components follow the same simple pattern: import the component and specify your agentid (required), along with any optional component-specific parameters.

$3

#### Via npm

``bash
npm install @iwy/live-widgets
`

#### Via CDN

`html


`

$3

`html








Welcome








`

$3

`tsx
import '@iwy/live-widgets';

function App() {
return (



);
}
`

Note: Each component may have additional optional attributes specific to its functionality. See the individual component documentation linked in the table above for complete configuration options.

Features

- Multiple Component Types - Floating bubble, rectangular container, audio visualizer, headless SDK, and pure WebRTC widgets
- Pipecat Integration - Built-in support for Pipecat Client SDK with Daily transport
- Easy Integration - Web components work with any framework (React, Vue, Angular, etc.)
- Responsive Design - Components adapt to their containers
- Real-time Audio - Microphone visualization and audio reactivity
- WebGL Effects - Hardware-accelerated plasma visualization
- Multi-language - Built-in English and Norwegian support
- Customizable - Configure endpoints, styling, and behavior

Browser Support

| Browser | Support |
|---------|---------|
| Chrome/Edge | ✅ Full support (60+) |
| Firefox | ✅ Full support (63+) |
| Safari | ✅ Full support (12+, iOS 11+) |

Requirements:
- WebRTC
- Web Audio API
- WebGL 1.0+ (for audio-visualizer)

Documentation

For detailed documentation on each component, see:

- Live Avatar - Floating bubble widget
- Live Avatar Rectangular - Rectangular container widget
- Audio Visualizer - Audio-only visualizer
- Headless SDK - Custom UI development SDK
- iwy-corner-circular - Circular floating bubble widget
- WebRTC HTTP - HTTP signaling WebRTC widget
- WebRTC Rectangular - WebSocket signaling WebRTC widget

Development

`bash


Clone repository

git clone https://github.com/iwy-ai/live-widgets.git
cd live-widgets

Install dependencies

npm install

Build all components

npm run build
``

License

MIT License - see LICENSE file for details.

Links

- Website
- Issues
- Documentation

Support

For support and questions, visit iwy.ai/contact

Credits

Built by iwy.ai with:
- Pipecat
- Three.js
- Daily.co