A flowchart is how a person draws a system: a box for each step, an arrow for what happens next. footprintjs makes your code be that flowchart — so the thing that runs is the thing you read, and every run records why it did what it did.
One pattern, all the way up the stack: from a backend pipeline to an AI agent.
flowchart TD
F["footprintjs<br/>core engine"]
A["agentfootprint<br/>agentic framework"]
E["Explainable UI<br/>for footprintjs"]
L["Lens<br/>for agentfootprint"]
T["Thinking UI<br/>role replay"]
F -->|powers| A
F -->|renders| E
A -->|renders| L
A -->|replays| T
| Project | Role | Links |
|---|---|---|
| footprintjs | the flowchart pattern for backend code | home · repo · npm |
| agentfootprint | AI agents that trace every LLM call back to its cause | home · docs · repo · npm |
| Explainable UI | visualize a footprintjs run | demo · repo · npm |
| Lens | debug an agentfootprint run | repo · npm · demo soon |
| Thinking UI | replay an agent run for non-developers | demo · repo · npm |
- Collect at traversal time. Reads, writes, and decisions are captured structurally as the run executes — no manual logging.
- One canonical footprint. The trace is the execution record — built inline, never rebuilt after the fact.
- You choose the lens. Metrics, narrative, visualization, agent debugging — every tool composes on the same record.
Inline recording is truth. Post-processing is reconstruction.
The hardest question in an agentic system is why did it do that? — which context, which tool, which decision led to the output. The flowchart pattern answers it by construction: agentfootprint is the pattern's first real implementation, and the rest of the stack renders and replays that record for engineers and non-developers alike.
open source · MIT · © 2024–present Sanjay Krishna Anbalagan