๐ค 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) โ