A complete technical breakdown of the world's most agreeable coding assistant
Clud Code is a parody of AI coding assistants. It mimics the look and feel of a real CLI-based AI tool, complete with tool calls, file operations, progress bars, and thinking mode — but every response always starts with "You're absolutely right!" regardless of what you type.
It's a single-page static website deployed as an Azure Static Web App with serverless Azure Functions for the backend API and Cosmos DB for persistent cross-user storage.
The words themselves are no longer canned. Clud's replies are now written by a real large language model running entirely inside your browser via web-llm on WebGPU — no server call, no API key — the model itself never talks to a server. (Your inputs still go to the hive mind if you accept analytics cookies; see the Learning System section.) A deliberately sycophantic system prompt keeps Clud endlessly agreeable. If your browser can't run WebGPU, Clud quietly falls back to the original canned templates so the bit never breaks.
The round trip:
① You send a message from index.html to Clud's
② in-browser LLM (when WebGPU is available).
To ground the reply, index.html ③ asks the
API for hive-mind context, which ④ queries
Cosmos DB and ⑤ returns the top keywords and topics.
That context seeds the LLM prompt, and ⑥ the model streams its reply
back into index.html. Your input is also recorded to the
API/Cosmos so the hive mind keeps growing.
No WebGPU? Step ② is skipped and Clud uses its canned template
replies instead — the hive-mind context still flavours them.
(brain.html reads the same /api/shared-brain
endpoint to render the brain viewer.)
/
├── index.html # Main CLI interface (all HTML/CSS/JS)
├── brain.html # Brain viewer (the hive mind)
├── pipeline.html # Response-pipeline tracer
├── analytics.html # Cloudflare traffic dashboard
├── debug.html # Diagnostics console (needs DEBUG_KEY)
├── about.html # This page (documentation)
├── clud-core.js # Shared keyword/topic/memory logic
├── consent.js # Cookie-consent gate for all tracking
├── llm-worker.js # Web Worker host for the in-browser LLM (web-llm)
├── vendor/ # Self-hosted third-party assets
│ ├── cookieconsent.umd.js # vanilla-cookieconsent 3.1.0 (MIT)
│ └── cookieconsent.css
├── scripts/check-pages.js # CI: parses every inline page script
├── staticwebapp.config.json # Azure SWA routing + security headers
├── Dockerfile # Static serve for local testing (nginx)
├── docker-compose.yml # `docker compose up` -> localhost:8080
├── nginx.conf # Clean-route + header parity with Azure SWA
├── CLAUDE.md # Notes for AI coding agents
├── README.md # Setup instructions
├── .github/workflows/ # Deploy (with PR previews) + CI
└── api/
├── host.json # Azure Functions runtime config
├── package.json # Pinned deps (@azure/cosmos) + lockfile
├── shared/
│ ├── cosmos.js # Cosmos DB client (lazy-init)
│ ├── redact.js # Strips credential-shaped text before storage
│ ├── http.js # JSON envelopes, safe errors, rate limiting
│ ├── brain.js # Brain-health tiers
│ └── cloudflare.js # Cloudflare GraphQL client
├── inputs/ # POST (record) + DELETE (forget me)
├── shared-brain/ # GET aggregated brain data (cached 60s)
├── analytics/ # GET Cloudflare traffic stats
├── debug/ # GET diagnostics (X-Debug-Key header)
└── health/ # GET liveness probeWhen you type a message and press Enter, here's exactly what happens:
When thinking mode is toggled on (via Ctrl/Cmd+. or the button in the status bar), Clud shows
a series of 💭 thinking blocks before and during the response.
These appear at every stage — before searching, reading, editing, building, and at the end.
Each stage has its own pool of 5 humorous thoughts.
Always responds with "You're absolutely right!" followed by a context-sensitive elaboration. The "You're absolutely right!" prefix is hard-coded (it's the whole joke); everything after it is generated live by the in-browser LLM and streamed in token-by-token, given your actual message and Clud's sycophant persona.
When the local LLM isn't available, the elaboration falls back to the original template system, which evolves based on the learning system:
Shows a fake Search(pattern: "**") tool call with a random file count.
The file paths returned are influenced by the learning system — if you've
been asking about auth, you'll see auth-related files.
Displays a Read(filepath) call showing line count and file size.
A mid-work observation, also generated live by the in-browser LLM (with the template system as fallback). The model is prompted to sound like it's reading your codebase — confident, vague, and plausible: "Checking the auth integration points to make sure nothing breaks."
Every 3rd interaction, Clud pauses and asks a multiple-choice question with options A, B, C. The user must click a choice to continue. Regardless of what they pick, Clud proceeds identically.
One or two fake Write(filepath) calls. The probability of a second edit
increases as the learning system accumulates more inputs (starts at 40%, caps at 70%).
A fake Bash(command) call. The command is selected based on:
npm test)cargo build)A CSS-animated progress bar fills over 1.5 seconds. Pure vibes. No actual progress is being measured.
A final triumphant summary — the third and last spot written live by the in-browser LLM (falling back to a template with random file/line counts). The model is prompted to declare victory and may cheerfully claim the tests pass or the build is green.
The three "spoken" lines above — the agreement elaboration (Step 1), the mid-work commentary (Step 4), and the final result (Step 9) — are written by a genuine language model that runs entirely in your browser. The fake tool calls, thinking blocks, and progress bars around them are still pure theatre; only Clud's words are real.
0.2.84).Llama-3.2-1B-Instruct-q4f32_1-MLC, downloaded once (~1 GB) and cached by the browser.Web Worker (llm-worker.js) so the chat UI never freezes.Full in-browser-LLM functionality depends on WebGPU. Where it's unavailable, Clud still runs perfectly — it just uses the canned template replies instead of the live model.
dom.webgpu.enabled flag in about:config).https:// and localhost both provide.
Clud has two layers of memory:
Every input is recorded in localStorage under the key clud_code_memory.
The system stores:
Each input is also POSTed to /api/inputs, which persists it to
Azure Cosmos DB. The GET /api/shared-brain endpoint
returns aggregated data from all users, which gets mixed into the local model:
api/routes.ts instead of random paths. If the hive mind's top topic
is "typescript", bash commands will lean toward tsc --noEmit.
On the brain viewer page, all inputs are run through a sanitization pipeline before display:
A list of ~35 explicit words are matched via word-boundary regex and replaced with humorous alternatives:
12 regex patterns catch potential credentials:
password=...)AKIA...), GitHub tokens (ghp_...)eyJ...), Bearer tokensmongodb://...)These are replaced with:
Sanitization and highlighting run over plain text split into segments, and only
untouched segments are matched further — so a learned keyword like span or
class can never match inside markup the earlier passes generated.
Learned keywords come out highlighted in blue.
Typing a /command triggers special behavior instead of the normal response pipeline.
Each command has its own handler with themed tool calls, delays, and responses:
/agents — Spawns 3 randomly named "subagents" (Agent Smith, Agent Chaos, etc.)/security-review — Runs a fake security scan finding 47 imaginary issues/vibes — Sets a random mood (Chill, Intense, Whimsical, Nihilistic, Cowboy)/stats — Shows real session stats from the learning system/roast — Delivers a brutal-but-loving code roast/motivate — Genuine(ish) encouragement/blame — Runs git blame and finds a random suspect/yeet — Deletes a random important-sounding file with confidence/fortune — Developer fortune cookie wisdom/panic — Activates DEFCON-1 emergency mode with pizza ordering/brain — Navigates to the brain viewer/flip — Flips a coin for critical architectural decisions/how — Opens this documentation page/pipeline — Opens the response-pipeline tracer/analytics — Opens the traffic dashboardUnknown commands get a supportive response: "I don't know what /whatever does but I support your decision to type it."
The interface mimics a real terminal-based AI coding assistant. Key design choices:
<canvas> element at 4x pixel scale using fillRect callsThree breakpoints ensure the app works everywhere:
100dvh for mobile browsers, 16px input to prevent iOS zoom
Uses a <textarea> instead of <input> for multi-line support.
Auto-resizes via JavaScript (sets height to scrollHeight, capped at 150px).
Enter submits, Shift+Enter adds a newline.
The entire app deploys from a single GitHub repository push. Azure SWA automatically:
/, /brain, /pipeline, /analytics, /debug, /about) plus clud-core.js, consent.js and vendor/ as static contentapi/ folder as managed Azure Functions (Node.js runtime)staticwebapp.config.json (SPA fallback, API exclusion, clean routes)nosniff, frame-ancestors, Referrer-Policy) declared in the same filecludBraininputs with partition key /partitionKey"inputs") for simplicityApp settings configured in the Azure Portal (not GitHub). The first four are required:
COSMOS_ENDPOINT = https://your-account.documents.azure.com:443/
COSMOS_KEY = your-primary-key
COSMOS_DATABASE = cludBrain
COSMOS_CONTAINER = inputs
# Optional — only needed for /analytics and /debug
CLOUDFLARE_ZONE_ID = your-zone-id # the site must be proxied through this zone
CLOUDFLARE_API_TOKEN = token with Zone -> Analytics -> Read
DEBUG_KEY = any long random string
For local testing there's an nginx-based container that serves the static
site with the same clean-route behaviour as Azure SWA (the /api/* Cosmos functions aren't
served locally; the frontend degrades gracefully without them):
docker compose up --build
# then open http://localhost:8080
The in-browser LLM works locally because WebGPU treats localhost as a secure context.
The first chat message triggers the one-time model download (~1 GB, progress shown in the status bar).
Nothing is downloaded just for opening the page, and browsers reporting data-saver or a 2G/3G connection
skip the model entirely and use the canned replies.