Skip to content

WARP.md

Latest commit

 

History

History
96 lines (75 loc) · 3.54 KB

WARP.md

File metadata and controls

96 lines (75 loc) · 3.54 KB

WARP.md

This file provides guidance to WARP (warp.dev) when working with code in this repository.

Project Overview

This is a React Native Expo app showcasing LLM capabilities using ExecutorchJS on mobile devices. The app demonstrates various LLM use cases including chat, tool calling, structured output, and voice chat functionality.

Development Commands

Essential Commands

  • Start development server: npm start (Expo development server)
  • Run on iOS: npm run ios
  • Run on Android: npm run android
  • Run on web: npm run web
  • Type check: npm run typecheck
  • Lint and fix: npm run lint

Package Management

This project uses npm for package management. The workspace dependency react-native-executorch: workspace:* indicates this is part of a larger monorepo structure.

Architecture

App Structure

The app uses Expo Router with a drawer navigation pattern:

  • Main entry: app/index.tsx - Demo selection screen
  • Layout: app/_layout.tsx - Drawer navigation with generation state management
  • Demo screens: Each in its own directory under app/
    • llm/ - Basic LLM chat
    • llm_tool_calling/ - LLM with calendar/brightness tools
    • llm_structured_output/ - Structured output demo
    • voice_chat/ - Speech-to-text + LLM interaction

Key Components

  • Messages: Chat message display with scrolling and deletion
  • MessageItem: Individual message rendering
  • Spinner: Loading states with progress indicators
  • AnimatedChatLoading: Typing animation for responses

State Management

  • GeneratingContext: Global context to manage generation state across navigation
  • useLLM hook: From react-native-executorch for LLM operations
  • useSpeechToText hook: For voice input processing

Models Used

  • LLAMA3_2_1B_SPINQUANT - Basic chat
  • HAMMER2_1_1_5B_QUANTIZED - Tool calling
  • QWEN3_0_6B_QUANTIZED - Voice chat
  • WHISPER_TINY_EN - Speech recognition

Key Technical Details

ExecutorchJS Integration

All LLM functionality is handled through the react-native-executorch package, which provides:

  • Model loading with download progress
  • Message streaming
  • Tool calling capabilities
  • Speech-to-text processing

Tool Calling System

The tool calling demo (utils/tools.ts) implements:

  • brightness: Control screen brightness
  • read_calendar: Read calendar events
  • add_event_to_calendar: Create calendar events

Permission Handling

The app requests permissions for:

  • Calendar access (for tool calling features)
  • Brightness control
  • Microphone access (for voice chat)

Platform-Specific Features

  • iOS entitlements for increased memory limits (required for LLM processing)
  • Different keyboard behaviors for iOS vs Android
  • Emulator detection for voice features

Type Configuration

  • TypeScript strict mode enabled
  • Custom module declarations for SVG imports
  • Path mapping for the executorch package

Development Notes

  • All models are downloaded on first use with progress indicators
  • Generation state is tracked globally to prevent navigation during processing
  • Voice chat disabled on emulator due to recording limitations
  • The app uses custom fonts (Aeonik Regular/Medium)
  • SVG icons are imported as React components via react-native-svg-transformer

File Structure Patterns

  • app/ contains all screens using Expo Router file-based routing
  • components/ contains reusable UI components
  • utils/ contains business logic (tools, helpers)
  • assets/ contains fonts and SVG icons
  • Root level contains configuration files and global utilities