🤖 Learn OpenHarness
The interactive companion to HKUDS/OpenHarness — built the day after OpenHarness launched.
Zero to Hero in 12 chapters. Learn the architecture behind Claude Code: Agent Loop, Tools, Memory, Permissions, Multi-Agent & more.
Live Demo → · Issues · Contributing · 中文版
Author: joyehuang.me · Xiaohongshu (32k likes) →
⭐ If this tutorial helps you understand AI Agents, star the repo — Goal: 10k stars!
https://github.com/user-attachments/assets/72102803-c56d-4b37-816f-f530a7ce9dc2
Why this exists
OpenHarness dropped and immediately blew up — the first open-source implementation of the AI Agent Harness pattern that powers Claude Code, Cursor, and the next generation of AI coding tools.
But ~11,700 lines of infrastructure code is a lot to digest. Concepts like Agent Loop, tool registries, permission tiers, and MCP aren't obvious from reading source alone.
So I built this the next day: 12 interactive chapters that break down every core concept with real-world analogies, animated diagrams, hands-on simulators, and quizzes — so you can actually understand what OpenHarness does before diving into the code.
No AI or programming experience required.
Features
| 📖 12 Chapters | From "What is an AI Agent" to "Multi-Agent Collaboration" |
| 🎮 Interactive | Agent Loop animation, Tool Explorer, Permission Sandbox, Architecture Diagram |
| 🧠 Quizzes | Embedded in every chapter with instant feedback |
| 📊 Progress | Auto-tracks completed chapters |
| 🌙 Dark Mode | Deep navy palette, easy on the eyes |
| 📱 Responsive | Mobile, tablet, desktop |
Curriculum
Harness = Tools + Knowledge + Observation + Action + Permissions
Phase A · Fundamentals
| # | Chapter | Key Concepts |
|---|---|---|
| 01 | What is AI Agent | LLM vs Agent — from "talking" to "doing" |
| 02 | What is Harness | The Agent's equipment system |
| 03 | The Harness Equation | Tools + Knowledge + Observation + Action + Permissions |
Phase B · Core Mechanisms
| # | Chapter | Key Concepts |
|---|---|---|
| 04 | Agent Loop | Think → Act → Observe, the infinite loop |
| 05 | Tool System | 43+ built-in tools, unified interface + registry pattern |
| 06 | Permission System | Three-tier security guardrails |
| 07 | Hook System | Lifecycle events, inject custom logic at critical moments |
Phase C · Intelligence Layer
| # | Chapter | Key Concepts |
|---|---|---|
| 08 | Skills | On-demand knowledge loading |
| 09 | Memory | Cross-session persistence, 4 memory types |
| 10 | MCP Integration | Standardized external world connection (like USB) |
Phase D · Advanced
| # | Chapter | Key Concepts |
|---|---|---|
| 11 | Multi-Agent | Parallel sub-agents, divide and conquer |
| 12 | Full Flow | Complete journey from user input to Agent response |
Quick Start
git clone https://github.com/joyehuang/Learn-Open-Harness.git
cd Learn-Open-Harness
npm install
npm run dev
Open http://localhost:3000 and start learning.
Tech Stack
| Tech | Purpose |
|---|---|
| Next.js 16 | App Router, SSR |
| TypeScript 5 | Type safety |
| Tailwind CSS v4 | Styling |
| shadcn/ui | UI components |
| next-themes | Dark mode |
Contributing
Contributions welcome!
- Fix content: PR to
src/content/chapter-XX.ts - Add chapters: Follow existing format in
src/content/ - Improve interactive components:
src/components/interactive/ - Translate: Help bring this to more languages
Each chapter is a TypeScript file with section blocks (text, analogy, code, quiz, key-concept, comparison, diagram) — easy to modify, zero barrier to contribute.
License
⭐ Star this repo if it helped you — Goal: 10k! ⭐
Built by @joyehuang · Xiaohongshu (32k likes) →