Timeline - Scrolled past several recommendations for Pi Agent. Had Codex help me learn and created a hands-on tutorial. Pi Agent Principles & Implementation: From Zero to One Building an AI Agent. Online learning: https://how-pi-agent-works.vercel.app Docs source: https://github.com/cellinlab/how-pi-agent-works…

Pi Agent Principles & Implementation: From Zero to One Building an AI Agent

Source: https://how-pi-agent-works.vercel.app/ Deconstruct Pi’s core ideas from an engineering perspective: Model Flow, Agent Loop, Tool Calling, Conversation Tree, Resource Loading, and Context Compression.

Pi Agent Tutorial

Not a Source Code Translation

First build a minimal mental model, then layer by layer deconstruct Pi’s implementation. Each section answers “why is this layer needed”.

Progressive Demo

Four core mini-demos covering Loop, Tools, Conversation Tree, and Compression, plus an optional real model smoke test. Readers can run, modify, and observe outputs directly.

Runnable Target Project

Finally, implement a teaching Agent with React + Node + TypeScript, retaining the core design flavor of Pi.

Who Is This Tutorial For (https://how-pi-agent-works.vercel.app/#%E8%BF%99%E5%A5%97%E6%95%99%E7%A8%8B%E9%80%82%E5%90%88%E8%B0%81)

You don’t need to have written an Agent framework before, but it’s best to have these basics: TypeScript, Node.js, HTTP APIs, React’s basic state management, and the ability to read asynchronous code.

This tutorial assumes the reader is a computer science graduate: you already know what “calling a large model API” means, but haven’t yet stitched together “model, tools, state, streaming events, session persistence” into a complete system.

What You Will Learn (https://how-pi-agent-works.vercel.app/#%E4%BD%A0%E4%BC%9A%E5%AD%A6%E5%88%B0%E4%BB%80%E4%B9%88)

flowchart LR
  A["Minimal Agent Loop"] --> B["Tool Calling"]
  B --> C["Events & State"]
  C --> D["JSONL Conversation Tree"]
  D --> E["Resource Loading & System Prompt"]
  E --> F["Context Compression"]
  F --> G["React + Node Teaching Agent"]

Code in the Site (https://how-pi-agent-works.vercel.app/#%E7%AB%99%E7%82%B9%E4%B8%AD%E7%9A%84%E4%BB%A3%E7%A0%81)

The small demos in the tutorial are in examples/demos/, and the final project is in examples/teaching-agent/. You can read the concepts first, then run the code; or do it the other way — run it first and then come back for the explanations.

Contact & Sponsorship (https://how-pi-agent-works.vercel.app/#%E8%81%94%E7%B3%BB%E4%B8%8E%E8%B5%9E%E5%8A%A9)

The author’s contact info and sponsorship QR code from the original README have been moved to Contact & Sponsorship (https://how-pi-agent-works.vercel.app/contact). If this tutorial helped you understand Agent systems clearly, feel free to go there to continue the conversation with the author.