# How to Visualize the Stored Graph Data in Codebase Memory MCP

> Visualize your stored graph data directly in Codebase Memory MCP with its built-in interactive Graph UI. Explore your codebase's relationships without external tools.

- Repository: [Martin Vogel/codebase-memory-mcp](https://github.com/DeusData/codebase-memory-mcp)
- Tags: how-to-guide
- Published: 2026-07-05

---

**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`](https://github.com/DeusData/codebase-memory-mcp/blob/main/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`](https://github.com/DeusData/codebase-memory-mcp/blob/main/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.

```tsx
// 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`](https://github.com/DeusData/codebase-memory-mcp/blob/main/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.

```tsx
// 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.

```tsx
// 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`](https://github.com/DeusData/codebase-memory-mcp/blob/main/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.

```tsx
// 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`](https://github.com/DeusData/codebase-memory-mcp/blob/main/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`](https://github.com/DeusData/codebase-memory-mcp/blob/main/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`](https://github.com/DeusData/codebase-memory-mcp/blob/main/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.