react-native-ai-hooks 0.1.0 → 0.3.0

package/README.md

@@ -1,3 +1,8 @@
+[![npm downloads](https://img.shields.io/npm/dw/react-native-ai-hooks)](https://npmjs.com/package/react-native-ai-hooks)
+[![npm version](https://img.shields.io/npm/v/react-native-ai-hooks)](https://npmjs.com/package/react-native-ai-hooks)
+[![GitHub stars](https://img.shields.io/github/stars/nikapkh/react-native-ai-hooks)](https://github.com/nikapkh/react-native-ai-hooks)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
 # react-native-ai-hooks
 
 AI hooks for React Native — add Claude, OpenAI & Gemini to your app in minutes.

package/package.json

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

package/src/hooks/useAICode.ts

@@ -0,0 +1,206 @@
+import { useCallback, useRef, useState } from 'react';
+
+interface UseAICodeOptions {
+  apiKey: string;
+  model?: string;
+  system?: string;
+  maxTokens?: number;
+  temperature?: number;
+  defaultLanguage?: string;
+}
+
+interface GenerateCodeInput {
+  prompt: string;
+  language?: string;
+}
+
+interface ExplainCodeInput {
+  code: string;
+  language?: string;
+  focus?: string;
+}
+
+interface UseAICodeReturn {
+  language: string;
+  generatedCode: string;
+  explanation: string;
+  isLoading: boolean;
+  error: string | null;
+  setLanguage: (language: string) => void;
+  generateCode: (input: GenerateCodeInput) => Promise<string | null>;
+  explainCode: (input: ExplainCodeInput) => Promise<string | null>;
+  clearCodeState: () => void;
+}
+
+interface ClaudeTextBlock {
+  type?: string;
+  text?: string;
+}
+
+interface ClaudeApiResult {
+  content?: ClaudeTextBlock[];
+  error?: {
+    message?: string;
+  };
+}
+
+function getClaudeTextContent(data: unknown): string {
+  const content = (data as ClaudeApiResult)?.content;
+  if (!Array.isArray(content)) {
+    return '';
+  }
+
+  return content
+    .filter(item => item?.type === 'text' && typeof item.text === 'string')
+    .map(item => item.text as string)
+    .join('\n')
+    .trim();
+}
+
+export function useAICode(options: UseAICodeOptions): UseAICodeReturn {
+  const [language, setLanguage] = useState(options.defaultLanguage || 'typescript');
+  const [generatedCode, setGeneratedCode] = useState('');
+  const [explanation, setExplanation] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const isMountedRef = useRef(true);
+
+  const clearCodeState = useCallback(() => {
+    setGeneratedCode('');
+    setExplanation('');
+    setError(null);
+  }, []);
+
+  const sendClaudeRequest = useCallback(
+    async (prompt: string) => {
+      const apiResponse = await fetch('https://api.anthropic.com/v1/messages', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          'x-api-key': options.apiKey,
+          'anthropic-version': '2023-06-01',
+        },
+        body: JSON.stringify({
+          model: options.model || 'claude-sonnet-4-20250514',
+          max_tokens: options.maxTokens ?? 1800,
+          temperature: options.temperature ?? 0.2,
+          system:
+            options.system ||
+            'You are an expert software engineer. Produce practical, correct code and clear explanations.',
+          messages: [{ role: 'user', content: prompt }],
+        }),
+      });
+
+      const data = (await apiResponse.json()) as ClaudeApiResult;
+      if (!apiResponse.ok) {
+        throw new Error(data?.error?.message || `Claude API error: ${apiResponse.status}`);
+      }
+
+      const text = getClaudeTextContent(data);
+      if (!text) {
+        throw new Error('No content returned by Claude API.');
+      }
+
+      return text;
+    },
+    [options.apiKey, options.maxTokens, options.model, options.system, options.temperature],
+  );
+
+  const generateCode = useCallback(
+    async (input: GenerateCodeInput) => {
+      const taskPrompt = input.prompt.trim();
+      const selectedLanguage = (input.language || language).trim();
+
+      if (!taskPrompt) {
+        setError('No code generation prompt provided.');
+        return null;
+      }
+
+      if (!options.apiKey) {
+        setError('Missing Claude API key.');
+        return null;
+      }
+
+      setIsLoading(true);
+      setError(null);
+      setLanguage(selectedLanguage);
+
+      try {
+        const prompt = [
+          `Generate ${selectedLanguage} code for the following request:`,
+          taskPrompt,
+          'Return runnable code and include brief usage notes only when necessary.',
+        ].join('\n');
+
+        const result = await sendClaudeRequest(prompt);
+        setGeneratedCode(result);
+        return result;
+      } catch (err) {
+        const message = (err as Error).message || 'Failed to generate code';
+        setError(message);
+        return null;
+      } finally {
+        if (isMountedRef.current) {
+          setIsLoading(false);
+        }
+      }
+    },
+    [language, options.apiKey, sendClaudeRequest],
+  );
+
+  const explainCode = useCallback(
+    async (input: ExplainCodeInput) => {
+      const code = input.code.trim();
+      const selectedLanguage = (input.language || language).trim();
+
+      if (!code) {
+        setError('No code provided for explanation.');
+        return null;
+      }
+
+      if (!options.apiKey) {
+        setError('Missing Claude API key.');
+        return null;
+      }
+
+      setIsLoading(true);
+      setError(null);
+      setLanguage(selectedLanguage);
+
+      try {
+        const prompt = [
+          `Explain the following ${selectedLanguage} code.`,
+          input.focus ? `Focus: ${input.focus}` : 'Focus: logic, structure, and potential pitfalls.',
+          'Code:',
+          code,
+        ].join('\n');
+
+        const result = await sendClaudeRequest(prompt);
+        setExplanation(result);
+        return result;
+      } catch (err) {
+        const message = (err as Error).message || 'Failed to explain code';
+        setError(message);
+        return null;
+      } finally {
+        if (isMountedRef.current) {
+          setIsLoading(false);
+        }
+      }
+    },
+    [language, options.apiKey, sendClaudeRequest],
+  );
+
+  return {
+    language,
+    generatedCode,
+    explanation,
+    isLoading,
+    error,
+    setLanguage,
+    generateCode,
+    explainCode,
+    clearCodeState,
+  };
+}

package/src/hooks/useAISummarize.ts

@@ -0,0 +1,158 @@
+import { useCallback, useRef, useState } from 'react';
+
+type SummaryLength = 'short' | 'medium' | 'long';
+
+interface UseAISummarizeOptions {
+  apiKey: string;
+  model?: string;
+  system?: string;
+  maxTokens?: number;
+  temperature?: number;
+  defaultLength?: SummaryLength;
+}
+
+interface SummarizeInput {
+  text: string;
+  length?: SummaryLength;
+}
+
+interface UseAISummarizeReturn {
+  summary: string;
+  length: SummaryLength;
+  isLoading: boolean;
+  error: string | null;
+  setLength: (length: SummaryLength) => void;
+  summarizeText: (input: SummarizeInput) => Promise<string | null>;
+  clearSummary: () => void;
+}
+
+interface ClaudeTextBlock {
+  type?: string;
+  text?: string;
+}
+
+interface ClaudeApiResult {
+  content?: ClaudeTextBlock[];
+  error?: {
+    message?: string;
+  };
+}
+
+function getClaudeTextContent(data: unknown): string {
+  const content = (data as ClaudeApiResult)?.content;
+  if (!Array.isArray(content)) {
+    return '';
+  }
+
+  return content
+    .filter(item => item?.type === 'text' && typeof item.text === 'string')
+    .map(item => item.text as string)
+    .join('\n')
+    .trim();
+}
+
+function lengthInstruction(length: SummaryLength): string {
+  if (length === 'short') {
+    return 'Produce a concise summary in 2-4 bullet points.';
+  }
+
+  if (length === 'long') {
+    return 'Produce a detailed summary with key points, context, and implications in 3-5 short paragraphs.';
+  }
+
+  return 'Produce a balanced summary in 1-2 paragraphs plus a short bullet list of key takeaways.';
+}
+
+export function useAISummarize(options: UseAISummarizeOptions): UseAISummarizeReturn {
+  const [summary, setSummary] = useState('');
+  const [length, setLength] = useState<SummaryLength>(options.defaultLength || 'medium');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const isMountedRef = useRef(true);
+
+  const clearSummary = useCallback(() => {
+    setSummary('');
+    setError(null);
+  }, []);
+
+  const summarizeText = useCallback(
+    async (input: SummarizeInput) => {
+      const text = input.text.trim();
+      const selectedLength = input.length || length;
+
+      if (!text) {
+        setError('No text provided for summarization.');
+        return null;
+      }
+
+      if (!options.apiKey) {
+        setError('Missing Claude API key.');
+        return null;
+      }
+
+      setIsLoading(true);
+      setError(null);
+      setLength(selectedLength);
+
+      try {
+        const prompt = [
+          'Summarize the following text.',
+          lengthInstruction(selectedLength),
+          'Text:',
+          text,
+        ].join('\n');
+
+        const apiResponse = await fetch('https://api.anthropic.com/v1/messages', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'x-api-key': options.apiKey,
+            'anthropic-version': '2023-06-01',
+          },
+          body: JSON.stringify({
+            model: options.model || 'claude-sonnet-4-20250514',
+            max_tokens: options.maxTokens ?? 1200,
+            temperature: options.temperature ?? 0.3,
+            system:
+              options.system ||
+              'You are an expert summarization assistant. Keep summaries faithful to source text and avoid fabrications.',
+            messages: [{ role: 'user', content: prompt }],
+          }),
+        });
+
+        const data = (await apiResponse.json()) as ClaudeApiResult;
+        if (!apiResponse.ok) {
+          throw new Error(data?.error?.message || `Claude API error: ${apiResponse.status}`);
+        }
+
+        const result = getClaudeTextContent(data);
+        if (!result) {
+          throw new Error('No summary returned by Claude API.');
+        }
+
+        setSummary(result);
+        return result;
+      } catch (err) {
+        const message = (err as Error).message || 'Failed to summarize text';
+        setError(message);
+        return null;
+      } finally {
+        if (isMountedRef.current) {
+          setIsLoading(false);
+        }
+      }
+    },
+    [length, options.apiKey, options.maxTokens, options.model, options.system, options.temperature],
+  );
+
+  return {
+    summary,
+    length,
+    isLoading,
+    error,
+    setLength,
+    summarizeText,
+    clearSummary,
+  };
+}

package/src/hooks/useAITranslate.ts

@@ -0,0 +1,207 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+interface UseAITranslateOptions {
+  apiKey: string;
+  model?: string;
+  system?: string;
+  maxTokens?: number;
+  temperature?: number;
+  initialTargetLanguage?: string;
+  autoTranslate?: boolean;
+  debounceMs?: number;
+}
+
+interface TranslationResult {
+  translatedText: string;
+  detectedSourceLanguage: string;
+  targetLanguage: string;
+}
+
+interface UseAITranslateReturn {
+  sourceText: string;
+  translatedText: string;
+  detectedSourceLanguage: string;
+  targetLanguage: string;
+  isTranslating: boolean;
+  error: string | null;
+  setSourceText: (text: string) => void;
+  setTargetLanguage: (language: string) => void;
+  translateText: (overrideText?: string) => Promise<TranslationResult | null>;
+  clearTranslation: () => void;
+}
+
+interface ClaudeTextBlock {
+  type?: string;
+  text?: string;
+}
+
+interface ClaudeApiResult {
+  content?: ClaudeTextBlock[];
+  error?: {
+    message?: string;
+  };
+}
+
+function getClaudeTextContent(data: unknown): string {
+  const content = (data as ClaudeApiResult)?.content;
+  if (!Array.isArray(content)) {
+    return '';
+  }
+
+  return content
+    .filter(item => item?.type === 'text' && typeof item.text === 'string')
+    .map(item => item.text as string)
+    .join('\n')
+    .trim();
+}
+
+function parseJsonFromText<T>(text: string): T {
+  const trimmed = text.trim();
+  const fenced = trimmed.match(/```(?:json)?\s*([\s\S]*?)```/i);
+  const candidate = fenced?.[1]?.trim() || trimmed;
+  return JSON.parse(candidate) as T;
+}
+
+export function useAITranslate(options: UseAITranslateOptions): UseAITranslateReturn {
+  const [sourceText, setSourceText] = useState('');
+  const [translatedText, setTranslatedText] = useState('');
+  const [detectedSourceLanguage, setDetectedSourceLanguage] = useState('');
+  const [targetLanguage, setTargetLanguage] = useState(options.initialTargetLanguage || 'English');
+  const [isTranslating, setIsTranslating] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const isMountedRef = useRef(true);
+
+  const clearTranslation = useCallback(() => {
+    setSourceText('');
+    setTranslatedText('');
+    setDetectedSourceLanguage('');
+    setError(null);
+  }, []);
+
+  const translateText = useCallback(
+    async (overrideText?: string) => {
+      const textToTranslate = (overrideText ?? sourceText).trim();
+
+      if (!textToTranslate) {
+        setError('No text to translate.');
+        return null;
+      }
+
+      if (!options.apiKey) {
+        setError('Missing Claude API key.');
+        return null;
+      }
+
+      setIsTranslating(true);
+      setError(null);
+
+      try {
+        const prompt = [
+          'Detect source language and translate text.',
+          'Return JSON only using this schema:',
+          '{"detectedSourceLanguage":"string","targetLanguage":"string","translatedText":"string"}',
+          `Target language: ${targetLanguage}`,
+          'Text:',
+          textToTranslate,
+        ].join('\n');
+
+        const apiResponse = await fetch('https://api.anthropic.com/v1/messages', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'x-api-key': options.apiKey,
+            'anthropic-version': '2023-06-01',
+          },
+          body: JSON.stringify({
+            model: options.model || 'claude-sonnet-4-20250514',
+            max_tokens: options.maxTokens ?? 800,
+            temperature: options.temperature ?? 0.2,
+            system:
+              options.system ||
+              'You are a translation assistant. Always detect source language and translate accurately. Return valid JSON only.',
+            messages: [{ role: 'user', content: prompt }],
+          }),
+        });
+
+        const data = (await apiResponse.json()) as ClaudeApiResult;
+        if (!apiResponse.ok) {
+          throw new Error(data?.error?.message || `Claude API error: ${apiResponse.status}`);
+        }
+
+        const text = getClaudeTextContent(data);
+        if (!text) {
+          throw new Error('No translation returned by Claude API.');
+        }
+
+        const parsed = parseJsonFromText<{
+          translatedText?: string;
+          detectedSourceLanguage?: string;
+          targetLanguage?: string;
+        }>(text);
+
+        const result: TranslationResult = {
+          translatedText: parsed?.translatedText?.trim() || '',
+          detectedSourceLanguage: parsed?.detectedSourceLanguage?.trim() || 'Unknown',
+          targetLanguage: parsed?.targetLanguage?.trim() || targetLanguage,
+        };
+
+        if (!result.translatedText) {
+          throw new Error('Invalid translation format returned by Claude API.');
+        }
+
+        setTranslatedText(result.translatedText);
+        setDetectedSourceLanguage(result.detectedSourceLanguage);
+        return result;
+      } catch (err) {
+        const message = (err as Error).message || 'Failed to translate text';
+        setError(message);
+        return null;
+      } finally {
+        if (isMountedRef.current) {
+          setIsTranslating(false);
+        }
+      }
+    },
+    [options.apiKey, options.maxTokens, options.model, options.system, options.temperature, sourceText, targetLanguage],
+  );
+
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+
+  useEffect(() => {
+    if (options.autoTranslate === false) {
+      return;
+    }
+
+    const text = sourceText.trim();
+    if (!text) {
+      setTranslatedText('');
+      setDetectedSourceLanguage('');
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      translateText(text).catch(() => undefined);
+    }, options.debounceMs ?? 500);
+
+    return () => clearTimeout(timer);
+  }, [options.autoTranslate, options.debounceMs, sourceText, targetLanguage, translateText]);
+
+  return {
+    sourceText,
+    translatedText,
+    detectedSourceLanguage,
+    targetLanguage,
+    isTranslating,
+    error,
+    setSourceText,
+    setTargetLanguage,
+    translateText,
+    clearTranslation,
+  };
+}

package/src/hooks/useAIVoice.ts

@@ -0,0 +1,219 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { PermissionsAndroid, Platform } from 'react-native';
+import Voice from '@react-native-voice/voice';
+
+interface UseAIVoiceOptions {
+	apiKey: string;
+	model?: string;
+	maxTokens?: number;
+	system?: string;
+	language?: string;
+	autoSendOnStop?: boolean;
+}
+
+interface UseAIVoiceReturn {
+	transcription: string;
+	response: string;
+	isRecording: boolean;
+	isLoading: boolean;
+	error: string | null;
+	startRecording: () => Promise<void>;
+	stopRecording: () => Promise<void>;
+	sendTranscription: (overrideText?: string) => Promise<string | null>;
+	clearVoiceState: () => void;
+}
+
+interface ClaudeTextBlock {
+	type?: string;
+	text?: string;
+}
+
+interface ClaudeApiResult {
+	content?: ClaudeTextBlock[];
+	error?: {
+		message?: string;
+	};
+}
+
+interface SpeechResultsEvent {
+	value?: string[];
+}
+
+interface SpeechErrorEvent {
+	error?: {
+		message?: string;
+	};
+}
+
+function getClaudeTextContent(data: unknown): string {
+	const content = (data as ClaudeApiResult)?.content;
+	if (!Array.isArray(content)) {
+		return '';
+	}
+
+	return content
+		.filter(item => item?.type === 'text' && typeof item.text === 'string')
+		.map(item => item.text as string)
+		.join('\n')
+		.trim();
+}
+
+export function useAIVoice(options: UseAIVoiceOptions): UseAIVoiceReturn {
+	const [transcription, setTranscription] = useState('');
+	const [response, setResponse] = useState('');
+	const [isRecording, setIsRecording] = useState(false);
+	const [isLoading, setIsLoading] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+
+	const transcriptionRef = useRef('');
+	const isMountedRef = useRef(true);
+
+	const requestMicPermission = useCallback(async () => {
+		if (Platform.OS !== 'android') {
+			return true;
+		}
+
+		const permission = await PermissionsAndroid.request(
+			PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
+		);
+		return permission === PermissionsAndroid.RESULTS.GRANTED;
+	}, []);
+
+	const sendTranscription = useCallback(
+		async (overrideText?: string) => {
+			const prompt = (overrideText ?? transcriptionRef.current).trim();
+
+			if (!prompt) {
+				setError('No transcription available to send.');
+				return null;
+			}
+
+			if (!options.apiKey) {
+				setError('Missing Claude API key.');
+				return null;
+			}
+
+			setIsLoading(true);
+			setError(null);
+
+			try {
+				const apiResponse = await fetch('https://api.anthropic.com/v1/messages', {
+					method: 'POST',
+					headers: {
+						'Content-Type': 'application/json',
+						'x-api-key': options.apiKey,
+						'anthropic-version': '2023-06-01',
+					},
+					body: JSON.stringify({
+						model: options.model || 'claude-sonnet-4-20250514',
+						max_tokens: options.maxTokens ?? 1024,
+						system: options.system,
+						messages: [{ role: 'user', content: prompt }],
+					}),
+				});
+
+				const data = (await apiResponse.json()) as ClaudeApiResult;
+				if (!apiResponse.ok) {
+					throw new Error(data?.error?.message || `Claude API error: ${apiResponse.status}`);
+				}
+
+				const text = getClaudeTextContent(data);
+				if (!text) {
+					throw new Error('No text response returned by Claude API.');
+				}
+
+				setResponse(text);
+				return text;
+			} catch (err) {
+				const message = (err as Error).message || 'Failed to send transcription';
+				setError(message);
+				return null;
+			} finally {
+				if (isMountedRef.current) {
+					setIsLoading(false);
+				}
+			}
+		},
+		[options.apiKey, options.maxTokens, options.model, options.system],
+	);
+
+	const startRecording = useCallback(async () => {
+		setError(null);
+
+		const permissionGranted = await requestMicPermission();
+		if (!permissionGranted) {
+			setError('Microphone permission not granted.');
+			return;
+		}
+
+		try {
+			transcriptionRef.current = '';
+			setTranscription('');
+			await Voice.start(options.language || 'en-US');
+			setIsRecording(true);
+		} catch (err) {
+			const message = (err as Error).message || 'Failed to start voice recording';
+			setError(message);
+			setIsRecording(false);
+		}
+	}, [options.language, requestMicPermission]);
+
+	const stopRecording = useCallback(async () => {
+		try {
+			await Voice.stop();
+		} catch {
+			// Ignore stop failures; state is reset below.
+		} finally {
+			setIsRecording(false);
+		}
+
+		if (options.autoSendOnStop !== false) {
+			await sendTranscription();
+		}
+	}, [options.autoSendOnStop, sendTranscription]);
+
+	const clearVoiceState = useCallback(() => {
+		transcriptionRef.current = '';
+		setTranscription('');
+		setResponse('');
+		setError(null);
+	}, []);
+
+	useEffect(() => {
+		isMountedRef.current = true;
+
+		Voice.onSpeechResults = (event: SpeechResultsEvent) => {
+			const latestText = event?.value?.[0]?.trim() || '';
+			transcriptionRef.current = latestText;
+			setTranscription(latestText);
+		};
+
+		Voice.onSpeechError = (event: SpeechErrorEvent) => {
+			const message = event?.error?.message || 'Speech recognition failed.';
+			setError(message);
+			setIsRecording(false);
+		};
+
+		Voice.onSpeechEnd = () => {
+			setIsRecording(false);
+		};
+
+		return () => {
+			isMountedRef.current = false;
+			Voice.destroy().catch(() => undefined);
+			Voice.removeAllListeners();
+		};
+	}, []);
+
+	return {
+		transcription,
+		response,
+		isRecording,
+		isLoading,
+		error,
+		startRecording,
+		stopRecording,
+		sendTranscription,
+		clearVoiceState,
+	};
+}

package/src/index.ts

@@ -1,4 +1,8 @@
 export { useAIChat } from './hooks/useAIChat';
 export { useAIStream } from './hooks/useAIStream';
 export { useImageAnalysis } from './hooks/useImageAnalysis';
-export { useAIForm } from './hooks/useAIForm';
+export { useAIForm } from './hooks/useAIForm';
+export { useAIVoice } from './hooks/useAIVoice';
+export { useAITranslate } from './hooks/useAITranslate';
+export { useAISummarize } from './hooks/useAISummarize';
+export { useAICode } from './hooks/useAICode';