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

> Easily set up the Lum1104/Understand-Anything dashboard. Follow our complete install guide to generate your knowledge graph and view the interactive interface.

- Repository: [Yuxiang Lin/Understand-Anything](https://github.com/Lum1104/Understand-Anything)
- Tags: how-to-guide
- Published: 2026-06-07

---

**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`](https://github.com/Lum1104/Understand-Anything/blob/main/.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:

```bash
/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`](https://github.com/Lum1104/Understand-Anything/blob/main/install.sh) in the repository root:

```bash
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`](https://github.com/Lum1104/Understand-Anything/blob/main/.cursor-plugin/plugin.json), [`.copilot-plugin/plugin.json`](https://github.com/Lum1104/Understand-Anything/blob/main/.copilot-plugin/plugin.json), or the `copilot plugin install` command respectively. These commands are documented in the repository’s [`README.md`](https://github.com/Lum1104/Understand-Anything/blob/main/README.md) under the Quick Start section.

## Run the Analyzer

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

```bash
/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`](https://github.com/Lum1104/Understand-Anything/blob/main/.understand-anything/knowledge-graph.json). The pipeline logic is described in the "Under the Hood" section of the [`README.md`](https://github.com/Lum1104/Understand-Anything/blob/main/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`](https://github.com/Lum1104/Understand-Anything/blob/main/package.json):

```bash
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`](https://github.com/Lum1104/Understand-Anything/blob/main/pnpm-workspace.yaml). The entry point [`understand-anything-plugin/packages/dashboard/src/main.tsx`](https://github.com/Lum1104/Understand-Anything/blob/main/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:

```bash
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`](https://github.com/Lum1104/Understand-Anything/blob/main/understand-anything-plugin/packages/dashboard/src/App.tsx), the production build reads the graph from [`.understand-anything/knowledge-graph.json`](https://github.com/Lum1104/Understand-Anything/blob/main/.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:

```bash
/understand-dashboard

```

According to the repository source in [`understand-anything-plugin/skills/understand-dashboard/SKILL.md`](https://github.com/Lum1104/Understand-Anything/blob/main/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`](https://github.com/Lum1104/Understand-Anything/blob/main/KnowledgeGraphView.tsx) renders a force-directed layout of the structural graph.
- **Layer filters** — [`LayerLegend.tsx`](https://github.com/Lum1104/Understand-Anything/blob/main/LayerLegend.tsx) and [`FilterPanel.tsx`](https://github.com/Lum1104/Understand-Anything/blob/main/FilterPanel.tsx) let you toggle architectural layers such as API, Service, Data, UI, and Utility.
- **Code viewer** — Clicking a node opens [`CodeViewer.tsx`](https://github.com/Lum1104/Understand-Anything/blob/main/CodeViewer.tsx), which fetches file contents from the dev server’s [`/file-content.json`](https://github.com/Lum1104/Understand-Anything/blob/main//file-content.json) endpoint.
- **Guided tours** — Tours generated by the `TourBuilder` agent appear in [`LearnPanel.tsx`](https://github.com/Lum1104/Understand-Anything/blob/main/LearnPanel.tsx).
- **Domain view** — [`DomainGraphView.tsx`](https://github.com/Lum1104/Understand-Anything/blob/main/DomainGraphView.tsx) visualizes business-domain relationships produced by the `domain-analyzer` agent.

Global state management is handled by [`src/store.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/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:

```bash

# 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:

```bash
#!/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`](https://github.com/Lum1104/Understand-Anything/blob/main/./run-understand.sh) to perform the full workflow.

### CI Pipeline Integration

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

```yaml
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`](https://github.com/Lum1104/Understand-Anything/blob/main/install.sh) / `install.ps1` | Platform-agnostic installers that clone the repo and create symlinks |
| [`README.md`](https://github.com/Lum1104/Understand-Anything/blob/main/README.md) | User documentation covering installation, analysis, and dashboard startup |
| [`understand-anything-plugin/packages/dashboard/src/main.tsx`](https://github.com/Lum1104/Understand-Anything/blob/main/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`](https://github.com/Lum1104/Understand-Anything/blob/main/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`](https://github.com/Lum1104/Understand-Anything/blob/main/understand-anything-plugin/packages/dashboard/src/components/KnowledgeGraphView.tsx) | Renders the structural force-directed graph |
| [`understand-anything-plugin/packages/dashboard/src/components/DomainGraphView.tsx`](https://github.com/Lum1104/Understand-Anything/blob/main/understand-anything-plugin/packages/dashboard/src/components/DomainGraphView.tsx) | Renders the business-domain relationship graph |
| [`understand-anything-plugin/packages/dashboard/src/store.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/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`](https://github.com/Lum1104/Understand-Anything/blob/main/understand-anything-plugin/skills/understand-dashboard/SKILL.md) | Maps `/understand-dashboard` to the underlying Vite server |
| [`package.json`](https://github.com/Lum1104/Understand-Anything/blob/main/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`](https://github.com/Lum1104/Understand-Anything/blob/main/install.sh), or auto-discovery by Cursor and VS Code Copilot.
- The analyzer writes [`.understand-anything/knowledge-graph.json`](https://github.com/Lum1104/Understand-Anything/blob/main/.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`](https://github.com/Lum1104/Understand-Anything/blob/main/KnowledgeGraphView.tsx), [`DomainGraphView.tsx`](https://github.com/Lum1104/Understand-Anything/blob/main/DomainGraphView.tsx), and [`CodeViewer.tsx`](https://github.com/Lum1104/Understand-Anything/blob/main/CodeViewer.tsx), with state managed in [`src/store.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/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`](https://github.com/Lum1104/Understand-Anything/blob/main/.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`](https://github.com/Lum1104/Understand-Anything/blob/main/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.