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

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