OpenMic Voice Widget

A lightweight, embeddable React widget that enables voice conversations with AI bots powered by OpenMic and LiveKit.

Installation

NPM

npm install @openmic/voice-widget

CDN

<script src="https://unpkg.com/@openmic/voice-widget@latest/widget.js" async></script>
<link rel="stylesheet" href="https://unpkg.com/@openmic/voice-widget@latest/widget.css">

Headless API script (Vapi-style)

For teams that just want the voice call hooks without the UI, load the SDK script and start a call in code:

<script src="https://unpkg.com/openmic-voice-widget@latest/widget/openmic-sdk.js"></script>
<script>
  const sdk = new OpenMicSDK({ publicKey: 'your-public-key' });
  sdk.on('status', (s) => console.log('status:', s));
  sdk.on('call-start', () => console.log('call started'));
  sdk.on('call-end', () => console.log('call ended'));
  sdk.on('error', console.error);

  // Start a call with your assistant ID
  sdk.start('your-assistant-id');

  // Later, end the call:
  // sdk.end();
</script>

Quick Start

1. Include the Widget

Add the widget script and styles to your HTML:

<script src="https://unpkg.com/@openmic/voice-widget@latest/widget.js" async></script>
<link rel="stylesheet" href="https://unpkg.com/@openmic/voice-widget@latest/widget.css">

2. Add Widget Elements

Place widget elements where you want the voice call buttons to appear:

<openmic-widget 
    assistant-id="your-assistant-id"
    public-key="your-public-key">
</openmic-widget>

3. That's It!

The widget will automatically initialize when the page loads and create voice call interfaces in all elements.

Configuration

Configure the widget using HTML attributes:

<openmic-widget 
    assistant-id="your-assistant-id"
    public-key="your-public-key"
    theme="dark"
    position="top-right"
    title="Chat with AI"
    subtitle="Ask me anything!">
</openmic-widget>

Available Attributes

| Attribute | Description | Default Value | |-----------|-------------|---------------| | assistant-id | OpenMic Assistant ID | cmfnymh3a003810umpjy0c264 | | public-key | OpenMic Public Key | omic_9f84f9eda5156efa093ded903f18247bd9da | | theme | Widget theme (light or dark) | light | | position | Widget position (bottom-right, bottom-left, top-right, top-left) | bottom-right | | title | Widget title text | OpenMic Voice Call | | subtitle | Widget subtitle text | Start a voice conversation with our AI bot |

Examples

Basic Usage

<openmic-widget></openmic-widget>

Custom Assistant

<openmic-widget 
    assistant-id="your-assistant-id"
    public-key="your-public-key">
</openmic-widget>

Dark Theme

<openmic-widget theme="dark"></openmic-widget>

Custom Position

<openmic-widget position="top-left"></openmic-widget>

Multiple Widgets

<openmic-widget 
    assistant-id="assistant-1" 
    public-key="key-1"
    theme="light"
    position="bottom-right">
</openmic-widget>

<openmic-widget 
    assistant-id="assistant-2" 
    public-key="key-2"
    theme="dark"
    position="top-left">
</openmic-widget>

Browser Support

• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

API Requirements

The widget requires:

• OpenMic API access
• LiveKit WebRTC support
• Modern browser with microphone permissions

Development

To build the widget from source:

git clone https://github.com/your-org/client-sdk-openmic.git
cd client-sdk-openmic
npm install
npm run build:widget

License

MIT License - see LICENSE file for details.

Support

For issues and questions, please contact the OpenMic team at [email protected].