🤖 Cuekit.AI

AI-Powered Voice Manager SDK for React Native

Cuekit.AI helps you integrate lifelike voice assistants into your React Native apps using Claude 3.5 (LLM) and ElevenLabs (TTS/Voice Cloning).

✨ Features

• 🎙️ Voice Input Support — Powered by react-native-voice, with multi-language support (e.g., Hindi, English).
• 🧠 Intent Mapping — Easily configure user voice actions to navigation or component interactions.
• 📱 Custom UI Components — Plug & play components like MicButton.
• 🧩 Seamless Integration — Built to work with any React Navigation setup.

📦 Installation

npm i cuekit-ai

Peer Dependencies for help us to perfom actions and sound

npm install @react-native-community/netinfo react-native-fs react-native-modal react-native-sound react-native-tts @react-native-voice/voice

🔗 Related Links

• 🌐 Cuekit.AI Dashboard
  https://qubekit-dashboard.vercel.app/

• 🛠️ QubeKit CLI (npm package)
  https://www.npmjs.com/package/cuekit-cli

⚙️ Setup

Permission for accessing microphone and speech recognition using React Native Voice library.

• For iOS - info.plist

<key>NSMicrophoneUsageDescription</key>
<string>Description of why you require the use of the microphone</string>
<key>NSSpeechRecognitionUsageDescription</key>
<string>Description of why you require the use of the speech recognition</string>

see more details ➡️ react-native-voice

🔧 Configuration

After installing this SDK, wrap your app with the CuekitProvider:

import { CuekitProvider } from "cuekit-ai";
import { apiKey, appId } from "./qubekit.config.json";

<CuekitProvider 
	apiKey={apiKey}
	appId={appId}
>
  <NavigationContainer />
</CuekitProvider>

🔁 Setup Navigation Listeners for Cuekit.AI

To help Cuekit.AI understand your app's navigation flow (especially for voice-based commands), you need to pass your navigation reference correctly.

🛠️ Always Use .current

Whether you are using useRef() or createNavigationContainerRef(), always pass the .current value to the setNavigationRef function.

This ensures consistent behavior when Cuekit.AI tries to perform navigation actions.

Passing the correct navigation object ensures seamless and smooth navigation via voice commands powered by Cuekit.AI.

import { onStateChange, setNavigationRef } from "cuekit-ai";
import { NavigationContainer , createNavigationContainerRef } from "@react-navigation/native";

const navRef = createNavigationContainerRef();

const handleReady = () => {
    if (!navRef.current) return;

    // your own logic for other onReadyEvent()
    // ...
    // EG. console.log('navigation ready event log')

    // MUST-REQUIRED SETUP PART
    if (navRef.current) {
      setNavigationRef(navRef.current);
    }
	
    const unsubscribe = navRef.current?.addListener("state", () => {
      if (navRef.current) {
        setNavigationRef(navRef.current);
      }
    });

    return unsubscribe;
  };

return (
  <NavigationContainer
    ref={navRef}
    onReady={handleReady}
    onStateChange={onStateChange}
  >
    <RootStackScreen />
  </NavigationContainer>
);

🎙️ MicButton Component

Use the built-in customizable Mic button for voice input:

import { MicButton } from "cuekit-ai";

<MicButton
  imageSource={ImagePath.mic}
  imageStyle={{ width: 50, height: 50 }}
  buttonSize={60}
  bottomSpace={20}
  screenPosition="bottom-center"
  hasText={true}
  text="Tap to speak"
  textStyle={{ color: '#000', fontSize: 14 }}
  primaryColor="'#000'"
/>

MicButton Props:

| Prop | Type | Description | |----------------|------------------------|---------------------------------| | hasText | boolean | Show/hide label text | | text | string | Custom label | | textStyle | TextStyle | Style for label text | | imageSource | ImageSourcePropType | Mic icon source | | imageStyle | ImageStyle | Mic icon styling | | buttonStyle | ViewStyle | Mic button styling | | screenPosition | "bottom-center" / "bottom-left" / "bottom-right" | Mic placement | | bottomSpace | number | Space from bottom | | buttonSize | number | Size of mic button | | primaryColor | string | Color for theme |

📦 Peer Dependencies

Make sure the following dependencies are installed:

NOTE:- you must have latest "@react-native-community/netinfo" for seamless network request with no-internet detection,

{
  "@react-native-community/netinfo": "*",
  "@react-navigation/native": ">=6",
  "react-native-device-info": "^14.0.4",
  "react-native-fs": "^2.20.0",
  "react-native-modal": "^14.0.0-rc.1",
  "react-native-sound": "^0.11.2",
  "react-native-tts": "^4.1.1",
  "@react-native-voice/voice": "^3.2.4"
}

⚠️ Troubleshoot

🎧 Sound Package Issue (iOS & Android)

If you're facing issues with the react-native-sound package on iOS or Android, you can apply the following patches to resolve them.

🛠️ Common Problem

The default [email protected] has compatibility or runtime issues in the latest React Native versions on both platforms.

Issue Thread - (Official)

📄 Patch File (GitHub):
react-native-sound+0.12.0.patch

✅ How to Apply:

1. Make sure you have patch-package installed in your project:

npm install patch-package
 // or
 yarn add patch-package

2. Download or copy the patch file above into your project's patches/ folder.

3. Add the following script in your package.json (if not already there):

   "scripts": {
     "postinstall": "patch-package"
   }

4. Run install to trigger the patch:

 npm install
 // or
 yarn install

5. Done ✅ Just rerun your iOS app:

 npx react-native run-ios 
 //or 
 npx react-native-run-android

// or open in Xcode or Android Studio and run

🎉 Hurrey! The iOS and Android sound issue should now be resolved.

🪪 License

MIT License
© 2025 Cuekit.AI Pvt. Ltd.