🤖 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

MIT

⭐ Star this repo if it helped you — Goal: 10k! ⭐

Built by @joyehuang  ·  Xiaohongshu (32k likes) →