Package Exports

react-native-smart-ai

Readme

🤖 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

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

📱 Running the Example

See exactly how it works in our official example app:

cd example-app
npm install
npx expo start

JSPM

react-native-smart-ai