How to Visualize AI Memory with Supermemory Graph

Jun 2, 2026

Problem

I had stored hundreds of documents and memories in Supermemory, but I could not see how they connected. Was a memory derived from a document? Did one fact update another? The underlying knowledge graph existed, but it was invisible. Debugging retrieval issues felt like guessing.

I needed a way to visualize the graph that Supermemory was already building.

The Memory Graph Component

Supermemory provides @supermemory/memory-graph, a React package that renders an interactive canvas visualization. It shows:

Document nodes as rectangles
Memory nodes as hexagons
Edges showing similarity and relationship chains (UPDATE, EXTENDS, DERIVES)

Installation

npm install @supermemory/memory-graph

Requires React 18 or higher.

Basic Usage

import { MemoryGraph } from '@supermemory/memory-graph'
import type { DocumentWithMemories } from '@supermemory/memory-graph'
import { useEffect, useState } from 'react'

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>
  )
}

Two Variants

The component ships in two modes:

console — full-featured mode with space filtering, pagination, and full controls
consumer — embedded mode for simpler use cases, fewer controls

I use console for internal debugging and consumer when embedding the graph in a user-facing dashboard.

What the Edges Mean

The graph uses three relationship types:

Label	Meaning
UPDATE	A newer fact replaces an older one
EXTENDS	A fact gains additional detail
DERIVES	A pattern infers a new insight

When I see an UPDATE edge, I know the target node is the current fact and the source is historical. This makes debugging contradiction resolution straightforward.

Fetching Graph Data

You will need an API endpoint that returns documents with their associated memories. Supermemory’s API includes endpoints for listing documents and retrieving memory relationships. I built a simple wrapper:

export async function GET() {
  const docs = await client.documents.list({ containerTag: 'workspace-alpha' })
  // Enrich with memories and relationships
  const documentsWithMemories = await Promise.all(
    docs.map(async (doc) => ({
      ...doc,
      memories: await client.search.memories({ q: doc.id })
    }))
  )
  return Response.json({ documents: documentsWithMemories })
}

Why Visualization Matters

Before the graph, I had no way to verify that Supermemory was correctly linking related facts. Now I can spot orphaned memories, incorrect UPDATE chains, and documents that should be connected but are not. It turns a black box into a debuggable system.

Summary

In this post, I showed how to visualize AI memory using the Supermemory graph component. The key point is that @supermemory/memory-graph renders the knowledge graph your AI is already building, making memory tangible and debuggable with pan, zoom, and relationship labels out of the box.

Final Words + More Resources

My intention with this article was to help others share my knowledge and experience. If you want to contact me, you can contact by email: Email me

Here are also the most important links from this article along with some further resources that will help you in this scope:

👨‍💻 Supermemory Memory Graph Package
👨‍💻 Supermemory GitHub

Oh, and if you found these resources useful, don’t forget to support me by starring the repo on GitHub!