DEV Community

S M Tahosin
S M Tahosin

Posted on

Building a Free AI Chat Platform: The Architecture Behind HOCKS AI

#ai #firebase #architecture #opensource

I built HOCKS AI — a free multi-modal AI platform with chat, image analysis, video understanding, and a web builder. Here's the technical architecture.

The Challenge

Build an AI platform that's:

  • Free for users (no API keys needed)
  • Fast with streaming responses
  • Secure (API keys never exposed to frontend)
  • Cost-efficient (< $1/day for hundreds of users)

Architecture 

Frontend (React + Vite)
    ↓  SSE Stream
Firebase Cloud Functions (Node.js)
    ↓  API calls
OpenRouter → Free AI Models
    ↓
Streaming response back to user
Enter fullscreen mode Exit fullscreen mode

Server-Sent Events for Streaming

Instead of WebSockets (expensive, complex), I use SSE through Firebase Cloud Functions:

exports.streamChat = onRequest({
  cors: true,
  secrets: [openrouterApiKey],
}, async (req, res) => {
  res.setHeader("Content-Type", "text/event-stream");
  res.setHeader("Cache-Control", "no-cache");

  const response = await fetch(
    "https://openrouter.ai/api/v1/chat/completions",
    {
      method: "POST",
      headers: {
        Authorization: "Bearer " + openrouterApiKey.value(),
      },
      body: JSON.stringify({
        model: "deepseek/deepseek-chat-v3-0324:free",
        messages: req.body.messages,
        stream: true,
      }),
    }
  );

  for await (const chunk of response.body) {
    res.write(chunk);
  }
  res.end();
});
Enter fullscreen mode Exit fullscreen mode

Free Model Strategy

OpenRouter offers free models. I route different tasks to different models:

Task Model Cost
Chat DeepSeek V3 Free
Code Gen DeepSeek V3 Free
Image Analysis Google Gemini Free tier

Cost Tracking Per User

Every API call is tracked in Firestore to prevent abuse:

const costRef = db.doc("users/" + uid + "/analytics/costs");
await costRef.update({
  totalCost: admin.firestore.FieldValue.increment(estimatedCost),
  requestCount: admin.firestore.FieldValue.increment(1),
});
Enter fullscreen mode Exit fullscreen mode

Security: No Exposed Keys

The frontend never touches an API key. All AI calls go through Firebase Cloud Functions which access secrets via defineSecret():

const openrouterApiKey = defineSecret("OPENROUTER_API_KEY");

exports.streamChat = onRequest({
  secrets: [openrouterApiKey],
}, async (req, res) => {
  // Key is only available server-side
  const key = openrouterApiKey.value();
});
Enter fullscreen mode Exit fullscreen mode

The frontend bundle was scanned — zero API keys leaked.

Features Built

  • Multi-model chat with streaming responses
  • Image analysis (upload any image, AI describes it)
  • Video understanding (analyze video content)
  • Web builder (AI generates full web pages)
  • Code generation with syntax highlighting
  • Conversation history stored in Firestore
  • Google OAuth + email/password auth
  • Usage tracking per user

Results

  • $0.00/month in AI costs (free models)
  • < 2s time to first token
  • Zero exposed API keys in frontend bundle
  • Firebase Hosting with custom domain

Lessons Learned

  1. SSE > WebSockets for AI streaming — simpler, cheaper, works with Cloud Functions
  2. Free models are good enough — DeepSeek V3 is surprisingly capable
  3. OpenRouter is a lifesaver — one API key, access to 100+ models
  4. Firebase secrets make API key management painless
  5. Track costs early — even with free models, you want usage data

Live demo: hocks.app

Source code: github.com/x-tahosin/hocks-ai

What's your approach to building free AI products? Share your stack below!

Top comments (0)