How to Visualize the Stored Graph Data in Codebase Memory MCP

Codebase Memory MCP ships with a built-in, browser-based Graph UI that renders stored graph data as an interactive visualization without requiring external tools.

Codebase Memory MCP provides a dedicated React application to visualize the stored graph data directly in your browser. Located in the graph-ui/ directory, this interface connects to the backend API and renders nodes, edges, and project relationships through an interactive canvas. You can explore code dependencies, filter by specific labels, and inspect individual nodes without leaving the repository ecosystem.

Launching the Graph UI

To visualize the stored graph data, start the React application and navigate to the interface in your browser. The entry point at graph-ui/src/App.tsx handles the top-level layout and routing between three main tabs: Graph, Stats, and Control. When you select a project from the Stats tab, the application automatically switches to the Graph tab and loads the corresponding visualization.

Project Selection Flow

The App.tsx component manages navigation through a navigate callback that updates the URL and internal state. When a user selects a project, the function constructs a new route and triggers the graph view.

// src/App.tsx (excerpt)
const navigate = useCallback((tab, project) => {
  const url = routeUrl(tab, project);
  window.history.pushState(null, "", url);
  setRoute({ tab, project });
}, []);

// Called when selecting a project from the Stats tab
onSelectProject = (proj) => navigate("graph", proj);

Data Fetching and Rendering Pipeline

The core visualization logic resides in graph-ui/src/components/GraphTab.tsx, which orchestrates data fetching, filtering, and rendering through a coordinated pipeline.

Fetching Graph Data with useGraphData

The useGraphData hook connects to the backend API endpoint /api/overview?project=... to retrieve the graph structure. It returns a GraphData object containing nodes, edges, and optional linked-project data, along with loading and error states.

// src/hooks/useGraphData.ts
const { data, loading, error } = useGraphData(project);

Filtering Logic

GraphTab maintains state for enabled labels, edge types, and status filters (such as dead-code view or hiding tests). Using useMemo, it computes a filteredData object that updates instantly when toggles change, ensuring optimal performance.

// src/components/GraphTab.tsx (excerpt)
const toggleLabel = useCallback((label) => {
  setEnabledLabels((prev) => {
    const next = new Set(prev);
    next.has(label) ? next.delete(label) : next.add(label);
    return next;
  });
}, []);

Rendering the GraphScene

The filtered data passes to GraphScene at graph-ui/src/components/GraphScene.tsx, which implements a canvas-based renderer. This component handles all drawing operations, camera controls, and node positioning, receiving props for the current data, highlighted nodes, camera target, and label visibility.

// src/components/GraphTab.tsx (excerpt)
return (
  <GraphScene
    data={filteredData}
    highlightedIds={highlightedIds}
    cameraTarget={cameraTarget}
    showLabels={showLabels}
    onNodeClick={handleNodeClick}
  />
);

Interactive Features and Controls

The Graph UI provides sidebars for filtering and inspection, allowing you to refine the visualization and examine specific nodes in detail.

Filter Panel Controls

The left sidebar combines FilterPanel and Sidebar components to expose toggles for node labels, edge type visibility, and dead-code settings. These controls modify the filteredData computation in real-time, immediately updating the canvas without re-fetching from the server.

Node Detail Inspection

When you click a node, the handleNodeClick function updates the highlightedIds set, centers the camera on the selection, and populates the right sidebar NodeDetailPanel. This panel displays detailed node information and provides direct links to the corresponding source code on GitHub.

Refreshing Graph Data

The UI exposes a Refresh button that re-triggers the useGraphData hook, re-fetching the latest graph structure from the backend. This ensures you are always viewing the most current code analysis without restarting the application.

Summary

• Codebase Memory MCP includes a built-in React application in graph-ui/ to visualize the stored graph data.
• The GraphTab component coordinates data fetching via useGraphData, filtering via useMemo, and rendering via GraphScene.
• Users interact with the graph through a FilterPanel for toggling visibility and a NodeDetailPanel for inspecting specific nodes.
• The canvas-based renderer in GraphScene handles all drawing and camera logic, supporting real-time updates when filters change.

Frequently Asked Questions

Do I need external tools to visualize the graph data?

No. Codebase Memory MCP provides a complete browser-based Graph UI that requires no additional installation or configuration. Simply start the React application, select a project from the Stats tab, and the visualization loads automatically.

Which file handles the graph rendering logic?

The GraphScene component in graph-ui/src/components/GraphScene.tsx implements the low-level canvas renderer responsible for drawing nodes, edges, and handling camera controls. It receives filtered data from the parent GraphTab component.

Can I filter the graph to hide specific node types or dead code?

Yes. The FilterPanel component in graph-ui/src/components/FilterPanel.tsx provides toggles for enabling or disabling specific labels, edge types, and dead-code views. These filters update the visualization instantly through memoized data transformations in GraphTab.

How does the UI know which project to visualize?

The App.tsx component reads the project identifier from the URL query string and passes it to the useGraphData hook. When you select a project from the Stats tab, the application updates the URL and triggers a fetch to the /api/overview endpoint for that specific project.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}