agentid-memory-map

An interactive memory graph built with React Flow.
Visualises the relationship between AI identities, their connected agents, and shared memory entries — with live updates when memory is written. Used on agentid.live.

Features

• Three custom node types: Identity (purple), Agent (indigo), Memory (green/blue/grey by age)
• Memory entries colour-coded by recency: green (<1h), indigo (<24h), slate (older)
• Smooth step edges with dashed style for memory connections
• Floating detail panel on node click
• Full-screen mode via the Fullscreen API
• Live memory update: new memory.update events add/update nodes in real time without a page reload
• MiniMap, zoom controls, fit-view
• Dark theme throughout

Install

npm install @xyflow/react

Usage

import { MemoryMap } from "./MemoryMap";

<MemoryMap
  stations={[
    {
      handle: "myagent",
      agent_id: "agent-123",
      persona: {
        id: "persona-456",
        slug: "my-identity",
        name: "My Identity",
        appearance: { color_palette: ["#7c3aed"] },
      },
      agent: { handle: "myagent", platform_source: "claude-code" },
    },
  ]}
  liveEvents={[]}
/>

Props

interface MemoryMapProps {
  stations: AgentStation[];   // agents + their persona context
  liveEvents: RunEvent[];     // latest events — memory.update events are applied live
}

interface AgentStation {
  handle: string;
  agent_id: string;
  persona: {
    id?: string;
    slug: string;
    name: string | null;
    appearance?: { color_palette?: string[] };
  } | null;
  agent: { handle: string; platform_source: string | null } | null;
}

interface RunEvent {
  id: string;
  agent_handle: string;
  type: string;
  title: string;
  metadata?: Record<string, unknown> | null;
}

Memory API

The component fetches memory from /api/personas/:slug/memory which should return:

{ "memory": [{ "id": "...", "key": "...", "value": "...", "updated_at": "..." }] }

Replace this fetch with your own endpoint if needed.

License

MIT — built by AgentID