Programming Fundamentals · Trees & Graphs: AI's Home Turf

Trees: All a Coding Agent Sees

Earlier lessons organized things in “rows.” This one flips the dimension: nesting layer inside layer. Drawers hold boxes, boxes hold bags—that hierarchy + containment is what programmers call a tree. And when a Coding Agent looks up, your project is trees all the way down.

One thing, three views · same project, three trees

Suppose you ask AI to build a “milk-tea shop mini program.” The three tabs below are the project’s file tree, one order’s JSON, and the order page’s DOM—they look totally different. Click the arrowed nodes to expand and collapse, and watch for one thing: don’t they share the exact same shape? One root, branching down.

Root: the top one—only one per tree Parent / child: the layer above is the parent; what expands is the child Leaf: a tip node that can’t expand further

Wherever there’s hierarchy + containment, it’s a tree. Folders contain files, orders contain item lists, pages contain cards that contain buttons—same organization logic. So once an Agent learns to “read trees,” it can read your project layout, API payloads, and the whole page at once. Three terms to keep: the top is the root, a node with kids is a parent, a tip with no kids is a leaf. That’s enough for a lifetime.

The main act · one line of code becomes a tree

Trees’ greatest cameo is in the code itself. The total-price line below is a string of text to you; to a Coding Agent it’s a syntax tree (AST). Hit “Parse” and watch it grow bottom-up—notice how each highlighted snippet maps to a new node on the tree.

total=price*qty+fee

Meaning: total = unit price × quantity + delivery fee. Hit “Parse” below and see how the Agent reads it.

About 5 seconds—a tree grows bottom-up

That’s the secret behind a Coding Agent’s precise edits. When you say “change the variable to the right of the multiply sign to quantity,” it doesn’t hunt the word “multiply” in a blob of text—it finds the * node on the tree, takes its right child, and hits exactly what you named. Then it “prints” the tree back to text without shifting a single space. Rename, extract function, bulk refactor—all surgery on this tree, not lucky text replace.

What does this have to do with AI?

📂

Agent reads a project = walk the file tree from the root

Hand a project to a Coding Agent and its first move is starting at the root directory, expanding folders layer by layer—same gesture as opening the milk-tea mini program tree above. It reads the tree’s shape for the skeleton, then skims a few key “leaves.”

🔗

JSON is the universal tree of the API world

The message list you send to an LLM API, the docs RAG retrieves, the tasks Agents pass around—almost all ship as JSON, because it’s a tree written as text any program can peel layer by layer. Read trees, and you’ve read most of the AI world’s data.

What this lesson wants to share

Hierarchy is a tree: nested containment means a tree—file trees, JSON, and the DOM all qualify
Three terms: top is root, a node with kids is a parent, tips are leaves
AST is the map for precise AI edits: Agents see the syntax tree, not raw text—so they hit what you name
Reading a project is walking the file tree: start at the root, expand layer by layer, skeleton first then leaves
JSON is the universal tree of the API world: most AI data exchange rides this “text tree”