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.