How to Set Up the Lum1104/Understand-Anything Dashboard: Complete Install Guide

Set up the Lum1104/Understand-Anything dashboard by installing the plugin for your AI coding platform, running the /understand command to generate .understand-anything/knowledge-graph.json, and starting the Vite dev server with pnpm dev:dashboard to view the interface at http://localhost:5173.

The Lum1104/Understand-Anything repository provides a React and TypeScript dashboard that visualizes codebase knowledge graphs produced by its multi-agent analysis pipeline. To set up the Lum1104/Understand-Anything dashboard, you need to install the plugin, generate the graph data, and launch the frontend development server. The entire workflow is defined in the open-source codebase and can be run locally or integrated into CI pipelines.

Install the Plugin

The first step is adding the plugin to your AI coding platform. The repository supports several installation methods depending on your environment.

For Claude Code, register the plugin through the marketplace:

/plugin marketplace add Lum1104/Understand-Anything
/plugin install understand-anything

For a one-line installation on macOS or Linux, run the installer script located at install.sh in the repository root:

curl -fsSL https://raw.githubusercontent.com/Lum1104/Understand-Anything/main/install.sh | bash

This clones the repo into ~/.understand-anything/repo and creates the necessary symlinks. A PowerShell equivalent is available for Windows users in install.ps1.

If you use Cursor, VS Code + Copilot, or the Copilot CLI, auto-discovery or manual plugin installation is supported via .cursor-plugin/plugin.json, .copilot-plugin/plugin.json, or the copilot plugin install command respectively. These commands are documented in the repository’s README.md under the Quick Start section.

Run the Analyzer

After installation, invoke the /understand skill to scan your project:

/understand

This executes the multi-agent pipeline—including the project-scanner, file-analyzer, architecture-analyzer, tour-builder, and graph-reviewer agents—and writes the output to .understand-anything/knowledge-graph.json. The pipeline logic is described in the "Under the Hood" section of the README.md. You must generate this file before the dashboard can render any data.

Start the Lum1104/Understand-Anything Dashboard

The dashboard is a Vite-powered React application located in the understand-anything-plugin/packages/dashboard workspace.

Development Server

For local development with hot reload, run the root script defined in package.json:

pnpm dev:dashboard

This starts the Vite dev server and makes the dashboard available at http://localhost:5173 by default. The command targets the dashboard workspace defined in pnpm-workspace.yaml. The entry point understand-anything-plugin/packages/dashboard/src/main.tsx mounts the React application and registers the HTTP endpoint that serves the knowledge graph, as implemented in the Lum1104/Understand-Anything source code.

Production Build

To create a static bundle for deployment:

pnpm --filter @understand-anything/dashboard build

This outputs a production bundle to the dist/ directory inside the dashboard package. You can serve this folder with any static file server. According to the source code in understand-anything-plugin/packages/dashboard/src/App.tsx, the production build reads the graph from .understand-anything/knowledge-graph.json at runtime.

Direct Skill Invocation

You can also start the dashboard without manually managing the server by invoking the bundled skill:

/understand-dashboard

According to the repository source in understand-anything-plugin/skills/understand-dashboard/SKILL.md, this command resolves the correct platform binary and launches the same Vite dev server automatically.

Explore the Dashboard Interface

Once the server is running, the React UI provides several visualization tools. The main features are implemented in the component directory understand-anything-plugin/packages/dashboard/src/components/:

• Graph view — KnowledgeGraphView.tsx renders a force-directed layout of the structural graph.
• Layer filters — LayerLegend.tsx and FilterPanel.tsx let you toggle architectural layers such as API, Service, Data, UI, and Utility.
• Code viewer — Clicking a node opens CodeViewer.tsx, which fetches file contents from the dev server’s /file-content.json endpoint.
• Guided tours — Tours generated by the TourBuilder agent appear in LearnPanel.tsx.
• Domain view — DomainGraphView.tsx visualizes business-domain relationships produced by the domain-analyzer agent.

Global state management is handled by src/store.ts in the dashboard package, which uses a Zustand store to hold the graph data, UI state, and active filters.

Complete Setup Examples

Full Setup from a Fresh Clone

If you are starting from zero, run the following commands in order:

# Clone the repository

git clone https://github.com/Lum1104/Understand-Anything.git
cd Understand-Anything

# Install dependencies (requires pnpm >= 10)

pnpm install

# Generate the knowledge graph

/understand

# Start the dashboard dev server

pnpm dev:dashboard

Open http://localhost:5173 in your browser to view the dashboard.

Custom Startup Script

For repeated use on Unix systems, create an executable script that analyzes the current repository and launches the browser automatically:

#!/usr/bin/env bash

# run-understand.sh

set -e
cd "$(dirname "$0")"

/understand
pnpm dev:dashboard &
sleep 2
xdg-open http://localhost:5173

Make it executable with chmod +x run-understand.sh and run ./run-understand.sh to perform the full workflow.

CI Pipeline Integration

You can build the dashboard in GitHub Actions to produce a deployable artifact:

name: Dashboard Build
on:
  push:
    branches: [main]
jobs:
  build-dashboard:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '22'
          cache: 'pnpm'
      - run: pnpm install
      - run: /understand
      - run: pnpm --filter @understand-anything/dashboard build
      - uses: actions/upload-artifact@v3
        with:
          name: dashboard-dist
          path: understand-anything-plugin/packages/dashboard/dist

The resulting dist folder can be deployed to GitHub Pages, Netlify, or any static host.

Key Source Files

File	Role
install.sh / install.ps1	Platform-agnostic installers that clone the repo and create symlinks
README.md	User documentation covering installation, analysis, and dashboard startup
understand-anything-plugin/packages/dashboard/src/main.tsx	Boots the React app and registers the graph endpoint
understand-anything-plugin/packages/dashboard/src/App.tsx	Root component that loads the graph and configures routing
understand-anything-plugin/packages/dashboard/src/components/KnowledgeGraphView.tsx	Renders the structural force-directed graph
understand-anything-plugin/packages/dashboard/src/components/DomainGraphView.tsx	Renders the business-domain relationship graph
understand-anything-plugin/packages/dashboard/src/store.ts	Zustand global store for graph data and UI state
understand-anything-plugin/skills/understand-dashboard/SKILL.md	Maps /understand-dashboard to the underlying Vite server
package.json	Defines the dev:dashboard script that runs the Vite dev server

Summary

• The Lum1104/Understand-Anything dashboard is a React and TypeScript application that visualizes output from the /understand pipeline.
• Installation options include native Claude Code marketplace registration, a curl one-liner via install.sh, or auto-discovery by Cursor and VS Code Copilot.
• The analyzer writes .understand-anything/knowledge-graph.json, which the dashboard reads on startup.
• Use pnpm dev:dashboard for local development, pnpm --filter @understand-anything/dashboard build for static deployments, or /understand-dashboard for direct skill invocation.
• Core visualization logic lives in components such as KnowledgeGraphView.tsx, DomainGraphView.tsx, and CodeViewer.tsx, with state managed in src/store.ts.

Frequently Asked Questions

What prerequisites are needed to run the Understand-Anything dashboard?

You need pnpm version 10 or later, a compatible AI coding platform or CLI to run the /understand skill, and a modern web browser. The dashboard itself is built with Vite and React, so Node.js 22 is recommended for building from source.

How does the dashboard access the knowledge graph data?

The dashboard loads the graph from .understand-anything/knowledge-graph.json in the project root. In development mode, the Vite dev server registered in understand-anything-plugin/packages/dashboard/src/main.tsx exposes an HTTP endpoint that serves this file to the React frontend.

Can I deploy the Understand-Anything dashboard to a static host?

Yes. Running pnpm --filter @understand-anything/dashboard build produces a static bundle in the dist/ directory. Because the production build reads the graph JSON at runtime, you can serve the dist folder from any static host including GitHub Pages or Netlify.

What is the default port for the dashboard dev server?

The development server started by pnpm dev:dashboard listens on http://localhost:5173 by default. This is configured in the Vite setup within the dashboard package workspace.

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