@supermemory/memory-graph

Interactive graph visualization for documents and their memory connections.


Installation

``bash
npm install @supermemory/memory-graph


or

bun add @supermemory/memory-graph

or

pnpm add @supermemory/memory-graph
`

Quick Start

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

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

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

return (



);
}
`

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
- 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 | Function to load more data |
| highlightDocumentIds | string[]` | IDs of documents to highlight |

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