react-native-ai-hooks 0.1.0

package/README.md

@@ -0,0 +1,39 @@
+# react-native-ai-hooks
+
+AI hooks for React Native — add Claude, OpenAI & Gemini to your app in minutes.
+
+## Installation
+
+```bash
+npm install react-native-ai-hooks
+```
+
+## Hooks
+
+- `useAIChat()` — multi-turn chat with streaming
+- `useAIStream()` — real-time token streaming  
+- `useImageAnalysis()` — camera/gallery → AI description
+- `useAIForm()` — AI-powered form validation
+
+## Quick Start
+
+```tsx
+import { useAIChat } from 'react-native-ai-hooks';
+
+const { messages, sendMessage, isLoading } = useAIChat({
+  apiKey: 'your-api-key',
+  provider: 'claude',
+});
+```
+
+## Providers
+
+| Provider | Status |
+|----------|--------|
+| Claude (Anthropic) | ✅ |
+| OpenAI | ✅ |
+| Gemini | 🔜 |
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "react-native-ai-hooks",
+  "version": "0.1.0",
+  "description": "AI hooks for React Native — useAIChat, useAIStream, useImageAnalysis. Works with Claude, OpenAI & Gemini.",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "keywords": ["react-native", "ai", "claude", "openai", "hooks", "expo"],
+  "author": "nikapkh",
+  "license": "MIT",
+  "devDependencies": {
+    "typescript": "^5.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-native": ">=0.70.0"
+  }
+}

package/src/hooks/useAIChat.ts

@@ -0,0 +1,66 @@
+import { useState, useCallback } from 'react';
+
+interface Message {
+  role: 'user' | 'assistant';
+  content: string;
+}
+
+interface UseAIChatOptions {
+  apiKey: string;
+  provider?: 'claude' | 'openai';
+  model?: string;
+}
+
+interface UseAIChatReturn {
+  messages: Message[];
+  isLoading: boolean;
+  error: string | null;
+  sendMessage: (content: string) => Promise<void>;
+  clearMessages: () => void;
+}
+
+export function useAIChat(options: UseAIChatOptions): UseAIChatReturn {
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const sendMessage = useCallback(async (content: string) => {
+    setIsLoading(true);
+    setError(null);
+
+    const userMessage: Message = { role: 'user', content };
+    setMessages(prev => [...prev, userMessage]);
+
+    try {
+      const response = 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: 1024,
+          messages: [...messages, userMessage],
+        }),
+      });
+
+      const data = await response.json();
+      const assistantMessage: Message = {
+        role: 'assistant',
+        content: data.content[0].text,
+      };
+
+      setMessages(prev => [...prev, assistantMessage]);
+    } catch (err) {
+      setError('Failed to send message');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [messages, options]);
+
+  const clearMessages = useCallback(() => setMessages([]), []);
+
+  return { messages, isLoading, error, sendMessage, clearMessages };
+}

package/src/hooks/useAIForm.ts

@@ -0,0 +1,245 @@
+import { useCallback, useRef, useState } from 'react';
+
+interface UseAIFormOptions {
+  apiKey: string;
+  model?: string;
+  system?: string;
+  maxTokens?: number;
+  temperature?: number;
+}
+
+interface ValidateFieldInput {
+  fieldName: string;
+  value: string;
+  formData?: Record<string, string>;
+  validationRule?: string;
+}
+
+interface AutocompleteFieldInput {
+  fieldName: string;
+  value: string;
+  formData?: Record<string, string>;
+  instruction?: string;
+  maxSuggestions?: number;
+}
+
+interface AIFieldValidation {
+  isValid: boolean;
+  feedback: string;
+  suggestion?: string;
+}
+
+interface UseAIFormReturn {
+  validations: Record<string, AIFieldValidation>;
+  autocomplete: Record<string, string[]>;
+  isLoading: boolean;
+  error: string | null;
+  validateField: (input: ValidateFieldInput) => Promise<AIFieldValidation | null>;
+  autocompleteField: (input: AutocompleteFieldInput) => Promise<string[] | null>;
+  clearFormAI: () => void;
+  cancelRequests: () => void;
+}
+
+function extractTextContent(data: unknown): string {
+  const content = (data as { content?: Array<{ type?: string; text?: string }> })?.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 useAIForm(options: UseAIFormOptions): UseAIFormReturn {
+  const [validations, setValidations] = useState<Record<string, AIFieldValidation>>({});
+  const [autocomplete, setAutocomplete] = useState<Record<string, string[]>>({});
+  const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const validationAbortRef = useRef<AbortController | null>(null);
+  const autocompleteAbortRef = useRef<AbortController | null>(null);
+
+  const cancelRequests = useCallback(() => {
+    validationAbortRef.current?.abort();
+    autocompleteAbortRef.current?.abort();
+    validationAbortRef.current = null;
+    autocompleteAbortRef.current = null;
+    setIsLoading(false);
+  }, []);
+
+  const clearFormAI = useCallback(() => {
+    setValidations({});
+    setAutocomplete({});
+    setError(null);
+  }, []);
+
+  const sendClaudeRequest = useCallback(
+    async (prompt: string, signal: AbortSignal) => {
+      const response = 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 form assistant. Return precise, concise, JSON-only responses with no markdown unless explicitly requested.',
+          messages: [{ role: 'user', content: prompt }],
+        }),
+        signal,
+      });
+
+      if (!response.ok) {
+        const errorText = await response.text();
+        throw new Error(errorText || `Claude API error: ${response.status}`);
+      }
+
+      return response.json();
+    },
+    [options],
+  );
+
+  const validateField = useCallback(
+    async (input: ValidateFieldInput) => {
+      validationAbortRef.current?.abort();
+      const controller = new AbortController();
+      validationAbortRef.current = controller;
+
+      setIsLoading(true);
+      setError(null);
+
+      try {
+        const prompt = [
+          'Validate this single form field and return JSON only.',
+          'Schema: {"isValid": boolean, "feedback": string, "suggestion": string}',
+          `Field: ${input.fieldName}`,
+          `Value: ${input.value}`,
+          `Rule: ${input.validationRule || 'Use common real-world validation best practices.'}`,
+          `Other form values: ${JSON.stringify(input.formData || {})}`,
+          'If valid, feedback should be short and positive. suggestion can be empty string.',
+        ].join('\n');
+
+        const data = await sendClaudeRequest(prompt, controller.signal);
+        const text = extractTextContent(data);
+
+        if (!text) {
+          throw new Error('No validation content returned from Claude API.');
+        }
+
+        const parsed = parseJsonFromText<AIFieldValidation>(text);
+
+        if (typeof parsed?.isValid !== 'boolean' || typeof parsed?.feedback !== 'string') {
+          throw new Error('Invalid validation response format returned by Claude API.');
+        }
+
+        const result: AIFieldValidation = {
+          isValid: parsed.isValid,
+          feedback: parsed.feedback,
+          suggestion: typeof parsed.suggestion === 'string' ? parsed.suggestion : undefined,
+        };
+
+        setValidations(prev => ({
+          ...prev,
+          [input.fieldName]: result,
+        }));
+
+        return result;
+      } catch (err) {
+        if ((err as Error).name === 'AbortError') {
+          return null;
+        }
+
+        const message = (err as Error).message || 'Failed to validate field';
+        setError(message);
+        return null;
+      } finally {
+        validationAbortRef.current = null;
+        setIsLoading(false);
+      }
+    },
+    [sendClaudeRequest],
+  );
+
+  const autocompleteField = useCallback(
+    async (input: AutocompleteFieldInput) => {
+      autocompleteAbortRef.current?.abort();
+      const controller = new AbortController();
+      autocompleteAbortRef.current = controller;
+
+      setIsLoading(true);
+      setError(null);
+
+      try {
+        const prompt = [
+          'Generate form autocomplete suggestions for one field and return JSON only.',
+          'Schema: {"suggestions": string[]}',
+          `Field: ${input.fieldName}`,
+          `Current value: ${input.value}`,
+          `Max suggestions: ${input.maxSuggestions ?? 5}`,
+          `Instruction: ${input.instruction || 'Provide useful, natural completions for this field value.'}`,
+          `Other form values: ${JSON.stringify(input.formData || {})}`,
+          'Suggestions should be unique, concise, and ordered best-first.',
+        ].join('\n');
+
+        const data = await sendClaudeRequest(prompt, controller.signal);
+        const text = extractTextContent(data);
+
+        if (!text) {
+          throw new Error('No autocomplete content returned from Claude API.');
+        }
+
+        const parsed = parseJsonFromText<{ suggestions?: unknown }>(text);
+        const suggestions = Array.isArray(parsed?.suggestions)
+          ? parsed.suggestions.filter((item): item is string => typeof item === 'string')
+          : [];
+
+        const limitedSuggestions = suggestions.slice(0, input.maxSuggestions ?? 5);
+
+        setAutocomplete(prev => ({
+          ...prev,
+          [input.fieldName]: limitedSuggestions,
+        }));
+
+        return limitedSuggestions;
+      } catch (err) {
+        if ((err as Error).name === 'AbortError') {
+          return null;
+        }
+
+        const message = (err as Error).message || 'Failed to generate autocomplete suggestions';
+        setError(message);
+        return null;
+      } finally {
+        autocompleteAbortRef.current = null;
+        setIsLoading(false);
+      }
+    },
+    [sendClaudeRequest],
+  );
+
+  return {
+    validations,
+    autocomplete,
+    isLoading,
+    error,
+    validateField,
+    autocompleteField,
+    clearFormAI,
+    cancelRequests,
+  };
+}

package/src/hooks/useAIStream.ts

@@ -0,0 +1,142 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+interface UseAIStreamOptions {
+  apiKey: string;
+  model?: string;
+  system?: string;
+  maxTokens?: number;
+  temperature?: number;
+}
+
+interface UseAIStreamReturn {
+  response: string;
+  isLoading: boolean;
+  error: string | null;
+  streamResponse: (prompt: string) => Promise<void>;
+  abortStream: () => void;
+  clearResponse: () => void;
+}
+
+export function useAIStream(options: UseAIStreamOptions): UseAIStreamReturn {
+  const [response, setResponse] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  const abortStream = useCallback(() => {
+    abortControllerRef.current?.abort();
+    abortControllerRef.current = null;
+    setIsLoading(false);
+  }, []);
+
+  const clearResponse = useCallback(() => {
+    setResponse('');
+    setError(null);
+  }, []);
+
+  const streamResponse = useCallback(
+    async (prompt: string) => {
+      abortStream();
+      setResponse('');
+      setError(null);
+      setIsLoading(true);
+
+      const controller = new AbortController();
+      abortControllerRef.current = controller;
+
+      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,
+            temperature: options.temperature ?? 0.7,
+            stream: true,
+            system: options.system,
+            messages: [{ role: 'user', content: prompt }],
+          }),
+          signal: controller.signal,
+        });
+
+        if (!apiResponse.ok) {
+          const errorText = await apiResponse.text();
+          throw new Error(errorText || `Claude API error: ${apiResponse.status}`);
+        }
+
+        if (!apiResponse.body) {
+          throw new Error('Streaming is not supported in this environment.');
+        }
+
+        const reader = apiResponse.body.getReader();
+        const decoder = new TextDecoder();
+        let buffer = '';
+
+        while (true) {
+          const { done, value } = await reader.read();
+
+          if (done) {
+            break;
+          }
+
+          buffer += decoder.decode(value, { stream: true });
+          const lines = buffer.split('\n');
+          buffer = lines.pop() || '';
+
+          for (const rawLine of lines) {
+            const line = rawLine.trim();
+
+            if (!line || !line.startsWith('data:')) {
+              continue;
+            }
+
+            const payload = line.slice(5).trim();
+            if (!payload || payload === '[DONE]') {
+              continue;
+            }
+
+            try {
+              const parsed = JSON.parse(payload);
+              if (
+                parsed.type === 'content_block_delta' &&
+                parsed.delta?.type === 'text_delta' &&
+                typeof parsed.delta.text === 'string'
+              ) {
+                setResponse(prev => prev + parsed.delta.text);
+              }
+            } catch {
+              // Ignore malformed stream chunks and keep consuming the stream.
+            }
+          }
+        }
+      } catch (err) {
+        if ((err as Error).name !== 'AbortError') {
+          setError((err as Error).message || 'Failed to stream response');
+        }
+      } finally {
+        abortControllerRef.current = null;
+        setIsLoading(false);
+      }
+    },
+    [abortStream, options],
+  );
+
+  useEffect(() => {
+    return () => {
+      abortControllerRef.current?.abort();
+    };
+  }, []);
+
+  return {
+    response,
+    isLoading,
+    error,
+    streamResponse,
+    abortStream,
+    clearResponse,
+  };
+}

package/src/hooks/useImageAnalysis.ts

@@ -0,0 +1,193 @@
+import { useCallback, useState } from 'react';
+
+interface UseImageAnalysisOptions {
+  apiKey: string;
+  model?: string;
+  maxTokens?: number;
+  system?: string;
+  uriToBase64?: (uri: string) => Promise<string>;
+}
+
+interface AnalyzeImageInput {
+  image: string;
+  mediaType?: string;
+  prompt?: string;
+}
+
+interface UseImageAnalysisReturn {
+  description: string;
+  isLoading: boolean;
+  error: string | null;
+  analyzeImage: (input: AnalyzeImageInput) => Promise<string | null>;
+  clearDescription: () => void;
+}
+
+interface ParsedImageData {
+  base64: string;
+  mediaType: string;
+}
+
+const DATA_URI_REGEX = /^data:(image\/[a-zA-Z0-9.+-]+);base64,(.*)$/;
+
+function getMediaTypeFromUri(uri: string): string {
+  const normalized = uri.toLowerCase();
+
+  if (normalized.includes('.png')) {
+    return 'image/png';
+  }
+  if (normalized.includes('.webp')) {
+    return 'image/webp';
+  }
+  if (normalized.includes('.gif')) {
+    return 'image/gif';
+  }
+
+  return 'image/jpeg';
+}
+
+function arrayBufferToBase64(buffer: ArrayBuffer): string {
+  let binary = '';
+  const bytes = new Uint8Array(buffer);
+  const chunkSize = 0x8000;
+
+  for (let i = 0; i < bytes.length; i += chunkSize) {
+    const chunk = bytes.subarray(i, i + chunkSize);
+    binary += String.fromCharCode(...chunk);
+  }
+
+  if (typeof btoa !== 'function') {
+    throw new Error('Base64 conversion is unavailable. Provide uriToBase64 in hook options.');
+  }
+
+  return btoa(binary);
+}
+
+async function defaultUriToBase64(uri: string): Promise<string> {
+  const response = await fetch(uri);
+  if (!response.ok) {
+    throw new Error(`Failed to read image from URI: ${response.status}`);
+  }
+
+  const imageBuffer = await response.arrayBuffer();
+  return arrayBufferToBase64(imageBuffer);
+}
+
+export function useImageAnalysis(options: UseImageAnalysisOptions): UseImageAnalysisReturn {
+  const [description, setDescription] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const normalizeImage = useCallback(
+    async (image: string, mediaType?: string): Promise<ParsedImageData> => {
+      const dataUriMatch = image.match(DATA_URI_REGEX);
+      if (dataUriMatch) {
+        const matchedMediaType = dataUriMatch[1];
+        const base64Data = dataUriMatch[2];
+        return {
+          base64: base64Data,
+          mediaType: mediaType || matchedMediaType,
+        };
+      }
+
+      const isLikelyUri = /^(https?:\/\/|file:\/\/|content:\/\/|ph:\/\/|assets-library:\/\/)/i.test(
+        image,
+      );
+
+      if (isLikelyUri) {
+        const toBase64 = options.uriToBase64 || defaultUriToBase64;
+        const base64 = await toBase64(image);
+        return {
+          base64,
+          mediaType: mediaType || getMediaTypeFromUri(image),
+        };
+      }
+
+      return {
+        base64: image,
+        mediaType: mediaType || 'image/jpeg',
+      };
+    },
+    [options.uriToBase64],
+  );
+
+  const clearDescription = useCallback(() => {
+    setDescription('');
+    setError(null);
+  }, []);
+
+  const analyzeImage = useCallback(
+    async (input: AnalyzeImageInput) => {
+      setIsLoading(true);
+      setError(null);
+
+      try {
+        const parsedImage = await normalizeImage(input.image, input.mediaType);
+
+        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: [
+                  {
+                    type: 'image',
+                    source: {
+                      type: 'base64',
+                      media_type: parsedImage.mediaType,
+                      data: parsedImage.base64,
+                    },
+                  },
+                  {
+                    type: 'text',
+                    text: input.prompt || 'Describe this image in detail.',
+                  },
+                ],
+              },
+            ],
+          }),
+        });
+
+        if (!apiResponse.ok) {
+          const errorText = await apiResponse.text();
+          throw new Error(errorText || `Claude API error: ${apiResponse.status}`);
+        }
+
+        const data = await apiResponse.json();
+        const textResult = data?.content?.find?.(
+          (item: { type?: string; text?: string }) => item?.type === 'text',
+        )?.text;
+
+        if (!textResult) {
+          throw new Error('No description returned from Claude vision API.');
+        }
+
+        setDescription(textResult);
+        return textResult;
+      } catch (err) {
+        const message = (err as Error).message || 'Failed to analyze image';
+        setError(message);
+        return null;
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [normalizeImage, options],
+  );
+
+  return {
+    description,
+    isLoading,
+    error,
+    analyzeImage,
+    clearDescription,
+  };
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export { useAIChat } from './hooks/useAIChat';
+export { useAIStream } from './hooks/useAIStream';
+export { useImageAnalysis } from './hooks/useImageAnalysis';
+export { useAIForm } from './hooks/useAIForm';

package/src/types/index.ts

@@ -0,0 +1,15 @@
+export interface Message {
+  role: 'user' | 'assistant';
+  content: string;
+}
+
+export interface AIProvider {
+  apiKey: string;
+  provider?: 'claude' | 'openai' | 'gemini';
+  model?: string;
+}
+
+export interface AIResponse {
+  content: string;
+  error?: string;
+}

package/tsconfig.json

@@ -0,0 +1,44 @@
+{
+  // Visit https://aka.ms/tsconfig to read more about this file
+  "compilerOptions": {
+    // File Layout
+    // "rootDir": "./src",
+    // "outDir": "./dist",
+
+    // Environment Settings
+    // See also https://aka.ms/tsconfig/module
+    "module": "nodenext",
+    "target": "esnext",
+    "types": [],
+    // For nodejs:
+    // "lib": ["esnext"],
+    // "types": ["node"],
+    // and npm install -D @types/node
+
+    // Other Outputs
+    "sourceMap": true,
+    "declaration": true,
+    "declarationMap": true,
+
+    // Stricter Typechecking Options
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+
+    // Style Options
+    // "noImplicitReturns": true,
+    // "noImplicitOverride": true,
+    // "noUnusedLocals": true,
+    // "noUnusedParameters": true,
+    // "noFallthroughCasesInSwitch": true,
+    // "noPropertyAccessFromIndexSignature": true,
+
+    // Recommended Options
+    "strict": true,
+    "jsx": "react-jsx",
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true,
+    "noUncheckedSideEffectImports": true,
+    "moduleDetection": "force",
+    "skipLibCheck": true,
+  }
+}