react-native-ai-kit

🤖 React Native AI Kit

A comprehensive React Native utility kit for AI-powered applications. Easily integrate chat, image generation, speech-to-text, and text-to-speech capabilities into your React Native apps.

✨ Features

• 🗣️ Chat AI - OpenAI GPT & Google Gemini integration
• 🎨 Image Generation - DALL-E 3 support
• 🎤 Speech-to-Text - Voice recognition
• 🔊 Text-to-Speech - AI voice synthesis
• 💬 Ready-to-use Chat UI - Beautiful chat bubble component
• 📱 Cross-platform - Works on iOS, Android, and Web
• 🔧 TypeScript - Full type safety
• 🪝 React Hooks - Modern React patterns

📦 Installation

npm install react-native-ai-kit
# or
yarn add react-native-ai-kit

Peer Dependencies

npm install react react-native
# Optional: for enhanced audio features
npm install expo-av

🚀 Quick Start

Chat AI Hook

import React, { useState } from 'react';
import { View, TextInput, Button, Text } from 'react-native';
import { useChatAI } from 'react-native-ai-kit';

const ChatExample = () => {
  const [input, setInput] = useState('');
  const { messages, sendMessage, isLoading } = useChatAI({
    provider: 'openai',
    apiKey: 'your-openai-api-key',
    model: 'gpt-3.5-turbo',
  });

  const handleSend = async () => {
    if (input.trim()) {
      await sendMessage(input);
      setInput('');
    }
  };

  return (
    <View>
      {messages.map((msg) => (
        <Text key={msg.id}>
          {msg.role}: {msg.content}
        </Text>
      ))}
      <TextInput
        value={input}
        onChangeText={setInput}
        placeholder="Type your message..."
      />
      <Button title="Send" onPress={handleSend} disabled={isLoading} />
    </View>
  );
};

AI Chat Component

import React from 'react';
import { View } from 'react-native';
import { AIChat } from 'react-native-ai-kit';

const App = () => {
  return (
    <View style={{ flex: 1 }}>
      <AIChat
        config={{
          provider: 'openai',
          apiKey: 'your-openai-api-key',
        }}
        placeholder="Ask me anything..."
        showTimestamp={true}
      />
    </View>
  );
};

Image Generation

import React, { useState } from 'react';
import { View, TextInput, Button, Image } from 'react-native';
import { useImageAI } from 'react-native-ai-kit';

const ImageGenerator = () => {
  const [prompt, setPrompt] = useState('');
  const { images, generateImage, isLoading } = useImageAI({
    provider: 'openai',
    apiKey: 'your-openai-api-key',
    size: '1024x1024',
  });

  const handleGenerate = async () => {
    if (prompt.trim()) {
      await generateImage(prompt);
      setPrompt('');
    }
  };

  return (
    <View>
      <TextInput
        value={prompt}
        onChangeText={setPrompt}
        placeholder="Describe the image you want..."
      />
      <Button title="Generate" onPress={handleGenerate} disabled={isLoading} />
      {images.map((img) => (
        <Image key={img.id} source={{ uri: img.url }} style={{ width: 200, height: 200 }} />
      ))}
    </View>
  );
};

Speech-to-Text

import React from 'react';
import { View, Button, Text } from 'react-native';
import { useSpeechToText } from 'react-native-ai-kit';

const VoiceRecorder = () => {
  const { transcript, isListening, startListening, stopListening } = useSpeechToText({
    language: 'en-US',
    continuous: true,
  });

  return (
    <View>
      <Text>Transcript: {transcript}</Text>
      <Button
        title={isListening ? 'Stop Recording' : 'Start Recording'}
        onPress={isListening ? stopListening : startListening}
      />
    </View>
  );
};

Text-to-Speech

import React, { useState } from 'react';
import { View, TextInput, Button } from 'react-native';
import { useTextToSpeech } from 'react-native-ai-kit';

const TextReader = () => {
  const [text, setText] = useState('');
  const { speak, stop, isSpeaking } = useTextToSpeech({
    rate: 1.0,
    pitch: 1.0,
  });

  return (
    <View>
      <TextInput
        value={text}
        onChangeText={setText}
        placeholder="Enter text to speak..."
        multiline
      />
      <Button
        title={isSpeaking ? 'Stop' : 'Speak'}
        onPress={() => (isSpeaking ? stop() : speak(text))}
      />
    </View>
  );
};

📚 API Reference

useChatAI(config: ChatAIConfig)

Config Options:

• provider: 'openai' | 'gemini'
• apiKey: Your API key
• model?: Model name (default: 'gpt-3.5-turbo' for OpenAI)
• maxTokens?: Maximum response tokens (default: 1000)
• temperature?: Response creativity (0-1, default: 0.7)

Returns:

• messages: Array of chat messages
• sendMessage(content: string): Send a message
• isLoading: Loading state
• error: Error message if any
• clearMessages(): Clear chat history

useImageAI(config: ImageAIConfig)

Config Options:

• provider: 'openai'
• apiKey: Your API key
• model?: Model name (default: 'dall-e-3')
• size?: Image size (default: '1024x1024')
• quality?: 'standard' | 'hd'
• style?: 'vivid' | 'natural'

Returns:

• images: Array of generated images
• generateImage(prompt: string): Generate an image
• isLoading: Loading state
• error: Error message if any
• clearImages(): Clear image history

useSpeechToText(config?: SpeechToTextConfig)

Config Options:

• language?: Language code (default: 'en-US')
• continuous?: Continuous recognition (default: true)
• interimResults?: Show interim results (default: true)

Returns:

• transcript: Current transcript
• isListening: Recording state
• startListening(): Start voice recognition
• stopListening(): Stop voice recognition
• error: Error message if any

useTextToSpeech(config?: TextToSpeechConfig)

Config Options:

• voice?: Voice name
• rate?: Speech rate (0.1-10, default: 1)
• pitch?: Voice pitch (0-2, default: 1)
• volume?: Volume (0-1, default: 1)

Returns:

• speak(text: string): Speak the text
• stop(): Stop speaking
• isSpeaking: Speaking state
• error: Error message if any

<AIChat /> Component

Props:

• config: ChatAIConfig object
• style?: Container style
• messageStyle?: Message bubble style
• inputStyle?: Input field style
• sendButtonStyle?: Send button style
• placeholder?: Input placeholder
• sendButtonText?: Send button text
• showTimestamp?: Show message timestamps
• maxHeight?: Maximum chat height

🔑 Provider Setup

OpenAI

• Get your API key from OpenAI Platform
• Add it to your environment variables or pass directly to the config

const config = {
  provider: 'openai',
  apiKey: process.env.OPENAI_API_KEY || 'your-api-key',
};

Google Gemini

• Get your API key from Google AI Studio
• Configure the provider:

const config = {
  provider: 'gemini',
  apiKey: process.env.GEMINI_API_KEY || 'your-api-key',
  model: 'gemini-pro',
};

🛠️ Development

Setup

git clone https://github.com/krixs3112/react-native-ai-kit.git
cd react-native-ai-kit
npm install

Scripts

npm run build        # Build the package
npm run test         # Run tests
npm run lint         # Lint code
npm run format       # Format code

Testing

npm run test         # Run all tests
npm run test:watch   # Run tests in watch mode
npm run test:coverage # Generate coverage report

📦 Publishing

Prerequisites

• Ensure you have an npm account
• Login to npm: npm login
• Update version in package.json

Publish Steps

# 1. Build the package
npm run build

# 2. Run tests
npm test

# 3. Publish to npm
npm publish --access public

Automated Publishing

The package includes GitHub Actions for automated publishing:

• Push changes to main branch
• Create a new release tag: git tag v0.1.0 && git push origin v0.1.0
• GitHub Actions will automatically build and publish

🗺️ Roadmap

• Local AI Models - ONNX/TensorFlow Lite integration
• Vector Embeddings - Text similarity and search
• Vision AI - Image analysis and OCR
• Audio Processing - Advanced audio features
• Streaming Responses - Real-time AI responses
• Custom Providers - Plugin system for custom AI providers
• Offline Mode - Local model inference
• React Native New Architecture - Fabric and TurboModules support

🤝 Contributing

Contributions are welcome! Please read our Contributing Guide for details.

• Fork the repository
• Create your feature branch: git checkout -b feature/amazing-feature
• Commit your changes: git commit -m 'Add amazing feature'
• Push to the branch: git push origin feature/amazing-feature
• Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• OpenAI for GPT and DALL-E APIs
• Google for Gemini AI
• React Native Community for excellent tooling

📞 Support

• 📧 Email: [e-mail]
• 🐛 Issues: GitHub Issues
• 💬 Discussions: GitHub Discussions

Made with ❤️ for the React Native community