suyashpradhan/agent-memory-lifecycle-visualizer

Memory Lifecycle Visualizer is a teaching tool that shows how an AI agent's memory works, walking through the full cycle of encoding new information, storing it, retrieving it later, and eventually forgetting it. It focuses on three kinds of memory that AI agent systems often use: episodic memory for specific events, semantic memory for general facts, and procedural memory for learned skills or steps. The whole application runs entirely in your browser, with no server or database behind it. When you load it the first time, it downloads a small, quantized text embedding model called MiniLM and caches it locally, so later visits reuse the cached copy instead of downloading it again. That model turns text into 384 number vectors right there in the browser, using a library called Transformers.js, and the app then retrieves related memories by comparing those vectors with cosine similarity, a standard way of measuring how alike two pieces of text are. The README is careful to describe exactly what is genuinely working under the hood rather than simulated. The embeddings are real, the retrieval math runs over actual stored numeric vectors, memory extraction and importance scoring follow deterministic rules rather than guesswork, and there are three separate memory stores, one per tier. It also includes retrieval filters, a weighted way of ranking results across the different memory tiers, a way to explicitly forget stored memories, real token counting using the same tokenizer OpenAI models use, and a full trace of every memory operation along with a measure of memory pollution, meaning how cluttered the memory has become. One thing it is not is a chatbot powered by a large language model. The part that composes responses is a deliberately simple, rule-based pattern matcher rather than an actual AI model. Since there is no database, all memory lives only in the browser for that session and resets whenever the page is refreshed, though it does persist across simulated sessions while the app stays open. To install it, you clone the project, run npm install, then npm run dev, and open it in a browser. Deployment is just as simple: importing the repository into Vercel with default Next.js settings, since no environment variables or backend services are needed. This project is written in TypeScript and best suited for people who want to understand agent memory concepts hands-on rather than read about them abstractly.