🤖 react-native-smart-ai

The easiest way to add production-ready AI features to your React Native app.

✨ Features at a Glance

| Feature | Description | Main Hook | Component | | :--- | :--- | :--- | :--- | | 💬 AI Chat | Multi-turn chat with streaming support | useAIChat() | <AIChat /> | | 🎙️ Speech to Text | Record and transcribe audio with Whisper | useSpeechToText() | <VoiceRecorder /> | | 🔊 Text to Speech | High-quality TTS with various voices | useTextToSpeech() | — | | 🖼️ Image Analysis | Vision-powered image description | useImageAnalysis() | <ImageAnalyzer /> |

🚀 Quick Start

1. Installation

# npm
npm install react-native-smart-ai

# yarn
yarn add react-native-smart-ai

2. Optional Dependencies

Install only what you need:

# For Audio (Speech-to-Text, Text-to-Speech)
npx expo install expo-av

# For Images (Image Analysis)
npx expo install expo-image-picker

3. Simple Chat Example

import { AIChat } from 'react-native-ai-toolkit';

export default function App() {
  return (
    <AIChat
      config={{ apiKey: 'sk-...' }}
      title="My AI Assistant"
    />
  );
}

🛠 Configuration

All components and hooks use a shared config object:

const config = {
  apiKey: 'sk-...',         // Your OpenAI or Anthropic key
  provider: 'openai',       // 'openai', 'anthropic', or 'custom'
  model: 'gpt-4o',          // Default model to use
  baseURL: 'https://...',   // Optional: use for proxies
};

[!WARNING] Security First: Never hardcode your API key in a production app. Use a backend proxy or environment variables via a secure vault. See Security Best Practices.

📦 Components

<AIChat />

A ready-to-use chat interface with streaming and typing indicators.

<AIChat
  config={config}
  placeholder="Type a message..."
  theme={{
    primaryColor: '#6C63FF',
    borderRadius: 12,
  }}
  onMessageReceived={(msg) => console.log('AI said:', msg.content)}
/>

<VoiceRecorder />

A beautiful, animated button for recording and transcribing voice.

<VoiceRecorder
  config={config}
  onTranscript={(text) => console.log('Transcribed:', text)}
  showWaveform={true}
/>

<ImageAnalyzer />

Pick an image and get an AI description instantly.

<ImageAnalyzer
  config={config}
  onResult={(res) => console.log('Analysis:', res.description)}
/>

🪝 Hooks (Building Custom UI)

useAIChat

Control the chat logic entirely yourself.

const { messages, sendMessage, isLoading } = useAIChat(config);

useSpeechToText

Access audio levels and transcription status.

const { startRecording, stopRecording, transcript } = useSpeechToText(config);

useTextToSpeech

Convert text to audio with ease.

const { speak, isPlaying } = useTextToSpeech(config);
// speak('Hello world!');

🔐 Security Best Practices

1. Proxy Requests: Route your AI calls through your own backend to hide your API key.
2. Key Rotation: Regularly rotate your keys and use usage limits.
3. Environment Variables: Use expo-constants or react-native-config for local development.

🎓 Advanced Examples

Chat with System Prompt & Custom Renderer

import { AIChat } from 'react-native-ai-toolkit';

export default function AdvancedApp() {
  return (
    <AIChat
      config={{ apiKey: 'sk-...', model: 'gpt-4o' }}
      title="Tech Support Bot"
      systemPrompt="You are a helpful IT support assistant. Answer concisely."
      renderMessage={(msg) => (
        <MyCustomBubble isUser={msg.role === 'user'}>
          {msg.content}
        </MyCustomBubble>
      )}
    />
  );
}

Full Screen Voice Assistant

import { VoiceRecorder, useSpeechToText, useTextToSpeech } from 'react-native-ai-toolkit';
import { View, Text } from 'react-native';

export default function VoiceAssistant() {
  const config = { apiKey: 'sk-...' };
  const { speak } = useTextToSpeech(config);
  
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Tap to speak to your AI</Text>
      <VoiceRecorder
        config={config}
        onTranscript={(text) => {
          // Process text, then AI replies:
          speak(`You said: ${text}`);
        }}
      />
    </View>
  );
}

🛠 Troubleshooting & Common Issues

1. npm publish fails with 403 Forbidden

• Cause: Your npm account likely has Two-Factor Authentication (2FA) enabled.
• Fix: Run npm publish --access public --otp=YOUR_CODE (replace YOUR_CODE with the 6-digit code from your authenticator app). Alternatively, npm run release might prompt you for it interactively.

2. Cannot publish over previously published version

• Cause: You are trying to publish a version number (e.g., 1.0.0) that already exists on the registry.
• Fix: Increment the version field in your package.json (e.g., to 1.0.1) and run publish again.

3. ReferenceError: Property 'Buffer' doesn't exist

• Cause: React Native doesn't include NodeJS built-in modules like Buffer.
• Fix: Install the buffer package (npm install buffer) and add import { Buffer } from 'buffer'; global.Buffer = Buffer; at the top of your index.js or App.tsx.

4. Cannot find module 'expo-av' or expo-image-picker

• Cause: The toolkit uses these packages for voice and vision features, but they are optional peer dependencies.
• Fix: Run npx expo install expo-av expo-image-picker in your project.

📱 Running the Example

See exactly how it works in our official example app:

cd example-app
npm install
npx expo start

📄 License

MIT © 2025