A field guide to the 12 ideas shaping how we use AI.
LearnAI is a self-contained, plain-English reader built for total beginners. No external links, no jargon walls, no "ask ChatGPT to explain this for you" — every concept answers three questions inline: what is it, what problem does it solve, and when should I reach for it.
Most people first meet AI through a tool, not an idea. They use ChatGPT, watch a co-worker demo an agent, hear "RAG" in a meeting — and end up with a working vocabulary built out of vibes. The good explanations are scattered across paywalled posts, half-hour YouTube videos, and vendor docs that quietly assume you already know.
LearnAI exists to close that gap in one sitting.
The mission is simple:
Make the twelve ideas that actually drive how AI gets used today understandable to anyone — in an afternoon, in plain English, without ever leaving the page.
Every design choice falls out of that statement. The site is one binder, not a Wikipedia. Each concept has a 30-second tl;dr and a 5-section deep-dive — no more. Glossary terms pop their definition where you're reading instead of sending you elsewhere. Diagrams are line drawings, not screenshots of someone else's product. There's a self-check quiz at the end of every chapter so you can tell whether it actually landed.
- Total beginners who want to participate in AI conversations at work without faking it.
- Operators and PMs who keep hearing terms like agent loop, MCP, AEO and want a single place that defines them properly.
- Engineers crossing into AI who want a fast orientation to the conceptual landscape before diving into framework docs.
If you've ever closed a tab thinking "I'll come back to that when I have the prerequisites," this is the prerequisites.
Twelve concepts, organized into six clusters:
| Cluster | Concepts |
|---|---|
| Foundations — talk to one model, well | Prompt Engineering · Multimodal AI |
| Knowledge — connect AI to your data | RAG · MCP |
| Agents — plan, act, coordinate | AI Agents · Agent Communication Protocol · Autonomous Workflows |
| Tooling — live in the real stack | AI Tool Stacking · Integrations & APIs |
| Operations — keep the lights on | LLM Management |
| Distribution — reach humans through AI | AI Content Generation · AEO / GEO |
Four ways to read it:
- Index — the 12-card editorial cover. Browse in any order.
- Path — a beginner-to-advanced staircase, ~75 minutes end to end.
- Map — a concept network grouped by cluster, with dependency edges.
- Glossary — every term used in the deep-dives, defined without jargon.
Each deep-dive has the same shape: tl;dr, problem it solves, how it works (with a diagram), a real example, when not to use it, and a quick self-check.
- Next.js 15 (App Router) — statically prerendered, hydrates a hash-routed client SPA
- React 19 — single client component with view-level routing
- Plain CSS — editorial layout (Newsreader serif + Geist sans + Geist Mono), responsive from phone to desktop
- Zero runtime dependencies beyond React/Next — content is local, no APIs, no analytics, no tracking
npm install
npm run devOpen http://localhost:3000.
The project is Vercel-ready out of the box. Either:
npx vercel # preview deploy
npx vercel --prod # production deploy…or push to GitHub and import the repo into Vercel — no environment variables required.
app/
layout.jsx # html shell, fonts, metadata
page.jsx # entry — renders the LearnAI client component
globals.css # editorial styles + responsive breakpoints
components/
LearnAI.jsx # the SPA: chrome, home, concept, path, map, glossary
lib/
data.js # 12 concepts + glossary + cluster definitions
The content lives entirely in lib/data.js. Adding a concept is editing one object.
- No external links. If a term needs explanation, define it inline. The reader never has to leave.
- One screen, one idea. Every concept fits a single deep-dive page; cross-references are inline pop-overs, not new tabs.
- Editorial over UI. This is meant to feel like a textbook or a magazine — large serif type, marginalia, page numbers — not a SaaS dashboard.
- Beginner-first language. No "simply", no "obviously", no smuggled assumptions. If a sentence requires a definition the reader doesn't have, the definition comes first.
- Test what landed. Every concept ends with a four-option quiz where the wrong answers all teach something specific. Comprehension is the metric, not page views.
Content edits are welcome — fixing an unclear sentence, swapping a stale example, adding a glossary term. Stylistic edits should match the existing editorial voice (plain, direct, no hype words, no emoji).
If you're adding a new concept, it has to fit the existing shape: tl;dr ≤ 50 words, exactly five sections, one diagram, one quiz with four options where every wrong answer teaches.
MIT.