# How to Integrate Egonex-AI Understand Anything with Other Tools

> Learn how to integrate Egonex-AI Understand Anything with other tools. Import the search engine, embed the React dashboard, or trigger the multi-agent pipeline via CLI.

- Repository: [Egonex/Understand-Anything](https://github.com/Egonex-AI/Understand-Anything)
- Tags: how-to-guide
- Published: 2026-06-26

---

**TLDR:** Understand Anything exposes browser-safe sub-path entry points from its pnpm-workspace monorepo, allowing you to import the core search engine into applications, embed the React dashboard in custom UIs, or trigger the multi-agent pipeline via CLI from automation tools.

The Egonex-AI Understand Anything repository is structured as a **pnpm-workspace monorepo** that publishes reusable packages under the `@understand-anything` scope. The core analysis engine and dashboard UI are separate packages that export **browser-safe sub-path entry points**—such as `@understand-anything/core/search` and `@understand-anything/core/types`—enabling integration into any JavaScript or TypeScript project without pulling in Node-only modules. This architecture allows you to query knowledge graphs programmatically, embed interactive visualizations, or orchestrate analysis through the CLI wrapper.

## Install the Core Packages

First, add the published packages to your project dependencies. The monorepo distributes `@understand-anything/core` for the analysis engine and `@understand-anything/dashboard` for the React-based visualization interface.

```json
{
  "dependencies": {
    "@understand-anything/core": "^1.0.0",
    "@understand-anything/dashboard": "^1.0.0"
  }
}

```

After installation, you can import specific sub-modules to avoid bundling unnecessary Node-only code.

## Query Knowledge Graphs Programmatically

The `@understand-anything/core` package exposes a `SearchEngine` class from the `search` sub-path. Located in `understand-anything-plugin/packages/core/src/search`, this class accepts a `KnowledgeGraph` instance and executes semantic queries against the graph data.

### Import the Search Engine in Node.js

To perform programmatic searches, import the `SearchEngine` and corresponding types from `@understand-anything/core/types` (defined in `understand-anything-plugin/packages/core/src/types`). The following example reads a generated knowledge graph from disk and queries for authentication-related nodes:

```typescript
import { SearchEngine } from "@understand-anything/core/search";
import type { KnowledgeGraph } from "@understand-anything/core/types";
import { readFileSync } from "fs";

async function queryGraph(graph: KnowledgeGraph, term: string) {
  const engine = new SearchEngine(graph);
  const results = await engine.search(term);
  console.log(results);
}

// Load graph from the .understand-anything/ output directory
const graph = JSON.parse(readFileSync("./.understand-anything/knowledge-graph.json", "utf-8"));
queryGraph(graph, "auth");

```

This approach lets you build custom reporting tools, automated documentation generators, or backend services that consume the structured knowledge output.

## Embed the Dashboard in React Applications

The `@understand-anything/dashboard` package provides a pre-built React component that renders the interactive knowledge graph visualization. The dashboard source lives in `understand-anything-plugin/packages/dashboard/src` and is configured via Vite (see [`vite.config.ts`](https://github.com/Egonex-AI/Understand-Anything/blob/main/vite.config.ts) in the same directory).

To embed the dashboard in your own application, import the component and configure the `graphUrl` prop to point to your generated [`knowledge-graph.json`](https://github.com/Egonex-AI/Understand-Anything/blob/main/knowledge-graph.json) endpoint:

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

function App() {
  return (
    <Dashboard
      graphUrl="/.understand-anything/knowledge-graph.json"
      accessToken={process.env.UNDERSTAND_TOKEN}
    />
  );
}

```

The dashboard fetches the graph JSON from the specified URL, making it compatible with static file servers, CDN-hosted assets, or custom API endpoints.

## Orchestrate Analysis via the CLI Wrapper

For automation scenarios, the repository includes a CLI wrapper defined in [`understand-anything-plugin/src/index.ts`](https://github.com/Egonex-AI/Understand-Anything/blob/main/understand-anything-plugin/src/index.ts). This entry point registers the `/understand` command for LLM-driven tools like Claude Code, Cursor, Copilot, and Gemini CLI.

Running the CLI triggers the multi-agent pipeline, writes the generated knowledge graph to the `.understand-anything/` folder, and starts the dashboard server. You can invoke this from CI pipelines, Makefiles, or VS Code tasks using `pnpm` workspace filters:

```bash

# Compile dependencies before running analysis

pnpm --filter @understand-anything/core build
pnpm --filter @understand-anything/skill build

# Execute the understand command

pnpm run understand --full

```

The [`pnpm-workspace.yaml`](https://github.com/Egonex-AI/Understand-Anything/blob/main/pnpm-workspace.yaml) file defines the workspace structure, ensuring that cross-package dependencies resolve correctly during the build process.

## Generate Test Data for Performance Validation

When integrating with other tools, you may want to validate performance with large knowledge graphs. The repository includes `scripts/generate-large-graph.mjs`, which creates synthetic graph data for stress testing your integration points.

## Summary

- **Install scoped packages**: Add `@understand-anything/core` and `@understand-anything/dashboard` to leverage the search engine and UI components.
- **Import sub-paths**: Use entry points like `@understand-anything/core/search` to import only the functionality you need without Node-only dependencies.
- **Embed the dashboard**: Import the React component from `@understand-anything/dashboard` and configure the `graphUrl` prop to visualize your data.
- **Automate via CLI**: Trigger the multi-agent pipeline using the CLI wrapper in [`understand-anything-plugin/src/index.ts`](https://github.com/Egonex-AI/Understand-Anything/blob/main/understand-anything-plugin/src/index.ts) with `pnpm` workspace commands.
- **Leverage workspace scripts**: Use `pnpm --filter` commands to build specific packages and manage dependencies in the monorepo.

## Frequently Asked Questions

### Can I use the core library without installing the dashboard?

Yes. The `@understand-anything/core` package exports browser-safe sub-paths such as `search` and `types`, allowing you to import only the analysis engine in Node.js or web applications without pulling in the React dashboard dependencies.

### How does the CLI integrate with LLM coding tools?

The CLI wrapper in [`understand-anything-plugin/src/index.ts`](https://github.com/Egonex-AI/Understand-Anything/blob/main/understand-anything-plugin/src/index.ts) registers the `/understand` command for Claude Code, Cursor, Copilot, Gemini CLI, and similar tools. When invoked, it executes the multi-agent pipeline and outputs the knowledge graph to the `.understand-anything/` directory.

### Is the dashboard compatible with custom authentication systems?

Yes. The dashboard component accepts an `accessToken` prop and configurable `graphUrl`, allowing you to point it to protected endpoints or add custom headers via your React application's fetch configuration.

### What package manager is required for building the workspace?

The repository uses **pnpm** as its package manager. The [`pnpm-workspace.yaml`](https://github.com/Egonex-AI/Understand-Anything/blob/main/pnpm-workspace.yaml) file defines the monorepo structure, and you must use `pnpm --filter` commands to build individual packages or run the CLI from the source.