@fractn/react-native-ai-sdk

Fractn AI Voice Assistant SDK for React Native

Add voice-driven AI features to your React Native app, with built-in support for bank transfers, voice transcription, account validation, and AI-powered interactions.

✨ Features & Benefits

• Voice-Powered Transfers
  Accept spoken commands like:
  “Transfer ₦5,000 to GTBank account 0123456789.”
• AI-Powered Understanding
  Uses advanced AI models for natural language understanding.
• Bank Account Resolution
  Integrates seamlessly with your resolveAccountUrl endpoint.
• Built-In Visual Feedback
  Microphone animations, listening states, and response indicators included.

📦 Installation

With npm:

npm install @fractn/react-native-ai-sdk

Or using yarn:

yarn add @fractn/react-native-ai-sdk

📌 Peer Dependencies

Ensure your project includes:

yarn add react-native-linear-gradient lottie-react-native @appcitor/react-native-voice-to-text

For React Native CLI users:

cd ios && pod install && cd ..

🗝️ Getting Your API Key

Register and generate your Fractn API key here:
https://partners.fracnai.com

🚀 Quick Usage

import React, { useState, useRef } from 'react';
import { View } from 'react-native';
import FractnAi from '@fractn/react-native-ai-sdk';

const banks = [
  { code: '044', name: 'Access Bank' },
  { code: '011', name: 'First Bank' },
  { code: '058', name: 'GTBank' },
];

export default function App() {
  const [userBalance, setUserBalance] = useState({ available_balance: 25000 });
  const [recentList, setRecentList] = useState([]);
  const modalVisibleRef = useRef();

  return (
    <View style={{ flex: 1 }}>
      <FractnAi
        BANKS={banks}
        beneficiaryList={recentList}
        userDetails={{
          last_name: 'Doe',
          first_name: 'John',
        }}
        firstWord={`Hello John, how can I help you today.`}
        apiKey="YOUR_FRACTN_API_KEY"
        accountID="1"
        debug={false}
        userBalance={`${userBalance?.available_balance}`}
        resolveAccountUrlAPIKEY="YOUR_API_KEY"
        resolveAccountUrl="https://api.yourbank.com/tranzactions/resolve"
        onCompleteFinalData={(data) => {
          console.log('Transfer details:', data); 
        }}
        onClose={() => {
          console.log('Fractn modal closed');
        }}
      />
    </View>
  );
}

🛠️ Props Overview

| Prop | Type | Required | Description | | ----------------------- | --------------------- | -------- | ---------------------------------------------------------- | | BANKS | Array<{code, name}> | ✅ | List of supported bank codes and names. | | beneficiaryList | Array | ❌ | Recent beneficiaries to assist with faster transfers. | | userDetails | Object | ✅ | User info: { first_name, last_name }. | | firstWord | string | ❌ | First greeting phrase displayed to the user. | | apiKey | string | ✅ | Your Fractn AI API key. | | accountID | string | ✅ | Account ID tied to your Fractn integration. | | debug | boolean | ❌ | Enable debug mode (default: false). | | userBalance | string | ❌ | Pass user's available balance for contextual responses. | | resolveAccountUrl | string | ✅ | API endpoint for resolving bank accounts. | | resolveAccountUrlAPIKEY | string | ✅ | Auth token for the account resolution endpoint. | | onCompleteFinalData | function | ✅ | Callback triggered with structured transfer details. | | onClose | function | ❌ | Callback when the Fractn AI modal is closed. |

🔄 How It Works

1. User Interaction → User taps the mic to start speaking.
2. Voice Transcription → SDK converts speech to text using built-in voice engine.
3. AI Processing → Text is processed via Fractn AI for intent and entity extraction.
4. Bank Account Validation → Resolves bank details using your provided API.
5. Data Returned → onCompleteFinalData gives you structured transfer details.

🔐 Permissions

Microphone access is required.

For iOS, add this to your Info.plist:

<key>NSMicrophoneUsageDescription</key>
<string>Required for voice commands to function.</string>

📄 License

MIT © 2025 Fractn