@hoosei/voxweave-react

Voxweave React

Voxweave is a customizable and interactive voice UI component for React applications. It provides a visually appealing interface for voice interactions, perfect for AI assistants, voice commands, or any audio-based user interface.

Features

• 🎨 Customizable appearance and animations
• 🌓 Light and dark mode support
• 📱 Responsive design
• 🎵 Real-time audio visualization
• ⚡️ Optimized performance
• 🔒 Type-safe
• 🎮 Multiple positioning options

Installation

You can install Voxweave using npm, pnpm, or bun:

# Using npm
npm install @hoosei/voxweave-react

# Using pnpm
pnpm add @hoosei/voxweave-react

# Using bun
bun add @hoosei/voxweave-react

Quick Start

1. First, wrap your application with the VoxweaveProvider:

import { VoxweaveProvider } from '@hoosei/voxweave-react'

function App() {
  return (
    <VoxweaveProvider 
      config={{
        licenseKey: process.env.NEXT_PUBLIC_VOXWEAVE_LICENSE_KEY!,
        apiUrl: process.env.NEXT_PUBLIC_VOXWEAVE_API_URL!,
        development: process.env.NODE_ENV === 'development'
      }}
    >
      <YourApp />
    </VoxweaveProvider>
  )
}

2. Then use the Voxweave component in your application:

import { Voxweave } from '@hoosei/voxweave-react'

function YourComponent() {
  return (
    <Voxweave
      size={64}
      darkMode={false}
      position="bottom-right"
      isVertical={false}
      containerStyle="bottom"
      onStartCall={() => {
        // Handle call start
      }}
      onClose={() => {
        // Handle close
      }}
    />
  )
}

Configuration Options

VoxweaveProvider Props

Prop	Type	Description
config.licenseKey	string	Your Voxweave license key
config.apiUrl	string	Voxweave API endpoint
config.development	boolean	Enable development mode

Voxweave Component Props

Prop	Type	Default	Description
size	number	64	Size of the component in pixels
darkMode	boolean	false	Enable dark mode
position	'left' | 'right' | 'bottom-left' | 'bottom-right'	'bottom-right'	Position of the component
isVertical	boolean	false	Enable vertical layout
containerStyle	'bottom' | 'center'	'bottom'	Container positioning style
isVisible	boolean	true	Control component visibility
isAnimated	boolean	true	Enable animations
backgroundColor	string	-	Custom background color
disableBackground	boolean	false	Remove background
disableShadow	boolean	false	Remove shadow effect
onStartCall	() => void	-	Callback when call starts
onClose	() => void	-	Callback when component closes

Styling

Voxweave uses Tailwind CSS with a custom prefix to avoid conflicts. You can override styles using the className prop:

<Voxweave
  className="custom-class"
  // other props...
/>

Development

For local development, the provider automatically uses development credentials:

<VoxweaveProvider
  config={{
    development: true, // Uses development credentials
    apiUrl: 'http://localhost:4200/api'
  }}
>
  {/* Your app */}
</VoxweaveProvider>

License

This project is proprietary software owned by Hoosei Limited. See the LICENSE.md file in the root directory for details.

Hoosei® is a registered trademark, No. UK00003747539 of Hoosei Limited, 10 Upper Grosvenor Road, Tunbridge Wells, England, TN1 2EP. Registered England & Wales Company No. 13834192.

For licensing inquiries or permissions, please contact Hoosei Limited.

Importing

You can import the Voxweave components and functions as follows:

```javascript // Client-side imports import { Voxweave, useVoxweaveAuth } from ' @hoosei/voxweave-react';

// Server-side imports import { vox } from ' @hoosei/voxweave-react/server'; ```

For TypeScript users, you can also import types:

```typescript import type { AuthStatus, VoxweaveAuthOptions } from ' @hoosei/voxweave-react/server'; ```