Iam 12 .I Built an AI Web App in a Single 92KB HTML File. No React. No Build Step. No Excuses.

Most AI apps ship a 4MB JavaScript bundle. They need Node 22. They need Webpack. They need a $40/month Vercel plan. They need a MacBook to run the dev server without the fan sounding like a jet engine. I don't have any of that. I have a $150 Poco C55 phone. I have Cloudflare's free tier. I have a single index.html file. And I built a full AI coding mentor that streams responses, reads images, exports conversations, handles auth, and enforces an 11-article constitutional safety framework. The entire frontend is 92 kilobytes.

The Problem with Typical AI Apps

Layer	Tool	Cost
Frontend	Single index.html (vanilla JS + CSS)	$0
Hosting	Netlify (static)	$0
Backend Logic	Cloudflare Worker	$0
Database/Auth	Supabase	$0
LLM	Groq (free tier)	$0
Web Search	Tavily	$0

Total monthly cost: zero dollars. Total npm dependencies: zero. Total build tools: zero.

Why No Framework?

React needs a dev server. Vue needs a bundler. Svelte needs a compiler. All of them require a terminal that my $150 phone can't run smoothly. Vanilla JS runs everywhere-it runs in the browser I already have. It doesn't need a Node process eating 400MB of RAM on a device with 4GB total. For an app this size (~1,900 lines of JS), you don't need reactivity. You need two functions:

• renderMessages() - redraws the chat
• renderConversationList() - redraws the sidebar when state changes, I call the function.

That's it. No virtual DOM. No reconciliation. No hydration. Just innerHTML and move on.

The 92KB Breakdown

The 92KB split inside the single index.html is:

• ~500 lines of CSS - design tokens, dark/light themes, print stylesheet, responsive breakpoints
• ~200 lines of static HTML - app shell, modals, sidebar
• ~1,400 lines of vanilla JS - state management, Supabase auth, streaming fetch, markdown renderer, export system, pinning, image compression, voice input

No external CSS files. No external JS files. No font imports. No icon libraries. Every SVG icon is an inline path string in a JS object. The browser downloads one file. It parses it. The app runs. Done.

Streaming Without Libraries

Most people reach for Socket.IO or an SSE client library. I use fetch() with a ReadableStream reader:

const reader = res.body.getReader();
while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  const chunk = new TextDecoder().decode(value);
  // parse SSE lines, append deltas to bubble
}

That's it. That's the whole streaming system. No library. No abstraction. Just the platform. The frontend is dumb on purpose. It renders whatever the worker sends. The worker is the brain. The HTML is the face.

The Constitutional Core

The real intelligence isn't in the frontend. It's in the Cloudflare Worker. Every request passes through an 11-article constitution before it hits the LLM.

Worker Responsibilities

• Checks if the prompt is toxic (even if encoded in Morse code or Base64)
• Picks the right model chain based on the task
• Injects the constitutional system prompt
• Optionally runs a Tavily web search
• Streams the response back with source citations

What I Learned: Constraints Are the Best Architect

If you can't install npm packages, you stop reaching for them. You start reading MDN instead. Boring tech ships faster. While my classmates were configuring Vite aliases and debugging Tailwind plugins, I was already talking to users. The platform is enough. fetch, localStorage, Blobs, URL.createObjectURL, window.print, navigator.clipboard-these are all native. You don't need a library for any of them. Senior devs respect constraints.

When I told a Netflix engineer my whole app loads in under 1 second on 3G, he didn't laugh. He nodded. Because he knows that's harder than shipping a 4MB bundle on a fiber connection.

Try It Out

Open koda-aicodementor.netlify.app. Open it on your phone. Open it on a 5-year-old device. Open it on hotel WiFi that barely works. It loads. It streams. It teaches. 92 kilobytes. Zero dependencies. Zero excuses.