react-native-ai-hooks 0.2.0 → 0.4.0

package/example/App.tsx

@@ -0,0 +1,95 @@
+import React, { useState } from 'react';
+import { SafeAreaView, StatusBar, StyleSheet, Text, View, Pressable } from 'react-native';
+
+import { APIKeysProvider } from './src/context/APIKeysContext';
+import { ChatScreen } from './src/screens/ChatScreen';
+import { SettingsScreen } from './src/screens/SettingsScreen';
+
+type ScreenName = 'chat' | 'settings';
+
+function ExampleAppShell() {
+  const [screen, setScreen] = useState<ScreenName>('chat');
+
+  return (
+    <SafeAreaView style={styles.safeArea}>
+      <StatusBar barStyle="dark-content" />
+
+      <View style={styles.topBar}>
+        <Text style={styles.brand}>react-native-ai-hooks</Text>
+        <View style={styles.segmentRow}>
+          <Pressable
+            accessibilityRole="button"
+            onPress={() => setScreen('chat')}
+            style={[styles.segmentButton, screen === 'chat' && styles.segmentButtonActive]}
+          >
+            <Text style={[styles.segmentText, screen === 'chat' && styles.segmentTextActive]}>Chat</Text>
+          </Pressable>
+
+          <Pressable
+            accessibilityRole="button"
+            onPress={() => setScreen('settings')}
+            style={[styles.segmentButton, screen === 'settings' && styles.segmentButtonActive]}
+          >
+            <Text style={[styles.segmentText, screen === 'settings' && styles.segmentTextActive]}>Settings</Text>
+          </Pressable>
+        </View>
+      </View>
+
+      <View style={styles.content}>{screen === 'chat' ? <ChatScreen /> : <SettingsScreen />}</View>
+    </SafeAreaView>
+  );
+}
+
+export default function App() {
+  return (
+    <APIKeysProvider>
+      <ExampleAppShell />
+    </APIKeysProvider>
+  );
+}
+
+const styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+    backgroundColor: '#f8fafc',
+  },
+  topBar: {
+    paddingHorizontal: 20,
+    paddingTop: 10,
+    paddingBottom: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: '#e2e8f0',
+    backgroundColor: '#ffffff',
+  },
+  brand: {
+    fontSize: 18,
+    fontWeight: '800',
+    color: '#0f172a',
+    marginBottom: 10,
+  },
+  segmentRow: {
+    flexDirection: 'row',
+    backgroundColor: '#f1f5f9',
+    borderRadius: 999,
+    padding: 4,
+    alignSelf: 'flex-start',
+  },
+  segmentButton: {
+    borderRadius: 999,
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+  },
+  segmentButtonActive: {
+    backgroundColor: '#0f172a',
+  },
+  segmentText: {
+    color: '#334155',
+    fontWeight: '700',
+  },
+  segmentTextActive: {
+    color: '#ffffff',
+  },
+  content: {
+    flex: 1,
+  },
+});

package/example/README.md

@@ -0,0 +1,27 @@
+# Example App
+
+This Expo app demonstrates secure API key handling and hook usage.
+
+## Features
+
+- Settings screen with local key storage using AsyncStorage
+- Global context for Anthropic/OpenAI/Gemini keys
+- Chat screen using useAIStream
+- Friendly warning when no API key is available
+
+## Run
+
+1. Install dependencies
+
+```bash
+cd example
+npm install
+```
+
+2. Start app
+
+```bash
+npm run start
+```
+
+3. Open Settings, save at least one key, return to Chat.

package/example/index.js

@@ -0,0 +1,5 @@
+import { registerRootComponent } from 'expo';
+
+import App from './App';
+
+registerRootComponent(App);

package/example/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "react-native-ai-hooks-example",
+  "version": "1.0.0",
+  "private": true,
+  "main": "index.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "@react-native-async-storage/async-storage": "^1.24.0",
+    "expo": "~52.0.30",
+    "react": "18.3.1",
+    "react-native": "0.76.6",
+    "react-native-ai-hooks": "file:.."
+  },
+  "devDependencies": {
+    "typescript": "^5.7.2"
+  }
+}

package/example/src/components/ProviderPicker.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+
+import type { SupportedProvider } from '../context/APIKeysContext';
+
+type ProviderPickerProps = {
+  value: SupportedProvider;
+  onChange: (provider: SupportedProvider) => void;
+};
+
+const options: Array<{ label: string; value: SupportedProvider }> = [
+  { label: 'Anthropic', value: 'anthropic' },
+  { label: 'OpenAI', value: 'openai' },
+  { label: 'Gemini', value: 'gemini' },
+];
+
+export function ProviderPicker({ value, onChange }: ProviderPickerProps) {
+  return (
+    <View style={styles.row}>
+      {options.map(option => {
+        const active = value === option.value;
+        return (
+          <Pressable
+            accessibilityRole="button"
+            key={option.value}
+            onPress={() => onChange(option.value)}
+            style={[styles.pill, active && styles.pillActive]}
+          >
+            <Text style={[styles.pillText, active && styles.pillTextActive]}>{option.label}</Text>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    gap: 10,
+    marginBottom: 8,
+  },
+  pill: {
+    borderWidth: 1,
+    borderColor: '#d2dae6',
+    backgroundColor: '#ffffff',
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+    borderRadius: 999,
+  },
+  pillActive: {
+    backgroundColor: '#0f172a',
+    borderColor: '#0f172a',
+  },
+  pillText: {
+    color: '#334155',
+    fontWeight: '600',
+  },
+  pillTextActive: {
+    color: '#ffffff',
+  },
+});

package/example/src/context/APIKeysContext.tsx

@@ -0,0 +1,96 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+
+export type SupportedProvider = 'anthropic' | 'openai' | 'gemini';
+
+type APIKeysState = {
+  anthropic: string;
+  openai: string;
+  gemini: string;
+};
+
+type APIKeysContextValue = {
+  keys: APIKeysState;
+  activeProvider: SupportedProvider;
+  isReady: boolean;
+  setActiveProvider: (provider: SupportedProvider) => void;
+  updateKey: (provider: SupportedProvider, value: string) => void;
+  saveKeys: () => Promise<void>;
+  getActiveKey: () => string;
+};
+
+const STORAGE_KEY = 'react_native_ai_hooks_example_api_keys_v1';
+
+const defaultKeys: APIKeysState = {
+  anthropic: '',
+  openai: '',
+  gemini: '',
+};
+
+const APIKeysContext = createContext<APIKeysContextValue | null>(null);
+
+export function APIKeysProvider({ children }: { children: React.ReactNode }) {
+  const [keys, setKeys] = useState<APIKeysState>(defaultKeys);
+  const [activeProvider, setActiveProvider] = useState<SupportedProvider>('anthropic');
+  const [isReady, setIsReady] = useState(false);
+
+  useEffect(() => {
+    const loadKeys = async () => {
+      try {
+        const raw = await AsyncStorage.getItem(STORAGE_KEY);
+        if (raw) {
+          const parsed = JSON.parse(raw) as Partial<APIKeysState>;
+          setKeys({
+            anthropic: parsed.anthropic ?? '',
+            openai: parsed.openai ?? '',
+            gemini: parsed.gemini ?? '',
+          });
+        }
+      } catch {
+        // Keep defaults if storage is unavailable or payload is invalid.
+      } finally {
+        setIsReady(true);
+      }
+    };
+
+    loadKeys().catch(() => setIsReady(true));
+  }, []);
+
+  const updateKey = useCallback((provider: SupportedProvider, value: string) => {
+    setKeys(prev => ({
+      ...prev,
+      [provider]: value.trim(),
+    }));
+  }, []);
+
+  const saveKeys = useCallback(async () => {
+    await AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(keys));
+  }, [keys]);
+
+  const getActiveKey = useCallback(() => {
+    return keys[activeProvider] ?? '';
+  }, [activeProvider, keys]);
+
+  const value = useMemo<APIKeysContextValue>(
+    () => ({
+      keys,
+      activeProvider,
+      isReady,
+      setActiveProvider,
+      updateKey,
+      saveKeys,
+      getActiveKey,
+    }),
+    [activeProvider, getActiveKey, isReady, keys, saveKeys, updateKey],
+  );
+
+  return <APIKeysContext.Provider value={value}>{children}</APIKeysContext.Provider>;
+}
+
+export function useAPIKeys() {
+  const context = useContext(APIKeysContext);
+  if (!context) {
+    throw new Error('useAPIKeys must be used inside APIKeysProvider');
+  }
+  return context;
+}

package/example/src/screens/ChatScreen.tsx

@@ -0,0 +1,205 @@
+import React, { useMemo, useState } from 'react';
+import {
+  ActivityIndicator,
+  KeyboardAvoidingView,
+  Platform,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+import { useAIStream } from 'react-native-ai-hooks';
+
+import { ProviderPicker } from '../components/ProviderPicker';
+import { useAPIKeys } from '../context/APIKeysContext';
+
+const NO_KEY_WARNING = 'Please enter your API key in Settings to start chatting';
+
+const modelMap: Record<'anthropic' | 'openai' | 'gemini', string> = {
+  anthropic: 'claude-sonnet-4-20250514',
+  openai: 'gpt-4o-mini',
+  gemini: 'gemini-1.5-flash',
+};
+
+export function ChatScreen() {
+  const { activeProvider, setActiveProvider, getActiveKey } = useAPIKeys();
+  const [prompt, setPrompt] = useState('');
+
+  const activeApiKey = getActiveKey();
+  const hasApiKey = activeApiKey.length > 0;
+
+  const streamOptions = useMemo(
+    () => ({
+      apiKey: activeApiKey,
+      provider: activeProvider,
+      model: modelMap[activeProvider],
+      temperature: 0.6,
+      maxTokens: 700,
+    }),
+    [activeApiKey, activeProvider],
+  );
+
+  const { response, isLoading, error, streamResponse, abort, clearResponse } = useAIStream(streamOptions);
+
+  const onSend = async () => {
+    if (!hasApiKey || !prompt.trim()) {
+      return;
+    }
+    await streamResponse(prompt.trim());
+  };
+
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+      style={styles.flex}
+    >
+      <ScrollView contentContainerStyle={styles.container} keyboardShouldPersistTaps="handled">
+        <Text style={styles.header}>Stream Chat</Text>
+        <Text style={styles.subHeader}>Live token streaming demo using your saved API keys.</Text>
+
+        <ProviderPicker onChange={setActiveProvider} value={activeProvider} />
+
+        {!hasApiKey && (
+          <View style={styles.warningBox}>
+            <Text style={styles.warningText}>{NO_KEY_WARNING}</Text>
+          </View>
+        )}
+
+        <View style={styles.outputCard}>
+          <Text style={styles.outputLabel}>Assistant Output</Text>
+          {isLoading ? <ActivityIndicator color="#0f172a" style={styles.loader} /> : null}
+          <Text style={styles.outputText}>{response || 'Start a prompt to see streamed output here.'}</Text>
+          {error ? <Text style={styles.errorText}>{error}</Text> : null}
+        </View>
+
+        <TextInput
+          multiline
+          onChangeText={setPrompt}
+          placeholder="Ask anything..."
+          placeholderTextColor="#94a3b8"
+          style={styles.input}
+          value={prompt}
+        />
+
+        <View style={styles.buttonRow}>
+          <Pressable
+            disabled={!hasApiKey || isLoading || !prompt.trim()}
+            onPress={onSend}
+            style={[styles.buttonPrimary, (!hasApiKey || isLoading || !prompt.trim()) && styles.buttonDisabled]}
+          >
+            <Text style={styles.buttonText}>Send</Text>
+          </Pressable>
+
+          <Pressable disabled={!isLoading} onPress={abort} style={[styles.buttonGhost, !isLoading && styles.buttonDisabledGhost]}>
+            <Text style={styles.buttonGhostText}>Stop</Text>
+          </Pressable>
+
+          <Pressable onPress={clearResponse} style={styles.buttonGhost}>
+            <Text style={styles.buttonGhostText}>Clear</Text>
+          </Pressable>
+        </View>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+}
+
+const styles = StyleSheet.create({
+  flex: {
+    flex: 1,
+  },
+  container: {
+    padding: 20,
+    gap: 14,
+  },
+  header: {
+    fontSize: 30,
+    fontWeight: '800',
+    color: '#0f172a',
+  },
+  subHeader: {
+    color: '#475569',
+    lineHeight: 20,
+    marginBottom: 6,
+  },
+  warningBox: {
+    backgroundColor: '#fff7ed',
+    borderColor: '#fdba74',
+    borderWidth: 1,
+    borderRadius: 12,
+    padding: 12,
+  },
+  warningText: {
+    color: '#9a3412',
+    fontWeight: '600',
+  },
+  outputCard: {
+    backgroundColor: '#ffffff',
+    borderWidth: 1,
+    borderColor: '#d5dde9',
+    borderRadius: 16,
+    padding: 14,
+    minHeight: 180,
+  },
+  outputLabel: {
+    fontWeight: '700',
+    color: '#0f172a',
+    marginBottom: 8,
+  },
+  loader: {
+    marginBottom: 8,
+  },
+  outputText: {
+    color: '#111827',
+    lineHeight: 22,
+  },
+  errorText: {
+    color: '#b91c1c',
+    marginTop: 12,
+    fontWeight: '600',
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: '#d5dde9',
+    borderRadius: 14,
+    backgroundColor: '#ffffff',
+    paddingHorizontal: 14,
+    paddingVertical: 12,
+    minHeight: 96,
+    textAlignVertical: 'top',
+    color: '#111827',
+  },
+  buttonRow: {
+    flexDirection: 'row',
+    gap: 10,
+  },
+  buttonPrimary: {
+    backgroundColor: '#0f172a',
+    borderRadius: 12,
+    paddingHorizontal: 18,
+    paddingVertical: 12,
+  },
+  buttonText: {
+    color: '#ffffff',
+    fontWeight: '700',
+  },
+  buttonGhost: {
+    borderColor: '#cbd5e1',
+    borderWidth: 1,
+    borderRadius: 12,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    backgroundColor: '#ffffff',
+  },
+  buttonGhostText: {
+    color: '#334155',
+    fontWeight: '700',
+  },
+  buttonDisabled: {
+    opacity: 0.45,
+  },
+  buttonDisabledGhost: {
+    opacity: 0.5,
+  },
+});

package/example/src/screens/SettingsScreen.tsx

@@ -0,0 +1,124 @@
+import React, { useMemo, useState } from 'react';
+import { Alert, ScrollView, StyleSheet, Text, TextInput, View, Pressable } from 'react-native';
+
+import { useAPIKeys } from '../context/APIKeysContext';
+
+function getTitle(provider: 'anthropic' | 'openai' | 'gemini') {
+  if (provider === 'anthropic') {
+    return 'Anthropic API Key';
+  }
+  if (provider === 'openai') {
+    return 'OpenAI API Key';
+  }
+  return 'Gemini API Key';
+}
+
+export function SettingsScreen() {
+  const { keys, updateKey, saveKeys } = useAPIKeys();
+  const [isSaving, setIsSaving] = useState(false);
+
+  const providers = useMemo<Array<'anthropic' | 'openai' | 'gemini'>>(
+    () => ['anthropic', 'openai', 'gemini'],
+    [],
+  );
+
+  const onSave = async () => {
+    try {
+      setIsSaving(true);
+      await saveKeys();
+      Alert.alert('Saved', 'Your API keys were saved locally on this device.');
+    } catch {
+      Alert.alert('Error', 'Could not save keys. Please try again.');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <ScrollView contentContainerStyle={styles.container}>
+      <Text style={styles.header}>Settings</Text>
+      <Text style={styles.subHeader}>
+        Add your API keys below. They are stored locally using AsyncStorage.
+      </Text>
+
+      {providers.map(provider => (
+        <View style={styles.inputGroup} key={provider}>
+          <Text style={styles.label}>{getTitle(provider)}</Text>
+          <TextInput
+            autoCapitalize="none"
+            autoCorrect={false}
+            keyboardType="default"
+            onChangeText={value => updateKey(provider, value)}
+            placeholder={`Enter ${provider} key`}
+            placeholderTextColor="#94a3b8"
+            style={styles.input}
+            value={keys[provider]}
+          />
+        </View>
+      ))}
+
+      <Pressable onPress={onSave} style={[styles.saveButton, isSaving && styles.saveButtonDisabled]}>
+        <Text style={styles.saveButtonText}>{isSaving ? 'Saving...' : 'Save Keys'}</Text>
+      </Pressable>
+
+      <Text style={styles.note}>
+        Security tip: For production apps, prefer routing requests through your own backend proxy.
+      </Text>
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 20,
+    gap: 12,
+  },
+  header: {
+    fontSize: 30,
+    fontWeight: '800',
+    color: '#0f172a',
+  },
+  subHeader: {
+    color: '#475569',
+    lineHeight: 20,
+    marginBottom: 12,
+  },
+  inputGroup: {
+    gap: 8,
+  },
+  label: {
+    fontSize: 14,
+    color: '#0f172a',
+    fontWeight: '700',
+  },
+  input: {
+    borderWidth: 1,
+    borderColor: '#d5dde9',
+    borderRadius: 14,
+    paddingHorizontal: 14,
+    paddingVertical: 12,
+    color: '#111827',
+    backgroundColor: '#ffffff',
+  },
+  saveButton: {
+    backgroundColor: '#0f172a',
+    borderRadius: 14,
+    alignItems: 'center',
+    paddingVertical: 14,
+    marginTop: 8,
+  },
+  saveButtonDisabled: {
+    opacity: 0.7,
+  },
+  saveButtonText: {
+    color: '#ffffff',
+    fontWeight: '700',
+    fontSize: 16,
+  },
+  note: {
+    color: '#64748b',
+    marginTop: 10,
+    fontSize: 12,
+    lineHeight: 18,
+  },
+});

package/example/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "noUncheckedIndexedAccess": true
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ai-hooks",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "AI hooks for React Native — useAIChat, useAIStream, useImageAnalysis. Works with Claude, OpenAI & Gemini.",
   "main": "src/index.ts",
   "types": "src/index.ts",