@mobileai/react-native 0.1.0

package/lib/typescript/src/utils/logger.d.ts

@@ -0,0 +1,7 @@
+export declare const logger: {
+    info: (context: string, ...args: any[]) => void;
+    warn: (context: string, ...args: any[]) => void;
+    error: (context: string, ...args: any[]) => void;
+    debug: (context: string, ...args: any[]) => void;
+};
+//# sourceMappingURL=logger.d.ts.map

package/lib/typescript/src/utils/logger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"logger.d.ts","sourceRoot":"","sources":["../../../../src/utils/logger.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,MAAM;oBACD,MAAM,WAAW,GAAG,EAAE;oBAGtB,MAAM,WAAW,GAAG,EAAE;qBAGrB,MAAM,WAAW,GAAG,EAAE;qBAGtB,MAAM,WAAW,GAAG,EAAE;CAKxC,CAAC"}

package/package.json

@@ -0,0 +1,143 @@
+{
+  "name": "@mobileai/react-native",
+  "version": "0.1.0",
+  "description": "Autonomous AI agent for React Native — reads your UI via Fiber tree, understands layout context, and interacts with your app. Zero wrappers.",
+  "main": "./lib/module/index.js",
+  "source": "./src/index.ts",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/__mocks__",
+    "!**/.*",
+    "!mcp-server"
+  ],
+  "scripts": {
+    "example": "yarn workspace @mobileai/react-native-example",
+    "clean": "del-cli lib",
+    "prepare": "bob build",
+    "typecheck": "tsc",
+    "lint": "eslint \"**/*.{js,ts,tsx}\"",
+    "test": "jest"
+  },
+  "keywords": [
+    "react-native",
+    "ai",
+    "agent",
+    "agentic",
+    "gemini",
+    "llm",
+    "autonomous",
+    "fiber-tree",
+    "page-agent",
+    "mcp",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mohamed2m2018/react-native-ai-agent.git"
+  },
+  "author": "Mohamed Salah <mohamedsalah@example.com> (https://example.com)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/mohamed2m2018/react-native-ai-agent/issues"
+  },
+  "homepage": "https://github.com/mohamed2m2018/react-native-ai-agent#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@eslint/compat": "^1.3.2",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.35.0",
+    "@react-native/babel-preset": "0.83.0",
+    "@react-native/eslint-config": "0.83.0",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.1.12",
+    "@types/react-native": "^0.72.8",
+    "del-cli": "^6.0.0",
+    "eslint": "^9.35.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "jest": "^29.7.0",
+    "prettier": "^2.8.8",
+    "react": "19.2.0",
+    "react-native": "0.83.2",
+    "react-native-builder-bob": "^0.40.18",
+    "turbo": "^2.5.6",
+    "typescript": "^5.9.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@4.11.0",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "es5",
+    "useTabs": false
+  },
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "create-react-native-library": {
+    "type": "library",
+    "languages": "js",
+    "tools": [
+      "eslint",
+      "jest"
+    ],
+    "version": "0.57.2"
+  },
+  "dependencies": {}
+}

package/src/components/AIAgent.tsx

@@ -0,0 +1,222 @@
+/**
+ * AIAgent — Root provider component for the AI agent.
+ *
+ * Wraps the app and provides:
+ * - Fiber tree root ref for element auto-detection
+ * - Navigation ref for auto-navigation
+ * - Floating chat bar for user input
+ * - Agent runtime context for useAction hooks
+ */
+
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { View, StyleSheet } from 'react-native';
+import { AgentRuntime } from '../core/AgentRuntime';
+import { GeminiProvider } from '../providers/GeminiProvider';
+import { AgentContext } from '../hooks/useAction';
+import { AgentChatBar } from './AgentChatBar';
+import { AgentOverlay } from './AgentOverlay';
+import { logger } from '../utils/logger';
+import { MCPBridge } from '../core/MCPBridge';
+import type { AgentConfig, ExecutionResult, ToolDefinition, AgentStep } from '../core/types';
+
+// ─── Context ───────────────────────────────────────────────────
+
+
+// ─── Props ─────────────────────────────────────────────────────
+
+interface AIAgentProps {
+  /** Gemini API key */
+  apiKey: string;
+  /** Gemini model name */
+  model?: string;
+  /** Navigation container ref (from useNavigationContainerRef) */
+  navRef?: any;
+  /** UI language */
+  language?: 'en' | 'ar';
+  /** Max agent steps per request */
+  maxSteps?: number;
+  /** Show/hide the chat bar */
+  showChatBar?: boolean;
+  /** Children — the actual app */
+  children: React.ReactNode;
+  /** Callback when agent completes */
+  onResult?: (result: ExecutionResult) => void;
+
+  // ── Security (mirrors page-agent.js) ──────────────────────
+
+  /** Refs of elements the AI must NOT interact with */
+  interactiveBlacklist?: React.RefObject<any>[];
+  /** If set, AI can ONLY interact with these elements */
+  interactiveWhitelist?: React.RefObject<any>[];
+  /** Called before each step */
+  onBeforeStep?: (stepCount: number) => Promise<void> | void;
+  /** Called after each step */
+  onAfterStep?: (history: AgentStep[]) => Promise<void> | void;
+  /** Called before task starts */
+  onBeforeTask?: () => Promise<void> | void;
+  /** Called after task completes */
+  onAfterTask?: (result: ExecutionResult) => Promise<void> | void;
+  /** Transform screen content before LLM sees it (for data masking) */
+  transformScreenContent?: (content: string) => Promise<string> | string;
+  /** Override or remove built-in tools (null = remove) */
+  customTools?: Record<string, ToolDefinition | null>;
+  /** Instructions to guide agent behavior */
+  instructions?: {
+    system?: string;
+    getScreenInstructions?: (screenName: string) => string | undefined | null;
+  };
+  /** Delay between steps in ms */
+  stepDelay?: number;
+  /** WebSocket URL to companion MCP server bridge (e.g., ws://localhost:3101) */
+  mcpServerUrl?: string;
+}
+
+// ─── Component ─────────────────────────────────────────────────
+
+export function AIAgent({
+  apiKey,
+  model = 'gemini-2.5-flash',
+  navRef,
+  language = 'en',
+  maxSteps = 10,
+  showChatBar = true,
+  children,
+  onResult,
+  // Security props
+  interactiveBlacklist,
+  interactiveWhitelist,
+  onBeforeStep,
+  onAfterStep,
+  onBeforeTask,
+  onAfterTask,
+  transformScreenContent,
+  customTools,
+  instructions,
+  stepDelay,
+  mcpServerUrl,
+}: AIAgentProps) {
+  const rootViewRef = useRef<any>(null);
+  const [isThinking, setIsThinking] = useState(false);
+  const [statusText, setStatusText] = useState('');
+  const [lastResult, setLastResult] = useState<ExecutionResult | null>(null);
+
+  // ─── Create Runtime ──────────────────────────────────────────
+
+  const config: AgentConfig = useMemo(() => ({
+    apiKey,
+    model,
+    language,
+    maxSteps,
+    interactiveBlacklist,
+    interactiveWhitelist,
+    onBeforeStep,
+    onAfterStep,
+    onBeforeTask,
+    onAfterTask,
+    transformScreenContent,
+    customTools,
+    instructions,
+    stepDelay,
+    mcpServerUrl,
+  }), [
+    apiKey, model, language, maxSteps,
+    interactiveBlacklist, interactiveWhitelist,
+    onBeforeStep, onAfterStep, onBeforeTask, onAfterTask,
+    transformScreenContent, customTools, instructions, stepDelay,
+    mcpServerUrl,
+  ]);
+
+  const provider = useMemo(() => new GeminiProvider(apiKey, model), [apiKey, model]);
+
+  const runtime = useMemo(
+    () => new AgentRuntime(provider, config, rootViewRef.current, navRef),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [provider, config],
+  );
+
+  // Update refs when they change
+  useEffect(() => {
+    runtime.updateRefs(rootViewRef.current, navRef);
+  }, [runtime, navRef]);
+
+  // ─── MCP Bridge ──────────────────────────────────────────────
+
+  useEffect(() => {
+    if (!mcpServerUrl) return;
+
+    logger.info('AIAgent', `Setting up MCP bridge at ${mcpServerUrl}`);
+    const bridge = new MCPBridge(mcpServerUrl, runtime);
+
+    return () => {
+      bridge.destroy();
+    };
+  }, [mcpServerUrl, runtime]);
+
+  // ─── Execute ──────────────────────────────────────────────────
+
+  const handleSend = useCallback(async (message: string) => {
+    if (!message.trim()) return;
+
+    logger.info('AIAgent', `User message: "${message}"`);
+    setIsThinking(true);
+    setStatusText('Thinking...');
+    setLastResult(null);
+
+    try {
+      // Ensure we have the latest Fiber tree ref
+      runtime.updateRefs(rootViewRef.current, navRef);
+
+      const result = await runtime.execute(message);
+
+      setLastResult(result);
+      onResult?.(result);
+
+      logger.info('AIAgent', `Result: ${result.success ? '✅' : '❌'} ${result.message}`);
+    } catch (error: any) {
+      logger.error('AIAgent', 'Execution failed:', error);
+      setLastResult({
+        success: false,
+        message: `Error: ${error.message}`,
+        steps: [],
+      });
+    } finally {
+      setIsThinking(false);
+      setStatusText('');
+    }
+  }, [runtime, navRef, onResult]);
+
+  // ─── Render ──────────────────────────────────────────────────
+
+  return (
+    <AgentContext.Provider value={runtime}>
+      <View ref={rootViewRef} style={styles.root} collapsable={false}>
+        {children}
+      </View>
+
+      {/* Overlay (shown while thinking) */}
+      <AgentOverlay visible={isThinking} statusText={statusText} />
+
+      {/* Chat bar */}
+      {showChatBar && (
+        <AgentChatBar
+          onSend={handleSend}
+          isThinking={isThinking}
+          lastResult={lastResult}
+          language={language}
+        />
+      )}
+    </AgentContext.Provider>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+  },
+});

package/src/components/AgentChatBar.tsx

@@ -0,0 +1,136 @@
+/**
+ * AgentChatBar — Floating chat input at the bottom of the screen.
+ * User sends messages here, and results are shown inline.
+ */
+
+import { useState } from 'react';
+import {
+  View,
+  TextInput,
+  Pressable,
+  Text,
+  StyleSheet,
+  KeyboardAvoidingView,
+  Platform,
+} from 'react-native';
+import type { ExecutionResult } from '../core/types';
+
+interface AgentChatBarProps {
+  onSend: (message: string) => void;
+  isThinking: boolean;
+  lastResult: ExecutionResult | null;
+  language: 'en' | 'ar';
+}
+
+export function AgentChatBar({ onSend, isThinking, lastResult, language }: AgentChatBarProps) {
+  const [text, setText] = useState('');
+  const isArabic = language === 'ar';
+
+  const handleSend = () => {
+    if (text.trim() && !isThinking) {
+      onSend(text.trim());
+      setText('');
+    }
+  };
+
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+      style={styles.container}
+    >
+      {/* Result message */}
+      {lastResult && (
+        <View style={[styles.resultBubble, lastResult.success ? styles.resultSuccess : styles.resultError]}>
+          <Text style={styles.resultText}>{lastResult.message}</Text>
+        </View>
+      )}
+
+      {/* Input row */}
+      <View style={styles.inputRow}>
+        <TextInput
+          style={[styles.input, isArabic && styles.inputRTL]}
+          placeholder={isArabic ? 'اكتب طلبك...' : 'Ask the AI agent...'}
+          placeholderTextColor="#999"
+          value={text}
+          onChangeText={setText}
+          onSubmitEditing={handleSend}
+          returnKeyType="send"
+          editable={!isThinking}
+          multiline={false}
+        />
+        <Pressable
+          style={[styles.sendButton, isThinking && styles.sendButtonDisabled]}
+          onPress={handleSend}
+          disabled={isThinking || !text.trim()}
+        >
+          <Text style={styles.sendButtonText}>
+            {isThinking ? '⏳' : '🚀'}
+          </Text>
+        </Pressable>
+      </View>
+    </KeyboardAvoidingView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    paddingHorizontal: 12,
+    paddingBottom: Platform.OS === 'ios' ? 34 : 12,
+    paddingTop: 8,
+    backgroundColor: 'rgba(26, 26, 46, 0.95)',
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+  },
+  resultBubble: {
+    borderRadius: 12,
+    padding: 12,
+    marginBottom: 8,
+  },
+  resultSuccess: {
+    backgroundColor: 'rgba(40, 167, 69, 0.2)',
+  },
+  resultError: {
+    backgroundColor: 'rgba(220, 53, 69, 0.2)',
+  },
+  resultText: {
+    color: '#fff',
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  inputRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  input: {
+    flex: 1,
+    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+    borderRadius: 24,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    color: '#fff',
+    fontSize: 16,
+  },
+  inputRTL: {
+    textAlign: 'right',
+    writingDirection: 'rtl',
+  },
+  sendButton: {
+    width: 44,
+    height: 44,
+    borderRadius: 22,
+    backgroundColor: 'rgba(255, 255, 255, 0.15)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  sendButtonDisabled: {
+    opacity: 0.5,
+  },
+  sendButtonText: {
+    fontSize: 20,
+  },
+});

package/src/components/AgentOverlay.tsx

@@ -0,0 +1,48 @@
+/**
+ * AgentOverlay — Subtle thinking indicator shown while the AI agent is processing.
+ */
+
+import { View, Text, StyleSheet, ActivityIndicator } from 'react-native';
+
+interface AgentOverlayProps {
+  visible: boolean;
+  statusText: string;
+}
+
+export function AgentOverlay({ visible, statusText }: AgentOverlayProps) {
+  if (!visible) return null;
+
+  return (
+    <View style={styles.overlay} pointerEvents="none">
+      <View style={styles.pill}>
+        <ActivityIndicator size="small" color="#fff" />
+        <Text style={styles.text}>{statusText || 'Thinking...'}</Text>
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    position: 'absolute',
+    top: 60,
+    left: 0,
+    right: 0,
+    alignItems: 'center',
+    zIndex: 9999,
+  },
+  pill: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    backgroundColor: 'rgba(26, 26, 46, 0.9)',
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderRadius: 20,
+  },
+  text: {
+    color: '#fff',
+    fontSize: 14,
+    fontWeight: '500',
+  },
+});