Package Exports

vox-ai-react
vox-ai-react/dist/index.esm.js
vox-ai-react/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vox-ai-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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