I Built a Free Multi-Modal AI Platform with OpenRouter, Gemini & Firebase — Here's How

#ai #webdev #firebase #opensource

Have you ever wanted to build your own AI platform — one that handles chat, image analysis, video analysis, and even generates full websites — all without paying a fortune for API costs?

I built HOCKS AI, a production-ready multi-modal AI platform that uses free models for chat and code generation while reserving paid credits only where they matter most.

🔗 Live Demo: hocks.app
📦 Source Code: GitHub

🧠 What is HOCKS AI?

HOCKS AI is a premium 4D cinematic AI assistant platform with:

Feature	AI Model	Cost
💬 Streaming Chat	OpenRouter GPT-OSS-120B	Free
🌐 Website Builder	OpenRouter Nemotron-3 120B	Free
🖼️ Image Analysis	Google Gemini 2.0 Flash	~$0.002/call
🎬 Video Analysis	Google Gemini 2.0 Flash	~$0.003/call
🧠 Memory System	Firebase Firestore	Free
🔐 Admin Dashboard	Firebase Auth + Firestore	Free

The key insight: use free models where quality is good enough, and save paid credits for tasks that truly need them (vision/multimodal).

🏗️ Architecture

┌─────────────────────────────────────────────┐
│          Frontend (React + Vite)             │
│        Firebase Hosting / hocks.app          │
└──────────────────┬──────────────────────────┘
                   │
                   ▼
┌─────────────────────────────────────────────┐
│       Firebase Cloud Functions (Node 20)     │
├─────────────────────────────────────────────┤
│  Chat ────────► OpenRouter (Free Models)     │
│  Web Builder ─► OpenRouter (Free Models)     │
│  Image ───────► Google Gemini 2.0 Flash      │
│  Video ───────► Google Gemini 2.0 Flash      │
└──────────────────┬──────────────────────────┘
                   │
                   ▼
┌─────────────────────────────────────────────┐
│           Firebase Services                  │
│  • Firestore (users, memories, analytics)    │
│  • Authentication (Google Sign-In)           │
│  • Secret Manager (all API keys)             │
└─────────────────────────────────────────────┘

Zero API keys in frontend code. Every AI call goes through Firebase Cloud Functions, which read secrets from Firebase Secret Manager at runtime.

🔑 Key Technical Decisions

1. Hybrid Model Strategy

Instead of using one expensive model for everything, I split by capability:

Text-only tasks (chat, code gen) → Free OpenRouter models
- openai/gpt-oss-120b:free — OpenAI's first open-weight model, 120B params
- nvidia/nemotron-3-super-120b-a12b:free — Excellent for code generation
Vision tasks (image/video) → Google Gemini
- Free models can't match Gemini's multimodal capabilities yet

2. Streaming Chat via SSE

The chat uses Server-Sent Events for real-time streaming:

// Firebase Cloud Function streams OpenRouter response
const orResponse = await fetch(OPENROUTER_BASE, {
    method: 'POST',
    headers: {
        'Authorization': `Bearer ${openrouterApiKey.value()}`,
        'HTTP-Referer': 'https://hocks.app',
        'X-Title': 'HOCKS AI'
    },
    body: JSON.stringify({
        model: CHAT_MODEL,
        messages: openaiMessages,
        stream: true,
        temperature: 0.7,
        max_tokens: 8192
    })
})

// Stream each chunk back to client as SSE
const reader = orResponse.body.getReader()
while (true) {
    const { done, value } = await reader.read()
    if (done) break
    // Parse and forward SSE chunks
    res.write(`data: ${JSON.stringify({ text, fullText })}\n\n`)
}

3. Per-User Memory System

Users' memories persist across sessions via Firestore:

let systemContent = SYSTEM_PROMPT
if (memories.length > 0) {
    systemContent += "\n\n=== USER'S SAVED MEMORIES ===\n"
    memories.forEach((mem, i) => {
        systemContent += `${i + 1}. ${mem.content}\n`
    })
}

4. Admin Dashboard with Cost Tracking

Built-in analytics track every API call:

Real-time usage counters (chat, image, video, website)
Daily cost breakdown with $300 budget monitoring
Feature toggles (enable/disable any AI feature)
Audit logging for all admin actions

🔒 Security Architecture

Layer	Implementation
API Keys	Firebase Secret Manager (never in code)
Firestore	Rules deny direct access to admin/analytics
Admin	Custom claims + email verification
Auth	Firebase Authentication (Google Sign-In)
Audit	Every admin action logged with timestamp

💰 Total Monthly Cost: ~$0

Service	Cost
Firebase Hosting	$0 (Spark plan)
Cloud Functions	$0 (free tier: 2M invocations/month)
Firestore	$0 (free tier: 50K reads/day)
OpenRouter Chat/Code	$0 (free models)
Gemini Image/Video	~$0-5 depending on usage
Total	~$0-5/month

🚀 Get Started

git clone https://github.com/x-tahosin/hocks-ai.git
cd hocks-ai && cd functions && npm install && cd ..

# Set your API keys securely
firebase functions:secrets:set GEMINI_API_KEY
firebase functions:secrets:set OPENROUTER_API_KEY

# Deploy everything
firebase deploy

What I Learned

Free AI models are production-viable — GPT-OSS-120B handles chat beautifully
Hybrid model strategies save money — Use free for text, paid for vision
Firebase Secret Manager > .env files — Proper secret management matters
SSE streaming improves UX dramatically — Users see responses instantly
Cost tracking from day one — Know exactly what you're spending

Try it live: hocks.app
Star the repo: github.com/x-tahosin/hocks-ai

What free AI models are you using in your projects? Drop a comment below!