A conversational AI widget wrapper for ElevenLabs, built with Preact and TypeScript. This library provides a customizable web component for integrating conversational AI into web applications.
- 🎙️ Voice-enabled conversational AI widget
- 🎨 Customizable UI with Tailwind CSS
- 📱 Responsive design with multiple trigger styles
- 🌐 Multi-language support
- 🔧 Web Component architecture for easy integration
- ⚡ Built with Preact for optimal performance
- 🎯 TypeScript support with full type definitions
npm install @askbenny/convai-widget-core<!DOCTYPE html>
<html>
<head>
<title>ConvAI Widget Demo</title>
</head>
<body>
<script type="module">
import { registerWidget } from '@askbenny/convai-widget-core';
// Register the web component
registerWidget();
// Create and configure the widget
const widget = document.createElement('askbenny-convai');
widget.setAttribute('agent-id', 'your-agent-id');
document.body.appendChild(widget);
</script>
</body>
</html>import { registerWidget } from '@askbenny/convai-widget-core';
// Register with a custom tag name
registerWidget('my-convai-widget');The widget accepts various attributes for customization:
<askbenny-convai
agent-id="your-agent-id"
server-location="us"
language="en"
trigger-style="compact"
></askbenny-convai>- Node.js 18+
- pnpm (recommended) or npm
# Clone the repository
git clone https://github.com/askbenny/convai-widget-core.git
cd widget-v2
# Install dependencies
pnpm install
# Start development server
pnpm devpnpm dev- Start development serverpnpm build- Build for productionpnpm test- Run tests with Vitestpnpm lint- Run all linting checkspnpm lint:ts- TypeScript type checkingpnpm lint:es- ESLint checkingpnpm lint:prettier- Prettier formatting check
The project uses Vitest with Playwright for browser testing:
pnpm testTests run in a real browser environment with microphone permissions for comprehensive testing of voice features.
src/
├── components/ # Reusable UI components
├── contexts/ # React/Preact contexts for state management
├── orb/ # 3D orb visualization
├── styles/ # CSS and styling
├── types/ # TypeScript type definitions
├── utils/ # Utility functions and hooks
├── widget/ # Main widget components
├── index.ts # Main entry point
└── index.dev.tsx # Development entry point
- Preact: Lightweight React alternative for optimal bundle size
- Web Components: Shadow DOM encapsulation for style isolation
- TypeScript: Full type safety and developer experience
- Tailwind CSS: Utility-first CSS framework
- Vite: Fast build tool and development server
- Vitest: Fast unit and browser testing
- Fork the repository
- Create a feature branch:
git checkout -b feature/new-feature - Make your changes and add tests
- Run linting:
pnpm lint - Run tests:
pnpm test - Commit your changes:
git commit -m 'Add new feature' - Push to the branch:
git push origin feature/new-feature - Submit a pull request
MIT © ElevenLabs
For issues and questions, please visit our GitHub repository.