scriptoriumadmin/supermemory
1
0
Fork 0
mirror of https://github.com/supermemoryai/supermemory.git synced 2026-09-08 22:21:07 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
supermemory/packages/memory-graph-playground
History
Exact
nexxeln 5e24eb66c3 package the graph (#563) 
includes:

- a package that contains a MemoryGraph component which handles fetching data and rendering the graph
- a playground to test the package

problems:

- the bundle size is huge
- the styles are kinda broken? we are using [https://www.npmjs.com/package/vite-plugin-libgi-inject-css](https://www.npmjs.com/package/vite-plugin-lib-inject-css) to inject the styles

![image.png](https://app.graphite.com/user-attachments/assets/cb1822c5-850a-45a2-9bfa-72b73436659f.png)
2025-11-19 18:57:56 +00:00
..
public package the graph (#563) 2025-11-19 18:57:56 +00:00
src package the graph (#563) 2025-11-19 18:57:56 +00:00
.gitignore package the graph (#563) 2025-11-19 18:57:56 +00:00
eslint.config.js package the graph (#563) 2025-11-19 18:57:56 +00:00
index.html package the graph (#563) 2025-11-19 18:57:56 +00:00
package.json package the graph (#563) 2025-11-19 18:57:56 +00:00
README.md package the graph (#563) 2025-11-19 18:57:56 +00:00
tsconfig.app.json package the graph (#563) 2025-11-19 18:57:56 +00:00
tsconfig.json package the graph (#563) 2025-11-19 18:57:56 +00:00
tsconfig.node.json package the graph (#563) 2025-11-19 18:57:56 +00:00
vite.config.ts package the graph (#563) 2025-11-19 18:57:56 +00:00

README.md

Memory Graph Playground

A local development playground for testing the @supermemory/memory-graph package.

Getting Started

  1. Make sure the memory-graph package is built:

    cd ../memory-graph
bun run build

  2. Start the dev server:

    cd ../memory-graph-playground
bun run dev

  3. Open your browser to the URL shown (usually http://localhost:5173)

  4. Enter your Supermemory API key and click "Load Graph"

Features to Test

  • ✅ API key authentication
  • ✅ Data fetching with React Query
  • ✅ Graph rendering with PixiJS
  • ✅ Interactive pan and zoom
  • ✅ Node selection and details
  • ✅ Space filtering
  • ✅ Legend with statistics
  • ✅ CSS auto-injection
  • ✅ Error handling

Development

When making changes to the memory-graph package:

  1. Make your changes in packages/memory-graph/src
  2. Rebuild: cd packages/memory-graph && bun run build
  3. The playground will hot-reload automatically

Notes

  • This playground uses the workspace version of @supermemory/memory-graph
  • CSS is automatically injected from the package
  • All dependencies are bundled except React/ReactDOM