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

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 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, 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. 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.

Step-by-Step Integration Flow

1. Install the Core Library

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

pnpm add @understand-anything/core

# or

npm i @understand-anything/core

This dependency is listed in your app’s package.json and provides the typed interfaces and search utilities.

2. Run the Analyzer to Produce 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:

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

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:

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:

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, understand-anything-plugin/src/explain-builder.ts, and understand-anything-plugin/src/diff-analyzer.ts expose small, stateless functions like buildChatContext and buildExplainContext that you can import directly:

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	User-facing overview, quick-start, and installation instructions.
CLAUDE.md	Defines the plugin’s export policy and browser-safe sub-path export gotchas.
understand-anything-plugin/src/understand-chat.ts	Core prompt builder and reusable export patterns.
understand-anything-plugin/src/context-builder.ts	Generates chat context from the knowledge graph.
understand-anything-plugin/src/explain-builder.ts	Example builder that converts graph nodes into prose explanations.
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	Detects architectural layers for custom integration logic.
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 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, explain-builder.ts, and 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 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, 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 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 for chat prompt patterns, understand-anything-plugin/src/explain-builder.ts for turning graph nodes into prose, and 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.

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