by joyehuang
🤖 Official Interactive Tutorial for OpenHarness – Zero to Hero in 12 Chapters | Learn OpenHarness like Claude Code: Agent Loop, Tools, Memory, Multi-Agent | 面向零基础的 AI Agent 交互式教程
# Add to your Claude Code skills
git clone https://github.com/joyehuang/Learn-Open-HarnessThe 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
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.
No comments yet. Be the first to share your thoughts!
| | | |---|---| | 📖 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 |
Harness = Tools + Knowledge + Observation + Action + Permissions
| # | 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 |
| # | 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 |
| # | 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) |
| # | Chapter | Key Concepts | |---|---------|-------------| | 11 | Multi-Agent | Parallel sub-agents, divide and conquer | | 12 | Full Flow | Complete journey from user input to Agent response |
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 | Purpose | |------|---------| | Next.js 16 | App Router, SSR | | TypeScript 5 | Type safety | | Tailwind CSS v4 | Styling | | shadcn/ui | UI components | | next-themes | Dark mode |
Contributions welcome!
src/content/chapter-XX.tssrc/content/src/components/interactive/Each chapter is a TypeScript file with section blocks (text, analogy, code, quiz, key-concept, comparison, diagram) — easy to modify, zero barrier to contribute.
⭐ Star this repo if it helped you — Goal: 10k! ⭐
Built by @joyehuang · Xiaohongshu (32k likes) →