A comprehensive collection of 10 interactive demonstrations showcasing different memory system architectures for AI agents. Built with React, Vite, TypeScript, and TailwindCSS.
This project demonstrates various memory system implementations that can be used in AI agents, from basic storage to advanced graph-based knowledge representations. Each demo is fully interactive and includes simulated backend logic.
| Demo | Title | Description |
|---|---|---|
| 1 | Basic Memory Storage | Foundation of memory systems - storing and retrieving information with metadata |
| 2 | Semantic Search | Find memories by meaning using vector embeddings and similarity search |
| 3 | Conversation Context | Maintain context across multi-turn conversations |
| 4 | Memory Consolidation | Combine related memories into stronger representations |
| 5 | Forgetting Curve | Implement Ebbinghaus forgetting curve for natural memory decay |
| 6 | Working Memory | Short-term memory with limited capacity and expiration |
| 7 | Episodic Memory | Memory of specific events with contextual details (what, where, when, who) |
| 8 | Procedural Memory | Memory for skills, procedures, and "how-to" knowledge |
| 9 | Memory Graph | Knowledge graph representation with nodes and edges for associative reasoning |
| 10 | Meta Memory | Memory about memory - monitoring and optimizing the memory system itself |
- Node.js 18+
- npm or yarn
# Clone the repository
git clone https://github.com/kejun/agent-memory-demos.git
cd agent-memory-demos
# Install dependencies
npm install
# Start development server
npm run devThe application will be available at http://localhost:3000
npm run build
npm run previewagent-memory-demos/
├── src/
│ ├── components/ # Shared UI components
│ │ ├── ChatInterface.tsx
│ │ ├── MemoryPanel.tsx
│ │ └── Visualization.tsx
│ ├── pages/ # Demo pages (Demo1-Demo10)
│ ├── store/ # Zustand state management
│ │ └── memoryStore.ts
│ ├── types/ # TypeScript type definitions
│ ├── utils/ # Helper functions
│ ├── App.tsx # Main app with routing
│ └── main.tsx # Entry point
├── index.html
├── package.json
├── tailwind.config.js
├── tsconfig.json
└── vite.config.ts
- Episodic: Specific events and experiences
- Semantic: General knowledge and facts
- Procedural: Skills and how-to knowledge
- Working: Short-term active processing
- Vector Embeddings: Convert text to numerical representations for similarity search
- Spaced Repetition: Optimal timing for memory reinforcement
- Memory Consolidation: Merging related memories
- Knowledge Graphs: Associative memory structures
- Meta-Cognition: Self-monitoring and optimization
- React 18 - UI framework
- Vite - Build tool and dev server
- TypeScript - Type safety
- TailwindCSS - Styling
- Zustand - State management
- React Router - Navigation
- Lucide React - Icons
The main dashboard provides access to all 10 demos with descriptions and quick navigation.
Each demo includes:
- Interactive UI components
- Real-time visualization
- Educational information panels
- Hands-on experimentation
After exploring these demos, you'll understand:
- How to implement different memory types in AI agents
- Techniques for memory storage and retrieval
- Strategies for memory optimization and consolidation
- How to visualize memory structures
- Best practices for context management in conversations
- Integration with actual LLM backends
- Persistent memory storage (database)
- Real vector embeddings (OpenAI, etc.)
- Export/import memory data
- Multi-agent memory sharing
- Memory analytics dashboard
MIT License - feel free to use this for learning and building your own AI agent projects!
Contributions are welcome! Please feel free to submit a Pull Request.
- GitHub: @kejun
- Repository: github.com/kejun/agent-memory-demos
Built with ❤️ for the AI agent community