Trail

Inspiration

As an avid hiker and runner, I've experienced the frustration of losing cell service on trails when I need information the most. Traditional navigation apps fail when you're deep in nature, and AI assistants require constant internet connectivity. I wanted to create a solution that combines the power of modern AI with true offline capabilities, ensuring that adventurers always have an intelligent companion by their side, regardless of connectivity.

The Google Chrome Built-in AI Challenge presented the perfect opportunity to explore how on-device AI could transform outdoor recreation. I envisioned a tool that could answer questions about plants, wildlife, first aid, and navigation, all without requiring a single byte of data once you're on the trail.

What it does

Trail is a Progressive Web App (PWA) that leverages Chrome's Built-in AI (Gemini Nano) to provide offline trip planning and real-time navigation assistance. Here's what makes it unique:

Core Features

Intelligent Trip Planning

Users input start/end points, trip purpose (hiking, running, cycling, etc.), and difficulty level
The app generates detailed routes using Google Maps Routes API with accurate GPS coordinates
Google Places API identifies real landmarks and points of interest along the route
Google Gemini API creates a comprehensive knowledge base covering first aid, local flora/fauna, weather tips, and navigation advice

Real-Time GPS Simulation

Simulates GPS tracking with realistic variations (drift, speed changes, elevation)
Displays position on an interactive map powered by MapLibre GL JS
Automatically alerts users when approaching landmarks or points of interest

Offline AI Chat Assistant

Uses Chrome's Built-in Prompt API (Gemini Nano) for on-device inference
Supports multimodal input (text + images) for plant/wildlife identification
Contextually aware of your current GPS location and trip details
Answers questions instantly without requiring internet connectivity

Complete Offline Functionality

Service Worker caches all UI assets for offline access
IndexedDB stores trip data, GPS routes, landmarks, and AI knowledge bases
PWA manifest enables "Add to Home Screen" for native app experience
Offline indicator shows connectivity status

Example Use Case

Imagine you're hiking the Wissahickon Valley trail. Before you leave (while still online), you create a trip in Trail. The app generates your route, identifies landmarks like Valley Green Inn and Devil's Pool, and builds an AI knowledge base about local wildlife, edible plants, and trail safety.

During your hike, even with no cell service, you can:

See your position on the map in real-time
Ask "What's this mushroom?" and attach a photo for AI identification
Get first aid advice: "How do I treat a bee sting?"
Learn about your surroundings: "Tell me about the trees in this area"

How I built it

Tech Stack

AI Integration

Chrome Built-in Prompt API (window.ai) for on-device Gemini Nano inference
Google Gemini API (backend) for knowledge base generation
Custom context injection for GPS-aware and trip-aware responses

Maps & Location

Google Maps Platform APIs:
- Routes API (accurate polyline generation)
- Places API (POI discovery)
- Geocoding API (address resolution)
MapLibre GL JS for offline-capable map rendering
Custom GPS simulation with realistic drift and accuracy modeling

Data & Storage

Dexie.js wrapper for IndexedDB (trips, sessions, messages)
Service Worker (Workbox-inspired) for asset caching
Web App Manifest for PWA installation

Architecture Highlights

I designed a hybrid approach that maximizes both data quality and offline capability:

Online Trip Creation Phase:
- Google Maps generates accurate route polylines
- Places API identifies real landmarks within 500m of route
- Gemini API creates trip-specific knowledge base (2000-4000 words)
- All data stored locally in IndexedDB
Offline Trip Execution Phase:
- GPS simulator uses stored polyline coordinates
- MapLibre renders map with cached tiles
- Chrome Built-in AI uses stored knowledge base as context
- All AI inference happens on-device via Gemini Nano
Progressive Enhancement:
- App checks for window.ai availability
- Falls back gracefully if Chrome AI isn't available
- Guides users through Chrome Canary setup if needed

Code Organization

trail/
├── app/                    # Next.js app router
│   ├── trips/             # Trip management UI
│   ├── trip/[id]/         # Trip session page
│   └── api/               # Backend API routes
├── components/            # React components
│   ├── GPSSimulator.tsx   # GPS tracking & playback
│   ├── MapView.tsx        # MapLibre integration
│   └── ui/                # Shadcn components
├── lib/
│   ├── ai.ts              # Chrome Built-in AI wrapper
│   ├── google-maps.ts     # Google Maps API integration
│   ├── db.ts              # Dexie IndexedDB schema
│   └── mock-trail-data.ts # GPS simulation logic
└── public/
    ├── sw.js              # Service Worker
    └── manifest.json      # PWA manifest

Challenges I ran into

1. Integrating Chrome Built-in AI API

The Prompt API was in active development during this hackathon. I had to:

Track API changes across Chrome Dev releases
Handle graceful degradation when AI wasn't available
Implement feature detection (window.ai?.canCreateTextSession)
Work around initial rate limiting and context window constraints

2. Multimodal Image Processing

Getting image uploads to work with the Prompt API required careful handling:

Converting File objects to base64 for API compatibility
Managing MIME type detection and validation
Optimizing image sizes to fit within context limits
Ensuring images were properly embedded in the AI context

3. Realistic GPS Simulation

Creating believable GPS data was harder than expected:

Initial version had unrealistic "jumps" between points
Had to model GPS drift perpendicular to route direction
Added clamping to prevent excessive deviations
Incorporated dynamic speed, elevation, and accuracy variations
Ensured simulated path stayed true to the actual route

4. Offline-First Architecture

Making the entire app work offline required solving multiple puzzles:

Service Worker scope and caching strategy conflicts
IndexedDB schema versioning (breaking changes required migration)
HTML caching invalidation while still providing offline fallback
Asset precaching vs. runtime caching trade-offs
Testing offline behavior without breaking hot reload in development

Accomplishments that I'm proud of

Hybrid Data Architecture

I designed an elegant solution that gets the best of both worlds:

Online: High-quality real-world data from Google Maps and Places
Offline: Instant AI responses via on-device Gemini Nano
Result: Professional-grade trip planning with zero-latency AI assistance

Production-Ready PWA

Trail isn't just a demo—it's a fully deployed, installable Progressive Web App:

Live at www.trailplanner101.com
Passes PWA audits (installable, offline-capable, mobile-responsive)
Polished UI with loading states, animations, and error handling
Comprehensive documentation (README, ARCHITECTURE)

What I learned

On-Device AI is Transformative

Working with Chrome's Built-in AI showed me the future of AI applications. Having a capable language model running locally on the device changes what's possible: