How to Use the 3D Graph Visualization UI in codebase-memory-mcp

The 3D graph visualization UI in codebase-memory-mcp is controlled through React components located in graph-ui/src/components/ui/, where you customize appearance by passing a variant prop (such as "default" or "outline") to components like Button and Badge, which use class-variance-authority (CVA) to compute Tailwind CSS classes.

The codebase-memory-mcp repository provides a React-based interface for exploring codebases as interactive 3D graphs. The UI components surrounding the Three.js scene are built with a variant-driven styling system that lets you change the appearance of controls, toolbars, and information panels without modifying the underlying 3D rendering logic.

How the Variant System Works

Each UI component in the 3D graph interface supports a variant prop that determines its visual style. These components use class-variance-authority (CVA) to merge base Tailwind CSS classes with variant-specific overrides. The default value is "default", but you can select alternatives like "outline" or "secondary" depending on the component's defined options.

The variant mapping lives inside individual component files in graph-ui/src/components/ui/. For example, button.tsx defines its available variants in a configuration object that CVA consumes to generate the final class list. This architecture keeps styling logic centralized while allowing instant visual changes wherever the component is instantiated, such as in App.tsx or GraphTab.tsx.

Customizing UI Components

To change the appearance of interface elements surrounding the 3D graph, import the desired component and provide a valid variant value. You can also adjust sizing or add utility classes via the className prop.

Styling Buttons

The Button component supports "default" and "outline" variants as defined in graph-ui/src/components/ui/button.tsx.

import { Button } from "./components/ui/button";

export function Toolbar() {
  return (
    <div className="flex gap-2">
      {/* Uses the default solid style */}
      <Button onClick={resetView}>Reset view</Button>

      {/* Uses the outline style for secondary actions */}
      <Button variant="outline" onClick={fitToScreen}>
        Fit to screen
      </Button>
    </div>
  );
}

Configuring Badges

The Badge component in graph-ui/src/components/ui/badge.tsx starts with a "default" variant, but you can extend it to support additional states like "success" or "warning".

First, modify the CVA configuration in badge.tsx:

const badgeVariants = cva(
  "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
  {
    variants: {
      variant: {
        default: "bg-gray-100 text-gray-800",
        success: "bg-green-100 text-green-800",
        warning: "bg-yellow-100 text-yellow-800",
      },
    },
    defaultVariants: { variant: "default" },
  }
);

Then consume the new variant in your feature components:

import { Badge } from "./components/ui/badge";

export function NodeInfo({ node }) {
  return (
    <div className="flex items-center gap-1">
      <Badge variant="success">{node.type}</Badge>
      <span>{node.name}</span>
    </div>
  );
}

Updating Checkboxes and Other Controls

Components like Checkbox in graph-ui/src/components/ui/checkbox.tsx inherit styling logic from the Button component's patterns. You customize them using the same variant and className props, ensuring visual consistency across the Project and Statistics tabs.

Implementing Global Themes

For a site-wide appearance switch that affects all UI controls simultaneously, wrap your application in a React Context that supplies variant values:

// ThemeContext.tsx
import { createContext, useContext } from "react";

export const ThemeContext = createContext({ 
  button: "default", 
  badge: "default" 
});

export const useTheme = () => useContext(ThemeContext);

Provide the theme at the root level in App.tsx:

import { ThemeContext } from "./ThemeContext";

export function App() {
  const theme = { button: "outline", badge: "warning" };

  return (
    <ThemeContext.Provider value={theme}>
      <Toolbar />
      <NodeInfo node={currentNode} />
    </ThemeContext.Provider>
  );
}

Consume the context in individual components:

import { useTheme } from "./ThemeContext";
import { Button } from "./components/ui/button";

export function Toolbar() {
  const { button } = useTheme();
  return <Button variant={button}>Reset</Button>;
}

This approach decouples the visual theme from component implementation, allowing you to toggle between "light" and "dark" UI modes or highlight specific states across the entire 3D graph interface.

Separation of UI and 3D Rendering

The variant system applies only to the React UI layer. The 3D scene itself—handled by components like NodeCloud.tsx and EdgeLines—remains independent of these styling changes. Modifying the variant prop on a Button in GraphTab.tsx changes the control's appearance but does not trigger re-renders of the Three.js scene graph, ensuring performance remains optimized during UI customization.

Summary

• The 3D graph visualization UI uses React components stored in graph-ui/src/components/ui/ that rely on class-variance-authority for styling.
• Change appearance by passing a variant prop (e.g., "default", "outline") to components like Button or Badge.
• Extend variants by editing the CVA configuration objects inside button.tsx, badge.tsx, or checkbox.tsx.
• Implement global themes by creating a React Context that supplies variant values to nested components.
• UI styling changes are isolated from the 3D rendering logic, which lives in components like NodeCloud.tsx.

Frequently Asked Questions

Where are the UI components for the 3D graph visualization located?

All reusable UI components are located in the graph-ui/src/components/ui/ directory according to the source code structure. Key files include button.tsx, badge.tsx, and checkbox.tsx, which define the visual controls used in tabs like Project and Statistics.

How do I add a custom color variant to the Badge component?

To add a custom variant, modify the badgeVariants object in graph-ui/src/components/ui/badge.tsx by adding a new key to the variant property with your desired Tailwind CSS classes. After saving, you can reference this new variant by name (e.g., variant="success") anywhere you import the Badge component.

Will changing the UI variant affect the 3D graph rendering performance?

No, changing the variant prop on UI components only affects the React layer's CSS classes. The actual 3D scene managed by NodeCloud.tsx and related Three.js components operates independently, so UI style updates do not trigger expensive 3D re-renders.

Can I set a default variant for all buttons without editing each file individually?

Yes, you can create a React Context that provides default variant values to all children components, as demonstrated in the global themes section. Alternatively, you can modify the defaultVariants object within each component's CVA configuration in graph-ui/src/components/ui/ to change the fallback style for that component type throughout the application.

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