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

You can configure your agent (name, system instruction, voice) in the VOX Dashboard, and the widget will automatically use those settings:

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

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 | | 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