Voni React Native SDK

The official React Native SDK for integrating Voni AI infrastructure into your mobile applications.

Installation

npm install @voniai/react-native
# or
yarn add @voniai/react-native

Features

• 🪝 useVoniChat Hook: A powerful React hook to manage chat state, messages, and API communication.
• 📱 Platform Agnostic: Works with any UI library (native components, React Native Paper, Tamagui, etc.).
• 🔒 Secure: Designed to work with Voni's Project ID system.

Quick Start

Basic Usage

import React from 'react';
import { View, TextInput, Button, FlatList, Text } from 'react-native';
import { useVoniChat } from '@voniai/react-native';

const ChatScreen = () => {
  const { messages, sendMessage, isLoading } = useVoniChat({
    projectId: 'YOUR_PROJECT_ID', // Get this from Voni Dashboard
  });
  const [text, setText] = React.useState('');

  const handleSend = async () => {
    await sendMessage(text);
    setText('');
  };

  return (
    <View style={{ flex: 1, padding: 20 }}>
      <FlatList
        data={messages}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item }) => (
          <Text style={{ 
            alignSelf: item.role === 'user' ? 'flex-end' : 'flex-start',
            color: item.role === 'user' ? 'blue' : 'black',
            marginBottom: 8
          }}>
            {item.content}
          </Text>
        )}
      />
      
      <View style={{ flexDirection: 'row', marginTop: 10 }}>
        <TextInput 
          value={text}
          onChangeText={setText}
          placeholder="Type a message..."
          style={{ flex: 1, borderWidth: 1, marginRight: 10, padding: 8, borderRadius: 5 }}
        />
        <Button title={isLoading ? "..." : "Send"} onPress={handleSend} disabled={isLoading} />
      </View>
    </View>
  );
};

API Reference

useVoniChat(config)

Parameters

• config.projectId (string): Your Voni Project ID.
• config.apiUrl (string, optional): Base URL for the API (default: https://api.voni.dev/api/v1).
• config.initialMessages (Message[], optional): Initial chat history.

Returns

• messages: Array of message objects { role: 'user' | 'assistant', content: string, timestamp: number }.
• sendMessage(text, appData?): Function to send a message. appData can contain arbitrary context.
• isLoading: Boolean indicating if a request is in progress.
• error: Error string if the last request failed.
• sessionId: The unique session ID for the current user instance.
• clearMessages: Function to reset the conversation.