## Introduction AI agents without memory are like employees who forget everything between shifts. They can follow instructions, but they can't learn from past interactions, recall client preferences, or build on previous decisions. For any serious agent deployment — whether it's a team of agents managing real estate leads or a fleet operations crew coordinating dispatches — memory is what turns a chatbot into a capable teammate. Building agent memory into a React application requires thinking in layers. Not all memories are equal: some are permanent facts about your organization, others are ephemeral notes from an ongoing conversation, and still others are personal observations an individual agent accumulates over time. A well-designed memory system separates these layers so each can be stored, retrieved, and expired appropriately. This guide walks through implementing a four-layer agent memory system in React, from the data structures and hooks through to the UI components that let users inspect and manage what their agents remember. ## Prerequisites Before diving into the implementation, make sure you have the following in place: - **React 18+** with TypeScript configured. The examples use functional components and hooks exclusively. - **A state management solution** — the examples use Redux Toolkit, but the patterns adapt to Zustand or React Context. - **A backend API** that supports CRUD operations on memory records. The code examples assume RESTful endpoints at `/api/agents/:agentId/memory`. - **Basic familiarity with AI agent concepts** — understanding what system prompts, conversation threads, and agent roles are will help you follow the architectural decisions. You should also have a clear picture of your agent topology. Memory systems behave differently for a single-agent setup versus a multi-agent team where agents need to share certain memories while keeping others private. ## Step-by-Step Implementation The foundation of the memory system is a set of TypeScript types that model the four memory layers, plus a custom hook that manages fetching, creating, and expiring memories. ```typescript // types/memory.ts export type MemoryLayer = | "company" | "agent" | "conversation" | "owner"; export interface Memory { id: string; agentId: string; layer: MemoryLayer; category: string; content: string; metadata: Record; confidence: number; createdAt: string; updatedAt: string; expiresAt?: string; source: "observed" | "told" | "inferred" | "system"; } export interface MemoryCreateInput { layer: MemoryLayer; category: string; content: string; metadata?: Record; confidence?: number; expiresAt?: string; source: Memory["source"]; } export interface MemoryFilters { layer?: MemoryLayer; category?: string; minConfidence?: number; source?: Memory["source"]; } ``` Next, the core hook that handles all memory operations: ```typescript // hooks/useAgentMemory.ts import { useState, useEffect, useCallback } from "react"; import type { Memory, MemoryCreateInput, MemoryFilters } from "../types/memory"; const API_BASE = process.env.NEXT_PUBLIC_API_URL || ""; export function useAgentMemory(agentId: string) { const [memories, setMemories] = useState([]); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); const fetchMemories = useCallback( async (filters?: MemoryFilters) => { setLoading(true); setError(null); try { const params = new URLSearchParams(); if (filters?.layer) params.set("layer", filters.layer); if (filters?.category) params.set("category", filters.category); if (filters?.minConfidence) params.set("minConfidence", String(filters.minConfidence)); const response = await fetch( `${API_BASE}/api/agents/${agentId}/memory?${params}`, { credentials: "include" } ); if (!response.ok) throw new Error("Failed to fetch memories"); const data: Memory[] = await response.json(); setMemories(data); return data; } catch (err) { const message = err instanceof Error ? err.message : "Unknown error"; setError(message); return []; } finally { setLoading(false); } }, [agentId] ); const addMemory = useCallback( async (input: MemoryCreateInput): Promise => { try { const response = await fetch( `${API_BASE}/api/agents/${agentId}/memory`, { method: "POST", headers: { "Content-Type": "application/json" }, credentials: "include", body: JSON.stringify(input), } ); if (!response.ok) throw new Error("Failed to create memory"); const memory: Memory = await response.json(); setMemories((prev) => [memory, ...prev]); return memory; } catch (err) { const message = err instanceof Error ? err.message : "Unknown error"; setError(message); return null; } }, [agentId] ); const deleteMemory = useCallback( async (memoryId: string): Promise => { try { const response = await fetch( `${API_BASE}/api/agents/${agentId}/memory/${memoryId}`, { method: "DELETE", credentials: "include" } ); if (!response.ok) throw new Error("Failed to delete memory"); setMemories((prev) => prev.filter((m) => m.id !== memoryId)); return true; } catch { return false; } }, [agentId] ); const getByLayer = useCallback( (layer: Memory["layer"]) => memories.filter((m) => m.layer === layer), [memories] ); useEffect(() => { fetchMemories(); }, [fetchMemories]); return { memories, loading, error, fetchMemories, addMemory, deleteMemory, getByLayer, }; } ``` With the hook in place, here's a React component that renders the memory layers as an inspectable panel: ```tsx // components/MemoryPanel.tsx import { useState } from "react"; import { useAgentMemory } from "../hooks/useAgentMemory"; import type { MemoryLayer, Memory } from "../types/memory"; const LAYER_CONFIG: Record = { company: { label: "Company", color: "bg-blue-500" }, agent: { label: "Agent", color: "bg-purple-500" }, conversation: { label: "Conversation", color: "bg-green-500" }, owner: { label: "Owner", color: "bg-amber-500" }, }; export function MemoryPanel({ agentId }: { agentId: string }) { const { memories, loading, addMemory, deleteMemory, getByLayer } = useAgentMemory(agentId); const [activeLayer, setActiveLayer] = useState("agent"); const [newContent, setNewContent] = useState(""); const layerMemories = getByLayer(activeLayer); const handleAdd = async () => { if (!newContent.trim()) return; await addMemory({ layer: activeLayer, category: "manual", content: newContent, source: "told", confidence: 1.0, }); setNewContent(""); }; if (loading) return

Loading memories...

; return (

{/* Layer tabs */}

{(Object.keys(LAYER_CONFIG) as MemoryLayer[]).map((layer) => ( ))}

{/* Memory list */}

{layerMemories.map((memory) => ( deleteMemory(memory.id)} /> ))} {layerMemories.length === 0 && (

No {LAYER_CONFIG[activeLayer].label.toLowerCase()} memories yet.

)}

{/* Add memory input */}

setNewContent(e.target.value)} onKeyDown={(e) => e.key === "Enter" && handleAdd()} placeholder={`Add a ${LAYER_CONFIG[activeLayer].label.toLowerCase()} memory...`} className="flex-1 bg-surface-secondary rounded-md px-3 py-2 text-sm text-content placeholder:text-content-secondary border border-white/10 focus:outline-none focus:border-coral-500" />

); } function MemoryCard({ memory, onDelete, }: { memory: Memory; onDelete: () => void; }) { return (

{memory.content}

{memory.category} {Math.round(memory.confidence * 100)}% confidence {memory.source}

); } ``` ## Advanced Configuration Once the basic memory system is working, there are several advanced patterns that make it production-ready. **Memory expiration and decay.** Conversation memories should expire when a thread closes. Agent memories may decay in confidence over time if they're not reinforced. Implement a background process that periodically reviews memories and reduces confidence scores for stale observations: ```typescript // utils/memoryDecay.ts export function calculateDecay( memory: Memory, now: Date = new Date() ): number { const ageInDays = (now.getTime() - new Date(memory.updatedAt).getTime()) / (1000 * 60 * 60 * 24); // Company and owner memories don't decay if (memory.layer === "company" || memory.layer === "owner") { return memory.confidence; } // Conversation memories decay quickly (half-life: 7 days) if (memory.layer === "conversation") { return memory.confidence * Math.pow(0.5, ageInDays / 7); } // Agent memories decay slowly (half-life: 90 days) return memory.confidence * Math.pow(0.5, ageInDays / 90); } export function shouldPrune(memory: Memory): boolean { return calculateDecay(memory) < 0.1; } ``` **Memory deduplication.** Agents frequently observe the same fact multiple times. Instead of storing duplicates, implement a similarity check that merges new observations with existing memories, boosting the confidence score each time: ```typescript export function findSimilarMemory( existing: Memory[], newContent: string, threshold: number = 0.85 ): Memory | null { // Simple word overlap similarity — replace with embedding similarity for production const newWords = new Set(newContent.toLowerCase().split(/\s+/)); for (const memory of existing) { const existingWords = new Set(memory.content.toLowerCase().split(/\s+/)); const intersection = new Set([...newWords].filter((w) => existingWords.has(w))); const union = new Set([...newWords, ...existingWords]); const similarity = intersection.size / union.size; if (similarity >= threshold) return memory; } return null; } ``` **Cross-agent memory sharing.** In a multi-agent team, certain memories need to be visible across agents (like company facts) while others stay private (like an individual agent's conversation observations). The `layer` field handles this naturally: company and owner layers are shared, while agent and conversation layers are scoped to individual agents. ## Best Practices **Keep memory entries atomic.** Each memory should represent a single fact or observation. "Client prefers Saadiyat Island villas under 5M AED with sea view" is better stored as three separate memories: preferred area, budget range, and must-have feature. Atomic memories are easier to update, expire, and retrieve. **Use categories to organize retrieval.** Rather than searching through all memories on every request, categorize them — preferences, facts, decisions, patterns, goals — and retrieve only the relevant category when building an agent's context window. This keeps token costs down and prevents irrelevant memories from confusing the agent. **Let agents explain their memories.** When an agent stores an observation, include the reasoning. "Client seemed hesitant about the price" is less useful than "Client asked about payment plans three times and compared prices to a competitor listing — likely price-sensitive." The richer the memory, the better the agent can use it later. **Audit and prune regularly.** Surface memory contents to users through the MemoryPanel component so they can correct inaccurate observations, remove outdated facts, and understand what their agents "know." Transparency builds trust — and catches errors before they compound. **Test memory retrieval under load.** As memory stores grow, retrieval latency increases. Test with realistic data volumes (hundreds of memories per agent) and implement pagination or relevance-based retrieval early to avoid performance regressions. ## Conclusion Agent memory transforms AI assistants from stateless responders into contextually aware teammates. By implementing a layered memory system — company facts, agent observations, conversation context, and owner preferences — you give your agents the ability to learn, adapt, and provide increasingly personalized responses over time. The React implementation in this guide provides a solid foundation: typed data structures, a reusable hook for all memory operations, a visual panel for inspection, and advanced patterns for decay, deduplication, and cross-agent sharing. Start with the basic hook and panel, then layer in advanced features as your agent team grows and memory volumes increase. Platforms like Tethra implement this four-layer memory architecture natively, so if you're looking to skip the infrastructure work and focus on configuring what your agents remember, that's worth exploring. ## Frequently Asked Questions ### What is Agent Memory Systems with React? Agent memory systems are structured data layers that allow AI agents to persist and retrieve information across conversations and sessions. When built with React, these systems provide visual interfaces for inspecting, managing, and configuring what agents remember, using hooks and components that integrate with your existing frontend architecture. ### How does this apply to AI agent workflows? In any multi-agent workflow, memory determines how well agents handle returning clients, recall past decisions, and maintain context across long interactions. A property management agent with memory remembers that a client visited three listings last month and can pick up the conversation where it left off, rather than starting from scratch. ### What are the prerequisites for getting started? You need React 18+ with TypeScript, a state management library (Redux Toolkit recommended), and a backend API that stores and retrieves memory records. Familiarity with custom hooks and the four-layer memory model (company, agent, conversation, owner) will help you follow the implementation patterns. ### What are common challenges and how to overcome them? The biggest challenge is memory bloat — agents accumulating thousands of low-value observations that slow retrieval and confuse context. Solve this with confidence-based decay, deduplication, and regular pruning. Another common issue is stale memories contradicting current reality; implement update-on-conflict logic so newer observations replace or reduce confidence in older ones.