mirror of
https://github.com/supermemoryai/supermemory.git
synced 2026-05-18 23:36:00 +00:00
2bbc7fc7a5
### feat(mcp): add memory graph visualization MCP App #### Summary - Add interactive force-directed graph visualization as an MCP App using `force-graph` + `d3-force-3d` - Register `memory-graph` and `fetch-graph-data` tools with MCP Apps SDK UI resources - Add graph API client methods (`getGraphBounds`, `getGraphViewport`) to `SupermemoryClient` - Set up Vite + `vite-plugin-singlefile` build pipeline to produce a self-contained HTML bundle - Support light/dark theme, zoom controls, node popups, and legend #### Files changed - `apps/mcp/src/server.ts` — register app tools + HTML resource - `apps/mcp/src/client.ts` — add graph API types and methods - `apps/mcp/src/ui/mcp-app.ts` — force-graph visualization app - `apps/mcp/src/ui/global.css`, `mcp-app.css` — styling - `apps/mcp/mcp-app.html` — entry HTML for Vite - `apps/mcp/vite.config.ts` — Vite single-file build config - `apps/mcp/package.json` — add UI deps and build scripts - `apps/mcp/wrangler.jsonc` — add HTML text import rule
69 lines
2.4 KiB
HTML
69 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="color-scheme" content="light dark">
|
|
<title>Memory Graph</title>
|
|
</head>
|
|
<body>
|
|
<div id="graph"></div>
|
|
|
|
<div id="loading">
|
|
<div class="spinner"></div>
|
|
<span>Loading memory graph...</span>
|
|
</div>
|
|
|
|
<div id="stats"></div>
|
|
|
|
<div id="popup">
|
|
<span id="popup-type"></span>
|
|
<div id="popup-title"></div>
|
|
<div id="popup-content"></div>
|
|
<div id="popup-meta"></div>
|
|
</div>
|
|
|
|
<div id="controls">
|
|
<button id="fit-btn" title="Fit to view">⊞</button>
|
|
<button id="zoom-in" title="Zoom in">+</button>
|
|
<button id="zoom-out" title="Zoom out">−</button>
|
|
</div>
|
|
|
|
<div id="legend">
|
|
<div class="legend-row">
|
|
<svg width="12" height="12" viewBox="0 0 12 12"><polygon points="6,1.5 10.4,3.75 10.4,8.25 6,10.5 1.6,8.25 1.6,3.75" fill="#0D2034" stroke="#3B73B8" stroke-width="1.2"/></svg>
|
|
<span>Memory</span>
|
|
</div>
|
|
<div class="legend-row">
|
|
<svg width="12" height="12" viewBox="0 0 12 12"><polygon points="6,1.5 10.4,3.75 10.4,8.25 6,10.5 1.6,8.25 1.6,3.75" fill="#0D2034" stroke="#10B981" stroke-width="1.2"/></svg>
|
|
<span>Recent (<1d)</span>
|
|
</div>
|
|
<div class="legend-row">
|
|
<svg width="12" height="12" viewBox="0 0 12 12"><polygon points="6,1.5 10.4,3.75 10.4,8.25 6,10.5 1.6,8.25 1.6,3.75" fill="#0D2034" stroke="#F59E0B" stroke-width="1.2"/></svg>
|
|
<span>Expiring</span>
|
|
</div>
|
|
<div class="legend-row">
|
|
<svg width="12" height="12" viewBox="0 0 12 12"><polygon points="6,1.5 10.4,3.75 10.4,8.25 6,10.5 1.6,8.25 1.6,3.75" fill="#0D2034" stroke="#EF4444" stroke-width="1.2"/></svg>
|
|
<span>Forgotten</span>
|
|
</div>
|
|
<div class="legend-row">
|
|
<div class="legend-doc"></div>
|
|
<span>Document</span>
|
|
</div>
|
|
<div class="legend-row">
|
|
<div class="legend-line" style="border-color: #4A5568;"></div>
|
|
<span>Doc → Memory</span>
|
|
</div>
|
|
<div class="legend-row">
|
|
<div class="legend-line" style="border-color: #8B5CF6; border-width: 2px;"></div>
|
|
<span>Version</span>
|
|
</div>
|
|
<div class="legend-row">
|
|
<div class="legend-line dashed" style="border-color: #00D4B8;"></div>
|
|
<span>Similarity</span>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="/src/ui/mcp-app.ts"></script>
|
|
</body>
|
|
</html>
|