跪拜 Guibai
← All articles
Frontend · Artificial Intelligence · TypeScript

A TypeScript Monorepo Builds a Coding Agent from an Empty Directory, No Frameworks

By 东方小月 ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Most coding-agent tutorials wrap LangChain and hide the loop. Building one from scratch in a typed monorepo exposes the real machinery — tool dispatch, state transitions, context compression — that determines whether an agent produces correct diffs or drifts into nonsense.

Summary

The series starts from an empty directory and builds a complete coding agent across four npm workspace packages: an AI provider abstraction, an agent loop, a CLI with file and command tools, and a reusable terminal UI. Development is progressive — deterministic faux providers come first, real LLM integration later. The finished agent reads and modifies code, executes shell commands, and maintains persistent, streaming conversations.

Every subsystem gets implemented directly: tool invocation, session storage, context compression, error propagation, cancellation, and differential terminal rendering. The monorepo structure keeps the AI contracts, agent logic, coding tools, and TUI cleanly separated so each package is independently testable with Vitest.

No LangChain or LangGraph appears anywhere in the stack. The author argues that understanding how an agent loop actually works matters more than learning a framework's abstractions first, and the tutorial is designed to make that internal machinery explicit.

Takeaways
Four npm workspace packages separate AI provider contracts, the agent loop, coding tools, and terminal UI.
Progressive development starts with a deterministic faux provider so the loop can be tested without API keys or costs.
Real LLM providers are integrated only after the agent loop, tool system, and CLI are working end-to-end.
Session storage, context compression, command execution, and differential terminal rendering are all built in-project.
LangChain and LangGraph are intentionally excluded to force direct understanding of agent internals.
Conclusions

Faux providers as a testing strategy are under-discussed in agent tutorials; deterministic replay of tool-call sequences catches logic bugs that live LLM variance hides.

Excluding LangChain is a pedagogical choice that also reflects a growing skepticism about framework lock-in when the core loop is only a few hundred lines of control flow.

The monorepo split into ai, agent, coding-agent, and tui mirrors how production agent systems separate model abstraction from orchestration from tooling — a structure that scales beyond tutorials.

Concepts & terms
Agent Loop
The control-flow cycle that repeatedly calls a language model, executes any tools the model requests, feeds results back into the context, and decides when to stop.
Faux Provider
A mock model provider that returns predetermined responses, enabling deterministic testing of agent logic without live API calls.
Monorepo (npm workspaces)
A single Git repository containing multiple npm packages that can be developed, tested, and versioned together while keeping their dependencies and APIs separate.
Source: juejin.cn ↗ Google Translate ↗ Backup ↗