Forem: S M Tahosin

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

S M Tahosin — Mon, 20 Apr 2026 18:20:29 +0000

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

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();
});

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),
});

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();
});

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

SSE > WebSockets for AI streaming — simpler, cheaper, works with Cloud Functions
Free models are good enough — DeepSeek V3 is surprisingly capable
OpenRouter is a lifesaver — one API key, access to 100+ models
Firebase secrets make API key management painless
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!

How I Use AI to Write Regression Tests in Plain English (Playwright + Passmark)

S M Tahosin — Mon, 20 Apr 2026 18:13:19 +0000

Traditional E2E tests are a maintenance nightmare. I switched to AI-powered testing and here's my workflow.

The Problem

Every time a designer changes a class name, 20 tests break. None of them found a real bug.

The Solution: Passmark

Passmark lets you write tests in English:

import { test, expect } from "@playwright/test";
import { runSteps } from "passmark";

test("User can add item to cart", async ({ page }) => {
  await runSteps({
    page,
    userFlow: "Add product to shopping cart",
    steps: [
      { description: "Navigate to the store homepage" },
      { description: "Click on the first product" },
      { description: "Click Add to Cart",
        waitUntil: "Cart icon shows 1 item" },
    ],
    assertions: [
      { assertion: "Cart contains the selected product" },
      { assertion: "Cart total price is greater than $0" },
    ],
    test,
    expect,
  });
});

How It Works Under the Hood

Gemini reads the page DOM and executes each step
Smart caching — repeated steps skip AI calls (Redis-based)
Auto-healing — when cached actions fail, AI re-evaluates
Multi-model assertions — Claude AND Gemini both verify, with an arbiter for disagreements

Setup in 2 Minutes

npm init playwright@latest my-tests
cd my-tests
npm install passmark dotenv

// playwright.config.ts
import { configure } from "passmark";
configure({ ai: { gateway: "openrouter" } });

Real-World Results

I tested 5 production apps with 30 tests:

Zero CSS selectors used
Zero flaky tests from timing
Tests survive UI redesigns

Try it: github.com/bug0inc/passmark

Have questions about AI testing? Ask in the comments!

5 TypeScript Patterns Every Developer Should Know in 2026

S M Tahosin — Mon, 20 Apr 2026 18:13:15 +0000

TypeScript has evolved massively. Here are 5 patterns I use daily that make my code bulletproof.

1. Discriminated Unions for State Management

type State = 
  | { status: "idle" }
  | { status: "loading" }
  | { status: "success"; data: User[] }
  | { status: "error"; error: string };

function handleState(state: State) {
  switch (state.status) {
    case "success":
      return state.data; // TS knows data exists here
    case "error":
      return state.error; // TS knows error exists here
  }
}

The compiler narrows the type automatically. No more if (data !== undefined) everywhere.

2. `satisfies` for Type-Safe Configs

const config = {
  apiUrl: "https://api.example.com",
  timeout: 5000,
  retries: 3,
} satisfies Record<string, string | number>;

// config.apiUrl is still typed as string, not string | number
config.apiUrl.toUpperCase(); // ✅ Works!

satisfies validates the type without widening it.

3. Template Literal Types for API Routes

type ApiRoute = `/api/${string}`;
type UserRoute = `/api/users/${number}`;

function fetchApi(route: ApiRoute) { /* ... */ }

fetchApi("/api/users/123"); // ✅
fetchApi("/dashboard");      // ❌ Type error

4. Const Assertions for Readonly Everything

const ROLES = ["admin", "user", "viewer"] as const;
type Role = (typeof ROLES)[number]; // "admin" | "user" | "viewer"

// Instead of: type Role = string

5. Branded Types for Domain Safety

type UserId = string & { __brand: "UserId" };
type PostId = string & { __brand: "PostId" };

function getUser(id: UserId) { /* ... */ }
function getPost(id: PostId) { /* ... */ }

const userId = "abc" as UserId;
getUser(userId); // ✅
getPost(userId); // ❌ Type error — can't mix IDs

Which TypeScript patterns do you use the most? Drop your favorites below!

Follow me for more TypeScript and AI content: @tahosin

I Wrote 30 E2E Tests for 5 Production Apps Using Only English — No Selectors, No XPath, No Flaky Tests

S M Tahosin — Mon, 20 Apr 2026 17:44:41 +0000

What if I told you I tested 5 real production web apps — an AI platform, an e-commerce store, a scheduling tool, an API builder, and a carbon footprint analyzer — with 30 regression tests and 80+ assertions...

And I didn't write a single CSS selector?

No document.querySelector. No .btn-primary. No [data-testid="submit"]. Nothing.

Just plain English.

The Tool: Passmark

Passmark is an open-source Playwright library by Bug0. You describe tests in natural language. AI (Gemini + Claude) executes them.

Here's a real test from my suite:

test("Add product to cart with variant selection", async ({ page }) => {
  await runSteps({
    page,
    userFlow: "Add a product with specific variants to cart",
    steps: [
      { description: "\"Navigate to https://demo.vercel.store\" },"
      { description: "\"Click on the first product\" },"
      { description: "\"Select color\", data: { value: \"White\" } },"
      { description: "\"Select size\", data: { value: \"M\" } },"
      { description: "\"Click 'Add to Cart'\","
        waitUntil: "Cart shows 1 item" },
    ],
    assertions: [
      { assertion: "Cart contains the product just added" },
      { assertion: "Cart shows correct variant selected" },
      { assertion: "A total price is displayed" },
    ],
    test, expect,
  });
});

No selectors. No brittle locators. Just intent.

When the UI changes, the test self-heals. When assertions run, Claude and Gemini both verify independently — if they disagree, a third model arbitrates.

The 5 Apps I Tested

I chose 5 completely different apps to stress-test Passmark across domains:

1. HOCKS AI (My AI Platform)

URL: hocks-ai.web.app | 9 tests

Test	What it verifies
Landing page loads	Branding, CTA buttons, modern design
Sign-up form fields	Email, password, submit button present
Empty form validation	Error messages on empty submit
Invalid email rejection	Proper validation for bad emails
Google OAuth UI	Sign in with Google button exists
Wrong credentials	Graceful error, stays on login page
Chat interface	Message input, responsive layout
Navigation	Section switching works, no 404s

2. Vercel Commerce (E-Commerce)

URL: demo.vercel.store | 7 tests

The hardest tests to write traditionally — cart state, variant selection, search. With Passmark:

test("Cart persists after adding multiple items", async ({ page }) => {
  await runUserFlow({
    page,
    userFlow: "Add multiple products to cart",
    steps: `
      Navigate to the store.
      Click on the first product.
      Select any color and size. Add to cart.
      Go back to homepage.
      Click a different product.
      Select variants. Add to cart.
      Open the cart.
      Verify 2 items in cart.
    `,
    effort: "high",
  });

  await assert({
    page,
    assertion: "Cart contains at least 2 items with a total price",
    expect,
  });
});

The effort: "high" flag uses Gemini Pro for complex multi-step flows. Game changer.

3. Cal.com (Scheduling)

URL: cal.com | 4 tests

Tested date selection, timezone handling, booking form validation, and time slot display. The AI navigated Cal.com's dynamic calendar UI flawlessly.

4. Hoppscotch (API Platform)

URL: hoppscotch.io | 5 tests

test("Send GET request and view response", async ({ page }) => {
  await runSteps({
    page,
    userFlow: "Send a GET request to a public API",
    steps: [
      { description: "Navigate to https://hoppscotch.io" },
      { description: "Clear URL field and type the endpoint",
        data: { value: "https://jsonplaceholder.typicode.com/posts/1" } },
      { description: "Click Send",
        waitUntil: "Response appears" },
    ],
    assertions: [
      { assertion: "JSON response body is displayed" },
      { assertion: "Response contains userId, id, title fields" },
      { assertion: "Status shows 200" },
    ],
    test, expect,
  });
});

Tested method switching (GET → POST), header management, response viewing, and collections sidebar.

5. EcoSense AI (Green Tech)

URL: ecosense-ai.pages.dev | 5 tests

Multi-step quiz flow, step validation, accessibility checks, and mobile responsive testing at custom viewports.

5 Things That Blew My Mind

1. It works across completely different UIs

Firebase app, Next.js app, Vue app — same natural language patterns worked everywhere. "Click the Sign Up button" just works regardless of the framework.

2. Multi-model assertions catch real bugs

Claude passed an assertion. Gemini failed it. Gemini was right — the product variant wasn't actually visible. Single-model testing would have shipped a false positive.

3. Smart waits > sleep timers

// OLD WAY (pray-driven development)
await page.waitForTimeout(3000);

// PASSMARK WAY
waitUntil: "Cart shows 1 item"

Zero flaky tests from timing issues. The AI waits until it confirms the condition with exponential backoff.

4. `effort: "high"` handles conditional logic

If there's a step about transportation, select any option.
Continue through all available quiz steps.

Standard mode (Gemini Flash) handles linear flows. High effort (Gemini Pro) handles branching and conditional logic.

5. The entire suite has ZERO maintenance burden

UI redesign? Passmark adapts. New button text? Passmark reads the page. Class name changed? Passmark doesn't care.

Full Test Stats

Metric	Count
Apps tested	5
Test files	7
Total tests	30
Assertions	80+
CSS selectors used	0
XPath queries	0
`data-testid` attributes	0
`waitForTimeout` calls	0

Try It

git clone https://github.com/x-tahosin/breaking-apps-passmark.git
cd breaking-apps-passmark
npm install && npx playwright install chromium

echo "OPENROUTER_API_KEY=your-key" > .env
npm test

GitHub: x-tahosin/breaking-apps-passmark
Passmark: bug0inc/passmark

The future of E2E testing isn't writing better selectors — it's not writing selectors at all.

What's the most flaky test you've ever had to fix? I'd love to hear your horror stories in the comments.

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

S M Tahosin — Mon, 20 Apr 2026 15:43:47 +0000

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!

10 AI Projects You Can Build This Weekend (With Free APIs)

S M Tahosin — Sun, 19 Apr 2026 16:55:00 +0000

Want AI projects in your portfolio? Here are 10 you can build this weekend using free APIs.

1. AI Writing Assistant

Generate blog posts, emails, cover letters. My version

2. Carbon Footprint Analyzer

Quiz + AI analysis. My version

3. AI Prompt Generator

Simple descriptions to Midjourney/DALL-E prompts. My version

4. Code Explainer

Paste code, get plain English explanation.

5. Resume Optimizer

Resume + job description = tailored suggestions.

6. Sentiment Analyzer

Analyze reviews, tweets for sentiment with Hugging Face.

7. AI Recipe Generator

Input ingredients, get recipes.

8. Study Flashcard Maker

Paste notes, get Q&A cards.

9. AI Color Palette Generator

Describe a mood, get hex codes.

10. Meeting Summary Bot

Transcript in, action items out.

The Pattern

Every project follows this:

Frontend (Next.js) -> /api/generate (proxy) -> AI API -> Beautiful UI

Free Hosting

Cloudflare Pages — unlimited bandwidth
Vercel — great for Next.js

Pick one and build it this weekend!

Which one are you building? Let me know!

How I Built an AI Carbon Footprint Analyzer for Earth Day 2026

S M Tahosin — Sun, 19 Apr 2026 16:49:41 +0000

For Earth Day 2026, I built EcoSense AI — an app that analyzes your carbon footprint in 60 seconds using AI.

The Idea

Most carbon calculators are boring forms with static math. I wanted something that feels quick, uses AI for nuanced analysis, and gives actionable tips.

Architecture

User -> 4-Step Form -> /api/generate (Cloudflare Function)
                            |
                    Google Gemini 2.0 Flash
                            |
                    JSON: score, grade, tips, pledge
                            |
              /api/memory (Backboard) -> saves results
              Solana donation -> carbon offset

The Prompt Engineering

Gemini returns structured JSON reliably if you're specific. Temperature 0.7 gives the best balance of variety and accuracy.

Persistent Memory with Backboard

Each assessment gets saved to a Backboard thread. Returning users see their progress over time.

Carbon Offsets via Solana

Solana is Proof of Stake — 99.9% less energy than Bitcoin. Perfect for an eco app.

Try It

ecosense-ai.pages.dev

x-tahosin / ecosense-ai

AI Carbon Footprint Analyzer - Google Gemini + Backboard + Solana | Earth Day 2026

🌍 EcoSense AI

AI-Powered Carbon Footprint Analyzer | Earth Day 2026

What It Does

Answer 4 quick questions about your daily habits and Google Gemini analyzes your carbon footprint in real-time:

Eco Score (0-100) with letter grade and SVG donut chart
Estimated annual CO2 compared to global average
Impact breakdown by category (transport, diet, energy, shopping)
5 personalized tips to reduce your footprint
Earth Day pledge — copy and share on social media
Carbon offset — donate SOL via Solana to plant trees
Progress tracking — Backboard memory saves your assessments

Architecture

Browser → Static HTML/JS (Cloudflare Pages)
            ↓
         /api/generate → Cloudflare Function → Google Gemini API
         /api/memory   → Cloudflare Function → Backboard API
         
         API keys NEVER reach the browser.

Tech Stack

Technology	Purpose
Next.js 16	Static export frontend
Google Gemini 2.0 Flash	AI analysis engine
Backboard	Persistent memory threads
Solana	Carbon offset donations
Cloudflare Pages	Hosting + serverless functions

…

View on GitHub

Happy Earth Day! What are you building for the planet?

5 Free AI APIs You Can Use Today (No Credit Card Required)

S M Tahosin — Sun, 19 Apr 2026 16:49:34 +0000

You don't need to pay OpenAI $20/month to build AI apps. Here are 5 completely free AI APIs you can start using right now.

1. Google Gemini API

Best for: Text generation, analysis, code generation

Free tier: 15 requests/minute, 1M tokens/day
Models: Gemini 2.0 Flash (fast), Gemini Pro (powerful)
Signup: ai.google.dev

const res = await fetch(
  `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${API_KEY}`,
  {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({
      contents: [{ parts: [{ text: "Explain quantum computing simply" }] }],
    }),
  }
);
const data = await res.json();
console.log(data.candidates[0].content.parts[0].text);

I built: MaxAI Writer and EcoSense AI entirely on Gemini's free tier.

2. Hugging Face Inference API

Best for: Specialized models (sentiment, translation, image classification)

Free tier: Rate-limited, thousands of models
Signup: huggingface.co

3. Cloudflare Workers AI

Best for: Edge inference, low latency

Free tier: 10,000 neurons/day
Models: Llama, Whisper, Stable Diffusion

4. Groq

Best for: Fastest inference speeds

Free tier: 30 RPM on Llama models
Signup: console.groq.com

5. Cohere

Best for: Enterprise-grade text analysis, RAG

Free tier: 5 RPM, trial API key

Comparison

API	Best For	Rate Limit	Signup
Google Gemini	General AI	15 RPM	Free
Hugging Face	Specialized	Varies	Free
Cloudflare AI	Edge	10K/day	Free
Groq	Speed	30 RPM	Free
Cohere	Text analysis	5 RPM	Free

Which free API are you using? Drop a comment!

How to Deploy Next.js to Cloudflare Pages for Free (2026)

S M Tahosin — Sun, 19 Apr 2026 16:42:14 +0000

Netlify's 100GB bandwidth limit can burn through fast. Cloudflare Pages offers unlimited bandwidth for free. Here's how to deploy your Next.js app.

Why Cloudflare Pages?

Feature	Netlify Free	Cloudflare Free
Bandwidth	100 GB/mo	Unlimited
Build minutes	300/mo	500/mo
Serverless functions	Yes	Yes
Custom domains	Yes	Yes
Edge network	Global	Global (faster)

Step 1: Enable Static Export

// next.config.ts
const nextConfig = {
  output: "export",
};
export default nextConfig;

Note: Static export means no SSR. Use Cloudflare Functions for API routes instead.

Step 2: Move API Routes to Cloudflare Functions

Create functions/api/generate.js:

export async function onRequestPost(context) {
  const { request, env } = context;
  const { prompt } = await request.json();

  const res = await fetch(
    `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${env.GEMINI_API_KEY}`,
    {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        contents: [{ parts: [{ text: prompt }] }],
      }),
    }
  );

  const data = await res.json();
  const text = data?.candidates?.[0]?.content?.parts?.[0]?.text || "";
  return new Response(JSON.stringify({ text }), {
    headers: { "Content-Type": "application/json" },
  });
}

Step 3: Build and Deploy

npm run build
npx wrangler pages deploy out --project-name my-app

Step 4: Set Environment Variables

Go to Cloudflare Dashboard → Pages → your project → Settings → Environment Variables.

Add GEMINI_API_KEY as a secret.

Step 5: Custom Domain (Optional)

Pages → Custom domains → Add domain → follow DNS instructions.

That's It!

Your app is live with:

Unlimited bandwidth
Global edge network
Serverless API functions
Free SSL

I migrated 3 projects from Netlify to Cloudflare and haven't looked back.

Building AI tools on Cloudflare? Check out my projects:

EcoSense AI — Carbon footprint analyzer
MaxAI Writer — Free AI writing tools
PromptCraft AI — AI prompt generator

Build a Free AI Writing Tool with Next.js and Google Gemini (2026 Guide)

S M Tahosin — Sun, 19 Apr 2026 16:42:09 +0000

Building AI tools doesn't have to be expensive or complicated. In this tutorial, I'll show you how to build a free AI writing assistant using Next.js and Google Gemini's free tier.

What We're Building

A web app where users can:

Generate blog posts, emails, and cover letters
Choose tone (professional, casual, creative)
Get results in seconds
No signup needed

Live demo: maxai-writer.pages.dev

Prerequisites

Node.js 18+
Google Gemini API key (free at ai.google.dev)

Step 1: Create Next.js Project

npx create-next-app@latest ai-writer --typescript --tailwind --app
cd ai-writer
npm install lucide-react

Step 2: Backend API Route (Keep Key Secure)

Never expose your API key in frontend code. Create a server-side API route:

// app/api/generate/route.ts
import { NextRequest, NextResponse } from "next/server";

export const runtime = "edge";

export async function POST(req: NextRequest) {
  const { prompt, maxTokens } = await req.json();
  const apiKey = process.env.GEMINI_API_KEY;

  const res = await fetch(
    `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${apiKey}`,
    {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        contents: [{ parts: [{ text: prompt }] }],
        generationConfig: { maxOutputTokens: maxTokens || 2000 },
      }),
    }
  );

  const data = await res.json();
  const text = data?.candidates?.[0]?.content?.parts?.[0]?.text || "";
  return NextResponse.json({ text });
}

Step 3: Frontend UI

"use client";
import { useState } from "react";

export default function Home() {
  const [input, setInput] = useState("");
  const [output, setOutput] = useState("");
  const [loading, setLoading] = useState(false);
  const [tool, setTool] = useState("blog");

  const tools = {
    blog: "Write a blog post about:",
    email: "Write a professional email about:",
    cover: "Write a cover letter for:",
  };

  const generate = async () => {
    setLoading(true);
    const prompt = `${tools[tool]} ${input}. Be detailed and professional.`;
    const res = await fetch("/api/generate", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ prompt, maxTokens: 1500 }),
    });
    const data = await res.json();
    setOutput(data.text);
    setLoading(false);
  };

  return (
    <main className="max-w-2xl mx-auto p-8">
      <h1 className="text-3xl font-bold mb-6">AI Writing Tool</h1>
      <select value={tool} onChange={(e) => setTool(e.target.value)}
        className="w-full p-3 border rounded mb-4">
        <option value="blog">Blog Post</option>
        <option value="email">Email</option>
        <option value="cover">Cover Letter</option>
      </select>
      <textarea value={input} onChange={(e) => setInput(e.target.value)}
        placeholder="What should I write about?"
        className="w-full p-3 border rounded mb-4 h-24" />
      <button onClick={generate} disabled={loading}
        className="w-full bg-blue-600 text-white py-3 rounded font-bold">
        {loading ? "Writing..." : "Generate"}
      </button>
      {output && (
        <div className="mt-6 p-4 bg-gray-50 rounded whitespace-pre-wrap">
          {output}
        </div>
      )}
    </main>
  );
}

Step 4: Deploy Free on Cloudflare Pages

# Build static export
npm run build

# Deploy
wrangler pages deploy out --project-name ai-writer

Set GEMINI_API_KEY in Cloudflare Pages → Settings → Environment Variables.

Key Takeaways

Google Gemini free tier gives 15 RPM — enough for a personal tool
Always use backend routes for API keys
Static export + Cloudflare Pages = free hosting with unlimited bandwidth
Edge runtime keeps response times fast

Source Code

x-tahosin / maxai-writer

Free AI Writing Tools - Resume Builder, Cover Letter Generator, Email Writer | Powered by Gemini

✍️ MaxAI Writer

6 Free AI Writing Tools — No Signup Required

Features

Tool	Description
📄 Resume Builder	AI-generated professional resumes
💼 Cover Letter	Tailored cover letters for any job
✉️ Email Writer	Professional emails in seconds
📝 Blog Post	SEO-optimized blog content
📋 Summary	Summarize long text instantly
🔄 Rewriter	Paraphrase and improve text

Tech Stack

Next.js with static export
Google Gemini 2.0 Flash via secure backend proxy
Tailwind CSS for styling
Cloudflare Pages for hosting

Quick Start

git clone https://github.com/x-tahosin/maxai-writer.git
cd maxai-writer
npm install
npm run build

Made with ❤️ by Tahosin

View on GitHub

Found this helpful? Follow me for more AI tutorials!

Why OpenClaw Skills Are the Most Underrated Feature in Personal AI

S M Tahosin — Sun, 19 Apr 2026 15:35:17 +0000

This is a submission for the OpenClaw Writing Challenge

The Problem with Personal AI

Most AI assistants are black boxes. You type, they respond, and customization means digging through settings menus. Want your assistant to know about your project management workflow? Your fitness routine? Your garden watering schedule? Good luck.

OpenClaw flips this model. Instead of configuring through GUIs, you teach it through skills — Markdown files that tell the agent what to do, when, and how.

And honestly? I think this is the most underrated feature in the entire OpenClaw ecosystem.

What Are Skills, Really?

A skill is a SKILL.md file with YAML frontmatter and instructions:

---
name: my_skill
description: Does something useful.
---
# My Skill
When the user asks about X, do Y using Z tool.

That's it. No code. No build step. No dependencies.

Drop it in ~/.openclaw/workspace/skills/, restart the gateway, and your assistant now has a new capability.

Why This Matters

1. Anyone Can Build Skills

You don't need to be a developer. If you can write a clear instruction in English, you can build an OpenClaw skill. I've seen skills for:

Recipe management — "When I share ingredients, suggest recipes and add missing items to my shopping list"
Code review — "When I share a PR link, review it for security issues and code style"
Meeting prep — "Before my calendar events, summarize relevant emails and documents"

2. Skills Compose

Because skills are just instructions, they naturally compose. My EcoBot skill uses web_search for product lookups, read/write for habit logging, and the agent's natural language ability for the analysis. Each of these tools was built by someone else. The skill just orchestrates them.

3. The Agent Generalizes

Here's what surprised me: skills don't need to cover every edge case. Write the core instructions, and OpenClaw handles the rest. When my EcoBot skill describes how to calculate a carbon footprint, the agent naturally handles follow-up questions, partial information, and conversational tangents.

4. Skills Are Shareable

Drop a SKILL.md in a GitHub repo and anyone can install it. No npm packages, no version conflicts, no build toolchains. The ClawHub registry makes this even easier.

The Deeper Insight: Personal AI Should Be Personal

What makes OpenClaw different from ChatGPT or Claude isn't the model — it's the customization layer. Skills let you build an assistant that knows:

Your project structure
Your preferences
Your workflows
Your domain expertise

And it keeps this knowledge across conversations, across channels (Telegram, Discord, web), across devices.

A Concrete Example

I built EcoBot — a skill that tracks carbon footprint and gives green living advice. The entire skill is one Markdown file:

It knows carbon emission factors for different transport, diet, and energy choices
It uses web_search to look up product environmental impact
It logs habits to a local JSON file with read/write
It generates weekly reports from the logged data

Total lines of code: 0. Total lines of Markdown: ~80.

The agent does all the heavy lifting. The skill just provides the domain knowledge and orchestration logic.

What I'd Love to See Next

Skill triggers — automatically activate skills based on time or events (partially possible with cron)
Skill chaining — output of one skill feeds into another
Skill analytics — see which skills get used most and how
Community skill ratings — know which ClawHub skills actually work well

Try It Yourself

If you haven't built an OpenClaw skill yet, try this:

Think of one thing you explain repeatedly (to yourself or others)
Write it as instructions in a SKILL.md
Drop it in your skills folder
Restart and test

You'll be surprised how well it works. The barrier to building personal AI tools has never been lower.

Building with OpenClaw has changed how I think about AI assistants. It's not about the model — it's about the layer you build on top.

EcoBot: A Personal Carbon Footprint Tracker Built with OpenClaw

S M Tahosin — Sun, 19 Apr 2026 15:35:12 +0000

This is a submission for the OpenClaw Challenge.

What I Built

EcoBot is an OpenClaw skill that turns your personal AI assistant into an environmental impact advisor. It tracks your daily habits, estimates your carbon footprint, and gives actionable tips to live greener.

Features:

Carbon Footprint Calculator — answer questions about transport, diet, energy, and shopping to get an annual CO2 estimate with letter grade
Eco Tip of the Day — practical sustainability tips with estimated CO2 savings
Product Eco Check — uses OpenClaw's web_search to look up environmental impact of any product
Habit Logger — tracks green actions in a local JSON file using read/write tools
Weekly Green Report — summarizes your eco progress and trends over time

How I Used OpenClaw

EcoBot is built as a pure SKILL.md — no plugin code needed. It leverages OpenClaw's built-in tools:

Skill Architecture

---
name: ecobot
description: Personal carbon footprint tracker and green living advisor.
---
# EcoBot Skill
When the user asks about their carbon footprint...

Tools Used:

web_search — Fetches real-time carbon data for products and activities
read / write — Maintains a persistent eco habit log at ~/.openclaw/workspace/eco_log.json
exec — Runs calculations when needed

What Makes It Work

The beauty of OpenClaw skills is that they're just instructions in Markdown. No build step, no dependencies, no API keys to manage. The skill file tells the agent when and how to act:

When someone says "I biked to work" → log it with CO2 savings
When someone asks "what's my footprint?" → walk through the assessment
When someone mentions a product → search for its environmental impact

The agent already has the tools. The skill just teaches it the domain knowledge.

Installation

# Copy skill to workspace
cp -r skills/ecobot ~/.openclaw/workspace/skills/
# Restart gateway
openclaw gateway restart
# Test it
openclaw agent --message "What's my carbon footprint?"

Demo

Here's what a conversation looks like:

User: What's my carbon footprint?

EcoBot: Let's figure that out! I'll ask a few quick questions:

1. How do you mainly get around?
   - Gas car, Electric car, Public transit, or Bike/Walk

User: I drive a gas car, about 30km daily

EcoBot: Got it. What about your diet?

User: I eat meat a few times a week

EcoBot: And your home energy — fossil fuels, mixed grid, or renewable?

User: Mixed grid

EcoBot: Last one — shopping habits?

User: Average, I'd say

EcoBot: Here's your assessment:

🌍 Your Eco Score: C+ (52/100)
📊 Estimated Annual CO2: ~8,300 kg

Breakdown:
- Transport: 4,600 kg (55%) ⚠️
- Diet: 2,200 kg (27%) ⚠️
- Energy: 1,200 kg (14%) ✓
- Shopping: 300 kg (4%) ✓

Tips:
1. Carpooling 2x/week could save ~900 kg CO2/year
2. One meat-free day per week saves ~200 kg CO2/year
3. Switching to LED bulbs saves ~100 kg CO2/year

Shall I log this and track your progress?

User: I biked to work today!

EcoBot: 🚲 Logged! That's ~2.3 kg CO2 saved vs driving.
You've biked 3 times this week — that's 6.9 kg saved!

What I Learned

Skills are surprisingly powerful — a single Markdown file can create a complete feature with personality, domain knowledge, and tool orchestration
Built-in tools eliminate boilerplate — web_search, read, write meant zero API integration work
The agent generalizes well — even with simple instructions, OpenClaw handles edge cases like partial information or follow-up questions naturally
Persistent state is easy — using read/write to maintain a JSON log gives the skill memory across conversations

x-tahosin / openclaw-ecobot

EcoBot - OpenClaw skill for personal carbon footprint tracking and green living advice

EcoBot - OpenClaw Skill

A personal carbon footprint tracker and green living advisor, built as an OpenClaw skill.

What It Does

Carbon Footprint Check — estimates your annual CO2 based on daily habits
Eco Tip of the Day — actionable sustainability tips with CO2 savings estimates
Product Eco Check — looks up environmental impact of products via web search
Habit Logger — tracks your green actions over time in a local JSON log
Weekly Green Report — summarizes your eco progress and trends

Install

Copy the skill to your OpenClaw workspace:

cp -r skills/ecobot ~/.openclaw/workspace/skills/
openclaw gateway restart

Usage

> "What's my carbon footprint?"
> "Give me an eco tip"
> "How bad is fast fashion for the environment?"
> "I biked to work today"
> "Show me my weekly green report"

Built for

OpenClaw Challenge on DEV.to

View on GitHub

Forem: S M Tahosin

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

The Challenge

Architecture

Server-Sent Events for Streaming

Free Model Strategy

Cost Tracking Per User

Security: No Exposed Keys

Features Built

Results

Lessons Learned

How I Use AI to Write Regression Tests in Plain English (Playwright + Passmark)

The Problem

The Solution: Passmark

How It Works Under the Hood

Setup in 2 Minutes

Real-World Results

5 TypeScript Patterns Every Developer Should Know in 2026

1. Discriminated Unions for State Management

2. satisfies for Type-Safe Configs

3. Template Literal Types for API Routes

4. Const Assertions for Readonly Everything

5. Branded Types for Domain Safety

I Wrote 30 E2E Tests for 5 Production Apps Using Only English — No Selectors, No XPath, No Flaky Tests

The Tool: Passmark

The 5 Apps I Tested

1. HOCKS AI (My AI Platform)

2. Vercel Commerce (E-Commerce)

3. Cal.com (Scheduling)

4. Hoppscotch (API Platform)

5. EcoSense AI (Green Tech)

5 Things That Blew My Mind

1. It works across completely different UIs

2. Multi-model assertions catch real bugs

3. Smart waits > sleep timers

4. effort: "high" handles conditional logic

5. The entire suite has ZERO maintenance burden

Full Test Stats

Try It

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

🧠 What is HOCKS AI?

🏗️ Architecture

🔑 Key Technical Decisions

1. Hybrid Model Strategy

2. Streaming Chat via SSE

3. Per-User Memory System

4. Admin Dashboard with Cost Tracking

🔒 Security Architecture

💰 Total Monthly Cost: ~$0

🚀 Get Started

What I Learned

10 AI Projects You Can Build This Weekend (With Free APIs)

1. AI Writing Assistant

2. Carbon Footprint Analyzer

3. AI Prompt Generator

4. Code Explainer

5. Resume Optimizer

6. Sentiment Analyzer

7. AI Recipe Generator

8. Study Flashcard Maker

9. AI Color Palette Generator

10. Meeting Summary Bot

The Pattern

Free Hosting

How I Built an AI Carbon Footprint Analyzer for Earth Day 2026

The Idea

Architecture

The Prompt Engineering

Persistent Memory with Backboard

Carbon Offsets via Solana

Try It

x-tahosin / ecosense-ai

AI Carbon Footprint Analyzer - Google Gemini + Backboard + Solana | Earth Day 2026

🌍 EcoSense AI

What It Does

Architecture

Tech Stack

5 Free AI APIs You Can Use Today (No Credit Card Required)

1. Google Gemini API

2. Hugging Face Inference API

2. `satisfies` for Type-Safe Configs

4. `effort: "high"` handles conditional logic