Build a Zero-Cost AI Agent in Your Browser

Every AI tutorial starts the same way: sign up for an API key, add a credit card, spin up a server. For working developers, that's friction. For students, it's a wall. This workshop skips all of that. Participants build a working AI agent in a single HTML file: streaming chat, a custom persona, multi-turn memory, and agentic tool-calling. The model runs in the browser tab. No API keys, no servers, no cloud bill. The stack is open-source: Google's Gemma 2 2B (4-bit quantized), WebLLM from MLC-AI (an OpenAI-compatible API from a single CDN import), and WebGPU for GPU-accelerated inference natively in the browser. Four hands-on phases: Phase 1 - The AI Loop (40 min): Load a quantized model, run a chat completion, add token streaming, and wire multi-turn memory. Phase 2 - Chat UI (20 min): Styled chat application with message bubbles, scroll container, and loading progress. CSS is provided so participants can focus on the JS logic. Phase 3 - Make It Yours (40 min): Custom personas, prompt engineering, then a live demo of agentic tool-calling where the model calls Wikipedia and weather APIs through structured output markers parsed and executed in a loop. Phase 4 - Ship It (15 min): Save the single HTML file and host. The WebLLM API mirrors OpenAI's chat.completions interface, so everything learned here transfers directly to cloud-hosted models. Note that every phase (1-4) includes a checkpoint file so nobody falls behind.