An interactive course in AI engineering — learn the LangChain stack by watching it run.
LangChain · LangGraph · Deep Agents — 29 lessons, 3 levels, every concept a live demo you run and inspect in the browser.
LangX is a self-contained, in-browser course on building with the LangChain ecosystem. It is not a set of slides about agents — it is a set of agents you can run. Each lesson pairs a hand-illustrated explainer with a working demo that executes client-side against real model APIs: stream a model token by token, fork a state graph mid-run, approve an agent's plan, audit a live SEC filing, or watch a deep agent research real sources and cite them.
The whole thing runs as a static site. There is no backend to deploy and nothing to install for the reader — you bring a model key (or a local model) and everything happens in your browser.
- Every concept is executable. Around two dozen runnable demos, one per idea — from a single tool-calling loop to a self-planning deep-research agent.
- The wiring is never hidden. Watch tokens stream, state mutate, tools fire, and graphs branch in real time.
- Bring your own model. Anthropic, OpenAI, Google, or Azure — or a local model in-browser via
transformers.js. Your keys stay in your browser. No key at all? The agent demos fall back to a local tool-calling model (Qwen3-4B) that downloads once and runs on WebGPU. - Built on the real stack. The same
@langchain/*andlanggraphpackages you'd reach for in production, nothing mocked. - Live, not canned. Embedded GPT-2 runs in the browser, the auditor reads real EDGAR filings, and the research capstone fetches real sources.
- Take any demo with you. Each demo exports as a standalone project you run with
npm start, or as an Agent Skill (aSKILL.md) that teaches a coding agent to rebuild it from scratch.
|
The foundation layer. Six composable primitives that all speak one interface, the Runnable. Pipe them together and you get chains, RAG, and agents.
|
The orchestration layer. Model an agent as a stateful graph — nodes, edges, and reducers — that loops, branches, checkpoints, and pauses for a human.
|
The cognitive harness. Planning, a virtual filesystem, parallel subagents, skills, and context compaction — the machinery that turns a brief into a long-running agent.
|
 |
 |
| Agentic RAG A document agent that searches, cites, and clarifies. |
The whole graph See every LangGraph primitive at once. |
 |
 |
| Deep Research Plan, approve, research real sources, cite. |
The harness A brief becomes a playable game. |
Requires Node 20.19+ (Vite 8) and npm. No .env and no API keys are needed to build or run the site — you add a model key from inside the app.
# install
npm install
# run the dev server (http://localhost:5173)
npm run dev
# build the static site, then preview the production build
npm run build && npm run previewLangX builds with @sveltejs/adapter-static, so npm run build produces a fully static site (flat .html files, no server) you can host anywhere — GitHub Pages, Netlify, Cloudflare Pages, or an S3 bucket. The live site at langx.lol is deployed from main to GitHub Pages on every push.
Open Setup in the app and add a key for any supported provider — Anthropic, OpenAI, Google, or Azure. Keys are kept in your browser's localStorage and are only ever sent to the provider you choose. Prefer to run nothing externally? Pick a local model and it runs in-browser via transformers.js (WebGPU where available); the same local model is also the automatic fallback whenever you run a demo without a key. Uploaded documents for the RAG lessons are embedded and stored locally too (IndexedDB via Dexie), so they never leave the browser either.
| Area | Tools |
|---|---|
| Framework | SvelteKit 2, Svelte 5 (runes), TypeScript, Vite |
| Styling | Tailwind CSS v4, custom editorial type system (Fraunces / Source Serif / Mona Sans / IBM Plex Mono) |
| LLM / agents | langchain v1, @langchain/core, @langchain/langgraph, provider SDKs for Anthropic · OpenAI · Google · Azure |
| In-browser models | @huggingface/transformers, onnxruntime-web |
| Visualization | D3, d3-sankey, @observablehq/plot, Mermaid, KaTeX |
| Content & code | mdsvex, Shiki, marked, js-tiktoken |
| Storage / docs | Dexie (IndexedDB), pdfjs-dist, Zod |
| Tests | Vitest, Playwright |
src/
routes/ # landing page + the three level chapters;
# each lesson is its own route
lib/
curriculum.ts # the course map (levels, lessons, banners)
demos/ # the runnable demos — one per concept
components/ # Slide deck, glossary Term tooltips, TopNav, …
models/ # provider catalog (Anthropic/OpenAI/Google/Azure/local)
transformer-explainer/ # the embedded, live GPT-2 visualizer
state/ # app + nav state (Svelte runes)
static/
images/ # the hand-illustrated banners + level posters
images/thumbs/ # generated WebP thumbnails (see scripts/make-thumbs.mjs)
Built by Neo Mohsenvand · LinkedIn.
The artwork is a custom steampunk illustration set; the type and layout are a bespoke editorial design.