@revrag_ai/react-native-onwid v1.0.3

@revrag_ai/react-native-onwid

A powerful Voice Agent SDK for React Native that enables AI-powered voice communication with real-time speech processing. Built with LiveKit for seamless voice interactions.

🚀 Features

• Real-time Voice Communication: High-quality voice chat powered by LiveKit
• AI Voice Agent Integration: Seamless integration with AI voice assistants
• Cross-platform Support: Works on both iOS and Android
• TypeScript Support: Full TypeScript definitions included
• Event-driven Architecture: Flexible event system for custom integrations
• Secure API Communication: Protected API calls with automatic initialization
• Easy Integration: Simple hooks and components for quick setup

📦 Installation

npm install @revrag_ai/react-native-onwid
# or
yarn add @revrag_ai/react-native-onwid

Peer Dependencies

Make sure you have the following peer dependencies installed:

npm install @livekit/react-native @livekit/react-native-webrtc @react-native-async-storage/async-storage lottie-react-native react-native-gesture-handler react-native-linear-gradient react-native-reanimated react-native-safe-area-context

🛠️ Setup

iOS Setup

Add the following to your ios/Podfile:

pod 'RNFS', :path => '../node_modules/react-native-fs'

Android Setup

Add the following permissions to your android/app/src/main/AndroidManifest.xml:

<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

🎯 Quick Start

1. Initialize the SDK

import { useInitialize } from '@revrag_ai/react-native-onwid';

function App() {
  useInitialize({
    apiKey: 'your-api-key',
    onwidUrl: 'https://your-onwid-server.com',
    metadata: {
      config: {
        // Your configuration
      }
    }
  });

  return (
    // Your app content
  );
}

2. Use the Voice Agent

import { useVoiceAgent } from '@revrag_ai/react-native-onwid';

function VoiceComponent() {
  const {
    initializeVoiceAgent,
    endCall,
    muteMic,
    unmuteMic,
    isMicMuted,
    connectionState,
    isLoading,
    error
  } = useVoiceAgent();

  const startVoiceCall = async () => {
    try {
      await initializeVoiceAgent();
    } catch (error) {
      console.error('Failed to start voice call:', error);
    }
  };

  return (
    <View>
      <Button title="Start Voice Call" onPress={startVoiceCall} />
      <Button title="End Call" onPress={endCall} />
      <Button 
        title={isMicMuted ? "Unmute" : "Mute"} 
        onPress={isMicMuted ? unmuteMic : muteMic} 
      />
      <Text>Status: {connectionState}</Text>
      {isLoading && <Text>Loading...</Text>}
      {error && <Text>Error: {error}</Text>}
    </View>
  );
}

3. Handle Events

import { onwid, EventKeys } from '@revrag_ai/react-native-onwid';

// Send user data
await onwid.Event(EventKeys.USER_DATA, {
  app_user_id: 'user123',
  name: 'John Doe',
  preferences: {
    language: 'en'
  }
});

// Send screen state
await onwid.Event(EventKeys.SCREEN_STATE, {
  screen: 'home',
  timestamp: Date.now()
});

4. Use the OnWid Button Component

import { OnwidButton } from '@revrag_ai/react-native-onwid';

function MyComponent() {
  return (
    <View>
      <OnwidButton />
    </View>
  );
}

📚 API Reference

Hooks

useInitialize(props: UseInitializeProps)

Initializes the OnWid SDK with your configuration.

Props:

• apiKey: string - Your OnWid API key
• onwidUrl: string - Your OnWid server URL
• metadata?: object - Optional metadata configuration

useVoiceAgent(): UseVoiceAgentReturn

Provides voice agent functionality.

Returns:

• initializeVoiceAgent: () => Promise<void> - Start voice agent
• endCall: () => Promise<void> - End the voice call
• muteMic: () => void - Mute microphone
• unmuteMic: () => void - Unmute microphone
• isMicMuted: boolean - Microphone mute state
• connectionState: ConnectionState - Current connection state
• isLoading: boolean - Loading state
• error: string | null - Error message if any

Components

OnwidButton

A customizable button component with built-in voice agent functionality.

Classes

APIService

Singleton service for API communication.

import { APIService } from '@revrag_ai/react-native-onwid';

const apiService = APIService.getInstance();
await apiService.initialize();

Events

EventKeys

Available event types:

• USER_DATA - User information events
• SCREEN_STATE - Screen state events

🔒 Security

The OnWid SDK includes built-in security features:

• Automatic API key management
• Secure token handling
• Protected API endpoints
• Integrity checks

🤝 Contributing

We welcome contributions! Please see our Contributing Guide for details.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🆘 Support

• 📧 Email: contact@revrag.ai
• 🐛 Issues: GitHub Issues
• 📖 Documentation: Integration Guide

🏷️ Version History

1.0.3

• Enhanced APIService with singleton pattern
• Improved error handling and initialization
• Better TypeScript support
• Fixed voice component compatibility

1.0.2

• Initial stable release
• Core voice agent functionality
• Event system implementation

Made with ❤️ by RevRag AI