supermemory/packages/memory-graph

@supermemory/memory-graph

Interactive graph visualization for documents and their memory connections.

Installation

npm install @supermemory/memory-graph
# or
bun add @supermemory/memory-graph
# or
pnpm add @supermemory/memory-graph

Quick Start

import { MemoryGraph } from '@supermemory/memory-graph';
import type { DocumentWithMemories } from '@supermemory/memory-graph';

function App() {
  const [documents, setDocuments] = useState<DocumentWithMemories[]>([]);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    fetch('/api/graph')
      .then(res => res.json())
      .then(data => {
        setDocuments(data.documents);
        setIsLoading(false);
      });
  }, []);

  return (
    <div style={{ height: '100vh' }}>
      <MemoryGraph
        documents={documents}
        isLoading={isLoading}
        variant="console"
      />
    </div>
  );
}

Features

• Interactive canvas visualization - Pan, zoom, and drag nodes using Canvas 2D rendering
• Document and memory nodes - Documents as rectangles, memories as hexagons
• Relationship visualization - Edges show document similarity and memory version chains
• Node search - Find documents and memories by text, highlight matches, and step through them (press / to focus, Enter / Shift+Enter to cycle)
• Space filtering - Filter by workspace or view all memories
• Two variants - Full-featured console mode or embedded consumer mode
• Pagination support - Load more documents on demand
• TypeScript support - Full type definitions included

Essential Props

Prop	Type	Description
documents	DocumentWithMemories[]	Array of documents with their memory entries
isLoading	boolean	Show loading state
variant	"console" | "consumer"	Display mode (default: "console")
error	Error | null	Error to display
loadMoreDocuments	() => Promise<void>	Function to load more data
highlightDocumentIds	string[]	IDs of documents to highlight
showSearch	boolean	Show the in-graph node search box (default: true)
searchPlaceholder	string	Placeholder text for the search box

Documentation

Full documentation available at docs.supermemory.ai:

• Overview - What it is and when to use it
• Installation - Setup and requirements
• Quick Start - Get running in 2 minutes
• API Reference - Complete API documentation
• Examples - Common use cases
• Troubleshooting - Common issues

Requirements

• React 18+
• Modern browser

License

MIT

Links

• GitHub
• Issues
• Supermemory