# How to Integrate Lum1104/Understand-Anything with Other Applications: Core Export and Embedding Guide

> Integrate Lum1104 Understand Anything with other apps by installing our core package. Export knowledge graphs or embed the React dashboard for custom queries and seamless integration.

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

---

**You can integrate Lum1104/Understand-Anything with other applications by installing the `@understand-anything/core` package, importing browser-safe sub-path exports like `@understand-anything/core/search`, and consuming the generated [`knowledge-graph.json`](https://github.com/Lum1104/Understand-Anything/blob/main/knowledge-graph.json) to power custom queries or embed the React dashboard in your own codebase.**

Lum1104/Understand-Anything is a Claude Code plugin that parses source trees with Tree-sitter and orchestrates LLM agents to produce a structured knowledge graph. If you want to integrate Lum1104/Understand-Anything with other applications, the project exposes typed sub-path exports, a reproducible JSON graph, and reusable React components that fit into any JavaScript or TypeScript project.

## How the Plugin Is Structured for Integration

### The Core Engine and Browser-Safe Exports

The core layer uses **Tree-sitter** to parse code, builds a deterministic import map, and runs LLM-powered agents to enrich the graph with summaries and architectural layers. According to the project's [`CLAUDE.md`](https://github.com/Lum1104/Understand-Anything/blob/main/CLAUDE.md), the core deliberately ships **browser-safe sub-path exports**—including `./search`, `./types`, and `./schema`—so that consuming apps do not pull in Node-only modules. This design lets the dashboard and any third-party web app import utilities directly without bundling the heavy analysis engine.

### Knowledge Graph Generation

Running the `/understand` command executes a multi-agent pipeline—`project-scanner`, `file-analyzer`, `architecture-analyzer`, `tour-builder`, and `graph-reviewer`—that outputs a reproducible JSON file at [`.understand-anything/knowledge-graph.json`](https://github.com/Lum1104/Understand-Anything/blob/main/.understand-anything/knowledge-graph.json). This graph captures every file, function, class, import, and LLM-generated annotation such as architectural layer, business domain, and plain-English description.

### The Dashboard UI Layer

The front end is a React and TypeScript application that renders an interactive force-directed graph by consuming the same JSON output. Because it imports only from the core’s browser-safe sub-path exports, the dashboard can be embedded in any existing React application. The simple export pattern used by the dashboard is demonstrated in [`understand-anything-plugin/src/understand-chat.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/understand-anything-plugin/src/understand-chat.ts).

## Step-by-Step Integration Flow

### 1. Install the Core Library

Add the package to your application via your preferred package manager:

```bash
pnpm add @understand-anything/core

# or

npm i @understand-anything/core

```

This dependency is listed in your app’s [`package.json`](https://github.com/Lum1104/Understand-Anything/blob/main/package.json) and provides the typed interfaces and search utilities.

### 2. Run the Analyzer to Produce [`knowledge-graph.json`](https://github.com/Lum1104/Understand-Anything/blob/main/knowledge-graph.json)

Execute the platform-specific install script to install the CLI, then run the analyzer. The README documents a one-line installer that works on any OS:

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

```

After installation, run the plugin to generate [`.understand-anything/knowledge-graph.json`](https://github.com/Lum1104/Understand-Anything/blob/main/.understand-anything/knowledge-graph.json). The CLI supports incremental updates via `/understand --auto-update`, which is useful for keeping the graph in sync with your codebase.

### 3. Load the Graph with TypeScript Types

Import the `KnowledgeGraph` type and the JSON output in any TypeScript or JavaScript file:

```ts
import type { KnowledgeGraph } from "@understand-anything/core";
import graph from "./.understand-anything/knowledge-graph.json";

```

This gives you full type safety over the generated structure without needing to run the analyzer inside your application process.

### 4. Query the Graph Using Sub-Path Exports

The `@understand-anything/core/search` sub-path export provides a ready-made helper for querying nodes. Because it is browser-safe, you can run this in a frontend or backend context:

```ts
import { search } from "@understand-anything/core/search";

const results = await search(graph, "auth");
console.log("Auth-related nodes:", results);

```

### 5. Embed the Dashboard in a React Application

The dashboard package re-exports a ready-to-use React component. Pass the loaded graph as a prop to render the interactive visualization:

```tsx
import Dashboard from "@understand-anything/dashboard";

export function App() {
  return (
    <div style={{ height: "100vh" }}>
      <Dashboard graph={graph} />
    </div>
  );
}

```

Because the component imports only browser-safe utilities from the core, it integrates cleanly into existing React codebases without polyfilling Node APIs.

### 6. Extend with Custom Agents and Builders

For deeper integrations, reuse the pure function builders that the plugin itself uses. Files such as [`understand-anything-plugin/src/understand-chat.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/understand-anything-plugin/src/understand-chat.ts), [`understand-anything-plugin/src/explain-builder.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/understand-anything-plugin/src/explain-builder.ts), and [`understand-anything-plugin/src/diff-analyzer.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/understand-anything-plugin/src/diff-analyzer.ts) expose small, stateless functions like `buildChatContext` and `buildExplainContext` that you can import directly:

```ts
import { buildChatPrompt } from "@understand-anything/plugin/src/understand-chat";
import { loadGraph } from "./graph-utils";

async function makePrompt(query: string) {
  const graph = await loadGraph(); // loads JSON from disk
  const prompt = buildChatPrompt(graph, query);
  console.log(prompt);
}

```

This lets you construct custom LLM prompts or analysis pipelines that operate on the same knowledge graph structure.

## Key Architectural Pieces That Enable Integration

**Tree-sitter and LLM hybrid** – Static analysis guarantees deterministic edges while the LLM enriches nodes with human-readable descriptions. This split enables reproducible builds and fast incremental updates.

**Multi-agent pipeline** – The `/understand` command orchestrates agents as pure functions that run in parallel or sequentially. You can call them individually from another app instead of running the full pipeline.

**Browser-safe sub-path exports** – As implemented in Lum1104/Understand-Anything, the core avoids pulling Node-only modules into the browser bundle. This is why the dashboard can import `@understand-anything/core/search` without bundling the heavy analysis code.

## Key Files for Integrations

| File | Why It Matters |
|------|----------------|
| [`README.md`](https://github.com/Lum1104/Understand-Anything/blob/main/README.md) | User-facing overview, quick-start, and installation instructions. |
| [`CLAUDE.md`](https://github.com/Lum1104/Understand-Anything/blob/main/CLAUDE.md) | Defines the plugin’s export policy and browser-safe sub-path export gotchas. |
| [`understand-anything-plugin/src/understand-chat.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/understand-anything-plugin/src/understand-chat.ts) | Core prompt builder and reusable export patterns. |
| [`understand-anything-plugin/src/context-builder.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/understand-anything-plugin/src/context-builder.ts) | Generates chat context from the knowledge graph. |
| [`understand-anything-plugin/src/explain-builder.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/understand-anything-plugin/src/explain-builder.ts) | Example builder that converts graph nodes into prose explanations. |
| [`understand-anything-plugin/src/diff-analyzer.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/understand-anything-plugin/src/diff-analyzer.ts) | Exposes diff-impact analysis as a pure function. |
| [`understand-anything-plugin/packages/core/src/analyzer/layer-detector.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/understand-anything-plugin/packages/core/src/analyzer/layer-detector.ts) | Detects architectural layers for custom integration logic. |
| [`understand-anything-plugin/.claude-plugin/plugin.json`](https://github.com/Lum1104/Understand-Anything/blob/main/understand-anything-plugin/.claude-plugin/plugin.json) | Manifest that lets Claude Code auto-discover the plugin. |
| `scripts/generate-large-graph.mjs` | Utility for generating synthetic large graphs to test dashboard performance in embedded scenarios. |

## Summary

- **Lum1104/Understand-Anything** exposes browser-safe sub-path exports so you can import utilities like `@understand-anything/core/search` without Node-only dependencies.
- The analyzer produces a typed, reproducible [`.understand-anything/knowledge-graph.json`](https://github.com/Lum1104/Understand-Anything/blob/main/.understand-anything/knowledge-graph.json) that any JS/TS application can load and query.
- You can embed the interactive React dashboard directly by importing the `Dashboard` component and passing the graph as a prop.
- Pure function builders in files like [`understand-chat.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/understand-chat.ts), [`explain-builder.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/explain-builder.ts), and [`diff-analyzer.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/diff-analyzer.ts) let you extend the multi-agent pipeline in your own codebase.

## Frequently Asked Questions

### Can I integrate Lum1104/Understand-Anything with a non-React application?

Yes. While the dashboard is a React component, the core library and the [`knowledge-graph.json`](https://github.com/Lum1104/Understand-Anything/blob/main/knowledge-graph.json) output are framework-agnostic. You can consume the graph in Vue, Svelte, Angular, or vanilla JavaScript by loading the JSON and using the sub-path exports such as `@understand-anything/core/search` and `@understand-anything/core/types`.

### What makes the `@understand-anything/core` exports safe for browser environments?

According to the project's [`CLAUDE.md`](https://github.com/Lum1104/Understand-Anything/blob/main/CLAUDE.md), the core is intentionally structured to avoid importing Node-only modules in the browser entry points. Only lightweight utilities are exposed through sub-path exports like `./search`, `./types`, and `./schema`, ensuring that frontend bundles remain small and free of server-side dependencies.

### How do I keep the knowledge graph synchronized with my codebase?

The analyzer supports incremental updates via the `/understand --auto-update` flag. You can run the CLI as a pre-build script or in a CI pipeline so that [`.understand-anything/knowledge-graph.json`](https://github.com/Lum1104/Understand-Anything/blob/main/.understand-anything/knowledge-graph.json) stays current without manual intervention.

### Which source files should I reference to build a custom agent?

Start with [`understand-anything-plugin/src/understand-chat.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/understand-anything-plugin/src/understand-chat.ts) for chat prompt patterns, [`understand-anything-plugin/src/explain-builder.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/understand-anything-plugin/src/explain-builder.ts) for turning graph nodes into prose, and [`understand-anything-plugin/src/diff-analyzer.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/understand-anything-plugin/src/diff-analyzer.ts) for diff-impact logic. Each file exports small, pure functions that are easy to compose into custom pipelines.