vox-ai-react

Official React component for VOX AI Chat Widget.

Installation

npm install vox-ai-react
# or
yarn add vox-ai-react
# or
pnpm add vox-ai-react

Quick Start

import { VoxChat } from 'vox-ai-react';

function App() {
  return (
    <div>
      <h1>My Website</h1>
      <VoxChat 
        apiKey="vox_live_xxxxxxxx" 
        geminiApiKey="your-gemini-api-key"
        apiUrl="https://voxai.zeabur.app"
      />
    </div>
  );
}

Using Server-Stored Configuration (Real-Time)

You can configure your agent (name, system instruction, voice, logo, colors, etc.) in the VOX Dashboard, and the widget will automatically use those settings. The widget polls for updates every 10 seconds, so changes you make in the dashboard appear in real-time on your website!

<VoxChat 
  apiKey="vox_live_xxxxxxxx" 
  geminiApiKey="your-gemini-api-key"
  apiUrl="https://voxai.zeabur.app"
  useServerConfig={true}  // Fetches config from your VOX account
/>

Custom Polling Interval

By default, the widget checks for configuration updates every 10 seconds. You can customize this:

<VoxChat 
  apiKey="vox_live_xxxxxxxx" 
  geminiApiKey="your-gemini-api-key"
  apiUrl="https://voxai.zeabur.app"
  useServerConfig={true}
  configPollInterval={5000}  // Check every 5 seconds
/>

What gets synced in real-time:

• Agent name
• System instructions
• Voice settings
• Custom logo
• Button colors
• Button size
• Border radius
• Widget position

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | apiKey | string | Required | Your VOX API key | | geminiApiKey | string | Required | Your Gemini API key (for voice) | | apiUrl | string | Required | VOX API server URL | | agentName | string | 'VOX-01' | Display name for the agent | | voiceName | string | 'Kore' | Voice name for voice chat | | systemInstruction | string | 'You are a helpful AI assistant.' | System instruction for the AI | | position | 'bottom-right' \| 'bottom-left' | 'bottom-right' | Widget position | | theme | 'dark' \| 'light' | 'dark' | Color theme | | buttonColor | string | Theme default | Custom button background color | | buttonSize | number | 56 | Button size in pixels | | borderRadius | number | 0 | Button border radius in pixels | | iconColor | string | Theme default | Custom icon color | | useServerConfig | boolean | false | Fetch agent config from server | | configPollInterval | number | 10000 | Config polling interval in ms (when useServerConfig is true) | | onOpen | () => void | - | Callback when chat opens | | onClose | () => void | - | Callback when chat closes |

Customization Examples

Custom Colors

<VoxChat 
  apiKey="vox_live_xxxxxxxx"
  geminiApiKey="your-gemini-api-key"
  apiUrl="https://voxai.zeabur.app"
  buttonColor="#6366f1"
  iconColor="#ffffff"
  borderRadius={24}
/>

Light Theme

<VoxChat 
  apiKey="vox_live_xxxxxxxx"
  geminiApiKey="your-gemini-api-key"
  apiUrl="https://voxai.zeabur.app"
  theme="light"
/>

With Callbacks

<VoxChat 
  apiKey="vox_live_xxxxxxxx"
  geminiApiKey="your-gemini-api-key"
  apiUrl="https://voxai.zeabur.app"
  onOpen={() => console.log('Chat opened')}
  onClose={() => console.log('Chat closed')}
/>

Get Your API Key

Visit the VOX Dashboard to get your API key and configure your agent.

License

MIT