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.
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.
All components follow the same simple pattern: import the component and specify your agentid (required), along with any optional component-specific parameters.
npm install @iwy/live-widgets<!-- Example: Load the live-avatar component -->
<script src="https://unpkg.com/@iwy/live-widgets@latest/dist/live-avatar.min.js"></script><!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Welcome</h1>
<!-- Use the component with required agentid attribute -->
<live-avatar agentid="your-agent-id"></live-avatar>
<!-- Load the component script -->
<script src="https://unpkg.com/@iwy/live-widgets@latest/dist/live-avatar.min.js"></script>
</body>
</html>import '@iwy/live-widgets';
function App() {
return (
<div>
<live-avatar agentid="your-agent-id">
</live-avatar>
</div>
);
}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.
- 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 |
|---|---|
| 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)
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
# Clone repository
git clone https://github.com/iwy-ai/live-widgets.git
cd live-widgets
# Install dependencies
npm install
# Build all components
npm run buildMIT License - see LICENSE file for details.
For support and questions, visit iwy.ai/contact
Built by iwy.ai with: