|
| 1 | +<p align="center"> |
| 2 | + <h1 align="center">Build Claude Code</h1> |
| 3 | + <p align="center"> |
| 4 | + <strong>Build an Enterprise-Grade AI Agent CLI from Scratch — A Lesson-by-Lesson Deconstruction of Claude Code's Architecture</strong> |
| 5 | + </p> |
| 6 | + <p align="center"> |
| 7 | + <a href="./README.md">中文</a> · <a href="./README_en.md">English</a> |
| 8 | + </p> |
| 9 | + <p align="center"> |
| 10 | + 🌐 <a href="https://build.funagent.app">Website</a> · 📖 <a href="./CONTRIBUTING.md">Contributing</a> · 🐛 <a href="https://github.com/funAgent/build-claude-code-cli/issues">Issues</a> |
| 11 | + </p> |
| 12 | +</p> |
| 13 | + |
| 14 | +<p align="center"> |
| 15 | + <a href="https://github.com/funAgent/build-claude-code-cli/stargazers"><img src="https://img.shields.io/github/stars/funAgent/build-claude-code-cli?style=flat&color=FFD700" alt="GitHub Stars" /></a> |
| 16 | + <a href="https://github.com/funAgent/build-claude-code-cli/network/members"><img src="https://img.shields.io/github/forks/funAgent/build-claude-code-cli?style=flat" alt="GitHub Forks" /></a> |
| 17 | + <a href="https://github.com/funAgent/build-claude-code-cli/commits"><img src="https://img.shields.io/github/last-commit/funAgent/build-claude-code-cli" alt="Last Commit" /></a> |
| 18 | + <a href="./LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="MIT License" /></a> |
| 19 | + <img src="https://img.shields.io/badge/lessons-49-brightgreen.svg" alt="49 Lessons" /> |
| 20 | + <img src="https://img.shields.io/badge/TypeScript-100%25-3178C6.svg" alt="TypeScript" /> |
| 21 | + <img src="https://img.shields.io/badge/Next.js-16-000.svg" alt="Next.js 16" /> |
| 22 | +</p> |
| 23 | + |
| 24 | +--- |
| 25 | + |
| 26 | +## Disclaimer |
| 27 | + |
| 28 | +This project is for **educational purposes only**. The content is based on publicly available technical analyses of Claude Code and inspired by the [learn-claude-code](https://github.com/shareAI-lab/learn-claude-code) project. All lesson code is independently written for teaching demonstration and is not intended for production use. |
| 29 | + |
| 30 | +> "Claude Code" is a trademark of Anthropic. This project is not affiliated with or endorsed by Anthropic. |
| 31 | +
|
| 32 | +## What is this? |
| 33 | + |
| 34 | + |
| 35 | + |
| 36 | +49 progressive lessons that teach you to build a fully-featured AI Agent CLI — architecturally aligned with [Claude Code](https://github.com/anthropics/claude-code) — starting from `npm init`. |
| 37 | + |
| 38 | +**The core pattern is just one while loop:** |
| 39 | + |
| 40 | +```typescript |
| 41 | +while (true) { |
| 42 | + response = await client.messages.create({ messages, tools }) |
| 43 | + if (response.stop_reason !== "tool_use") break |
| 44 | + for (const toolCall of response.content) { |
| 45 | + result = await executeTool(toolCall.name, toolCall.input) |
| 46 | + messages.push(result) |
| 47 | + } |
| 48 | +} |
| 49 | +``` |
| 50 | + |
| 51 | +Each lesson produces a self-contained, runnable project snapshot. From the first API call to the final telemetry system, you'll end up with a complete, distributable AI Agent CLI. |
| 52 | + |
| 53 | +## Quick Start |
| 54 | + |
| 55 | +```bash |
| 56 | +# Clone the repo |
| 57 | +git clone https://github.com/funAgent/build-claude-code-cli.git |
| 58 | +cd build-claude-code-cli |
| 59 | + |
| 60 | +# Run any lesson |
| 61 | +cd agents/s03-agent-loop |
| 62 | +npm install |
| 63 | +cp .env.example .env # then add your API key |
| 64 | +npm run dev |
| 65 | + |
| 66 | +# Launch the tutorial website |
| 67 | +cd web |
| 68 | +npm install |
| 69 | +npm run dev |
| 70 | +# Visit http://localhost:3000 |
| 71 | +``` |
| 72 | + |
| 73 | +**Prerequisites:** Node.js >= 18 · npm >= 9 · Git |
| 74 | + |
| 75 | +## Curriculum |
| 76 | + |
| 77 | +Start learning at [build.funagent.app](https://build.funagent.app/) |
| 78 | + |
| 79 | +| # | Phase | Lessons | Key Capabilities | |
| 80 | +|---|-------|---------|-----------------| |
| 81 | +| 0 | Foundations | s00 – s02 | API calls, CLI scaffolding, child process management | |
| 82 | +| 1 | Minimal Agent | s03 – s07 | Agent loop, message management, error handling, config, cost tracking | |
| 83 | +| 2 | Tool System | s08 – s12 | Tool abstraction, file read/write, editing, search, tool registry | |
| 84 | +| 3 | Terminal UI | s13 – s16 | Ink components, message list, input box, full REPL | |
| 85 | +| 4 | Prompt Engineering | s17 – s19 | System prompts, CLAUDE.md rules, prompt caching | |
| 86 | +| 5 | Streaming & Performance | s20 – s23 | Stream parsing, token streaming, parallel tools, startup optimization | |
| 87 | +| 6 | Context Management | s24 – s26 | Conversation compaction, multi-layer strategies, large output handling | |
| 88 | +| 7 | Agent Intelligence | s27 – s31 | Planning (TodoWrite), sub-agents, skill system, task management | |
| 89 | +| 8 | Security & Permissions | s32 – s34 | Rule engine, permission UI, sub-agent permission inheritance | |
| 90 | +| 9 | Extension Ecosystem | s35 – s38 | MCP protocol, session persistence, plugin system | |
| 91 | +| 10 | Multi-Agent | s39 – s43 | Agent definitions, coordinator, team collaboration, communication protocols, worktree isolation | |
| 92 | +| 11 | Production-Ready | s44 – s48 | Graceful recovery, feature flags, packaging & distribution, native capabilities, telemetry & diagnostics | |
| 93 | + |
| 94 | +## Project Structure |
| 95 | + |
| 96 | +``` |
| 97 | +build-claude-code-cli/ |
| 98 | +├── agents/ # 49 TypeScript lessons (each independently runnable) |
| 99 | +│ ├── s00-api-basics/ |
| 100 | +│ ├── s01-cli-scaffold/ |
| 101 | +│ ├── ... |
| 102 | +│ └── s48-telemetry-diagnostics/ |
| 103 | +├── docs/ # Tutorial documentation |
| 104 | +│ ├── zh/ # 中文 (49 articles) |
| 105 | +│ └── en/ # English |
| 106 | +├── web/ # Next.js tutorial website |
| 107 | +│ └── src/ |
| 108 | +│ ├── app/ # Page routes |
| 109 | +│ ├── components/ # UI components (source viewer, diff, terminal player, etc.) |
| 110 | +│ ├── data/ # Scenarios, annotations, terminal recordings |
| 111 | +│ └── lib/ # Utilities, constants, i18n |
| 112 | +├── reference/ # Claude Code architecture reference notes |
| 113 | +├── PLAN.md # Detailed planning document |
| 114 | +├── TODO.md # Development progress tracking |
| 115 | +└── CONTRIBUTING.md # Contribution guide |
| 116 | +``` |
| 117 | + |
| 118 | +## Tutorial Website Features |
| 119 | + |
| 120 | +- **Interactive Source Viewer** — Syntax highlighting + lesson-by-lesson diff comparison |
| 121 | +- **Terminal Recording Player** — Simulated real CLI interaction playback |
| 122 | +- **Architecture Overview** — Visual module relationships and layered structure |
| 123 | +- **Deep Annotations** — Architecture decisions mapped to Claude Code source code |
| 124 | +- **Progress Tracking** — Locally persisted completion status |
| 125 | +- **Bilingual Support** — Full Chinese/English toggle |
| 126 | +- **Dark Mode** — Automatically follows system preference |
| 127 | + |
| 128 | +## Tech Stack |
| 129 | + |
| 130 | +**Lesson Projects:** TypeScript · Node.js · Commander.js · React + Ink · Anthropic SDK · Zod · esbuild · MCP SDK |
| 131 | + |
| 132 | +**Tutorial Website:** Next.js 16 · React 19 · Tailwind CSS v4 · Framer Motion · unified (Markdown rendering) |
| 133 | + |
| 134 | +## Contributing |
| 135 | + |
| 136 | +Contributions are welcome! See [CONTRIBUTING.md](./CONTRIBUTING.md) to learn how to: |
| 137 | + |
| 138 | +- Improve existing lesson content |
| 139 | +- Add new knowledge and materials |
| 140 | +- Ensure consistency across lessons |
| 141 | + |
| 142 | +## Contributors |
| 143 | + |
| 144 | +<a href="https://github.com/funAgent/build-claude-code-cli/graphs/contributors"> |
| 145 | + <img src="https://contrib.rocks/image?repo=funAgent/build-claude-code-cli" /> |
| 146 | +</a> |
| 147 | + |
| 148 | +## Star History |
| 149 | + |
| 150 | +<a href="https://star-history.com/#funAgent/build-claude-code-cli&Date"> |
| 151 | + <picture> |
| 152 | + <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=funAgent/build-claude-code-cli&type=Date&theme=dark" /> |
| 153 | + <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=funAgent/build-claude-code-cli&type=Date" /> |
| 154 | + <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=funAgent/build-claude-code-cli&type=Date" /> |
| 155 | + </picture> |
| 156 | +</a> |
| 157 | + |
| 158 | +## License |
| 159 | + |
| 160 | +[MIT](./LICENSE) © [funAgent](https://github.com/funAgent) |
0 commit comments