# How to Extend the Functionality of Understand Anything: Core, Dashboard, and CLI Hooks > Learn how to extend the functionality of Understand Anything using LanguageExtractor, PluginRegistry, GraphBuilder, and React panels. Customize your experience today! - Repository: [Yuxiang Lin/Understand-Anything](https://github.com/Lum1104/Understand-Anything) - Tags: how-to-guide - Published: 2026-06-05 --- **You can extend the functionality of Understand Anything by implementing the `LanguageExtractor` interface for new languages, registering custom plugins via the `PluginRegistry`, adding specialized nodes through `GraphBuilder`, and wiring new React panels into the Zustand-based dashboard.** According to the Lum1104/Understand-Anything source code, the project is a modular, TypeScript-first monorepo that separates static analysis, LLM-driven prompts, and the web dashboard into distinct packages. To extend the functionality of Understand Anything, you work through three well-defined surfaces: the `@understand-anything/core` library, the `@understand-anything/dashboard` React application, and the top-level CLI. Each surface exposes typed interfaces and registration points that let you add languages, graph concepts, UI panels, and automation skills without forking the codebase. ## Extend the Core Analysis Engine You can extend the functionality of Understand Anything at three levels within the core package: language extractors, the plugin registry, and the graph builder. The core is organized around tree-sitter parsing, language-specific extractors, and a centralized `GraphBuilder` that consumes extractor output. ### Add Language Support with Custom Extractors The fastest way to extend the functionality of Understand Anything is to add a new **language extractor**. The core ships with a reference implementation in [`packages/core/src/plugins/extractors/typescript-extractor.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/packages/core/src/plugins/extractors/typescript-extractor.ts), which demonstrates how to implement the `LanguageExtractor` interface. An extractor receives a tree-sitter AST and returns two structures: a `StructuralAnalysis` object (functions, classes, imports, exports) and a `CallGraphEntry[]` array. To register a new extractor: 1. Create a class that implements `LanguageExtractor` in `packages/core/src/plugins/extractors/`. 2. Export it from [`packages/core/src/plugins/extractors/index.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/packages/core/src/plugins/extractors/index.ts). 3. Append an instance to the `builtinExtractors` array so it is auto-loaded at runtime. Once registered, `GraphBuilder.addFileWithAnalysis` automatically consumes the output and creates the corresponding nodes and edges. ```ts // src/plugins/extractors/python-extractor.ts import type { StructuralAnalysis, CallGraphEntry } from "../../types.js"; import type { LanguageExtractor, TreeSitterNode } from "./types.js"; export class PythonExtractor implements LanguageExtractor { readonly languageIds = ["python"]; // Minimal example: only extracts function definitions. extractStructure(root: TreeSitterNode): StructuralAnalysis { const functions: StructuralAnalysis["functions"] = []; const walk = (node: TreeSitterNode) => { if (node.type === "function_definition") { const nameNode = node.childForFieldName("name"); if (nameNode) { functions.push({ name: nameNode.text, lineRange: [ node.startPosition.row + 1, node.endPosition.row + 1, ], params: [], // Omitted for brevity returnType: undefined, }); } } for (let i = 0; i < node.childCount; i++) { const child = node.child(i); if (child) walk(child); } }; walk(root); return { functions, classes: [], imports: [], exports: [] }; } // Call-graph extraction can be a no-op if not needed. extractCallGraph(_: TreeSitterNode): CallGraphEntry[] { return []; } } ``` Export the class and add it to `builtinExtractors`: ```ts // src/plugins/extractors/index.ts export { PythonExtractor } from "./python-extractor.js"; export const builtinExtractors = [ // existing extractors … new PythonExtractor(), ]; ``` After registration, the core recognizes `.py` files and the graph builder instantiates function nodes automatically. ### Register Plugins Through the PluginRegistry All extensions are discovered through the `PluginRegistry` defined in [`packages/core/src/plugins/registry.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/packages/core/src/plugins/registry.ts). If you need dynamic loading instead of static bundling, extend the `discoverPlugins` strategy in [`plugins/discovery.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/plugins/discovery.ts) and point it at a JSON config file. The registry instantiates any extractor, parser, or analyzer that conforms to the expected interface at runtime. ### Customize the Knowledge Graph with GraphBuilder `GraphBuilder`, located in [`packages/core/src/analyzer/graph-builder.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/packages/core/src/analyzer/graph-builder.ts), assembles the knowledge graph. It tracks unique identifiers in internal `nodeIds` and `edgeKeys` sets to prevent duplicates and maintain referential integrity. To inject custom node types—such as feature flags or configuration artifacts—you can call `addNonCodeFile`: ```ts builder.addNonCodeFile(filePath, { nodeType: "featureFlag", summary: "Feature flag toggles login flow", tags: ["feature", "login"], complexity: "simple", }); ``` For deeper integration, add a dedicated helper method inside `GraphBuilder` that manages its own `nodeIds` and `edgeKeys` bookkeeping. This keeps graph traversal consistent and ensures that downstream dashboard visualizations receive connected, deduplicated data. ### Add LLM Prompt Builders for New Analysis Types The analyzer sub-modules expose typed prompt builders for chat, diff, explain, and onboarding tours. Each builder follows the pattern established in files like [`src/understand-chat.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/src/understand-chat.ts) and [`src/diff-analyzer.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/src/diff-analyzer.ts), exporting a `build…Context` function that returns a typed context object. To add a new kind of LLM analysis: 1. Copy an existing prompt builder and rename its `build…Context` function. 2. Adjust the prompt template and parser logic for your use case. 3. Expose the new function from [`packages/core/src/index.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/packages/core/src/index.ts) so downstream consumers can import it. ## Extend the Dashboard UI The browser-based dashboard in `@understand-anything/dashboard` renders the knowledge graph with React and React-Flow. It loads serialized graph data from [`/file-content.json`](https://github.com/Lum1104/Understand-Anything/blob/main//file-content.json) and manages all UI state through a Zustand store in [`packages/dashboard/src/store.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/packages/dashboard/src/store.ts). ### Add New Visual Panels in React To extend the functionality of Understand Anything with a custom visualization, you wire a standard React component into [`packages/dashboard/src/components/Sidebar.tsx`](https://github.com/Lum1104/Understand-Anything/blob/main/packages/dashboard/src/components/Sidebar.tsx). Because the dashboard already loads the knowledge graph via [`/file-content.json`](https://github.com/Lum1104/Understand-Anything/blob/main//file-content.json), any custom node type you added in the core appears automatically. You can visualize it with the existing React-Flow layout utilities in [`utils/layout.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/utils/layout.ts). To add a new panel: 1. Create a component file in `packages/dashboard/src/components/`. 2. Add any required state slices and selectors to [`packages/dashboard/src/store.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/packages/dashboard/src/store.ts). 3. Map the component to a tab key in [`packages/dashboard/src/components/Sidebar.tsx`](https://github.com/Lum1104/Understand-Anything/blob/main/packages/dashboard/src/components/Sidebar.tsx). Here is a complete example that adds a **Feature Flags** panel: ```tsx // packages/dashboard/src/components/FeatureFlagPanel.tsx import { useFeatureFlags } from "../store.ts"; export const FeatureFlagPanel = () => { const flags = useFeatureFlags(); return (

Feature Flags

); }; ``` Add the corresponding Zustand slice and selector: ```ts // packages/dashboard/src/store.ts import { create } from "zustand"; type FeatureFlag = { id: string; name: string; enabled: boolean }; interface DashboardState { featureFlags: FeatureFlag[]; setFeatureFlags: (flags: FeatureFlag[]) => void; // existing state … } export const useDashboard = create(set => ({ featureFlags: [], setFeatureFlags: flags => set({ featureFlags: flags }), // … })); export const useFeatureFlags = () => useDashboard(state => state.featureFlags); ``` Finally, register the panel in the sidebar: ```tsx // packages/dashboard/src/components/Sidebar.tsx import { FeatureFlagPanel } from "./FeatureFlagPanel.tsx"; const panels = { // existing panels … featureFlags: , }; ``` ### Maintain Consistent Interactions with Reusable Hooks The dashboard contains reusable hooks for keyboard shortcuts and responsive detection. Before adding raw event listeners, extend [`useKeyboardShortcuts.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/useKeyboardShortcuts.ts) or [`useIsMobile.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/useIsMobile.ts). This preserves consistent UX across desktop and mobile devices and prevents state-drifting bugs. ## Extend the CLI with New Skills Adding a new skill is the fastest way to extend the functionality of Understand Anything from the command line. The top-level CLI consumes the core API to drive analysis pipelines. Adding a new skill involves three steps: 1. Add a new entry point in the `skills/` folder. 2. Re-export the skill from [`src/index.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/src/index.ts). 3. Update [`package.json`](https://github.com/Lum1104/Understand-Anything/blob/main/package.json) with a new `"bin"` field if you want a dedicated command. Because the core is strict-type-checked, all new skill functions must conform to the exported types defined in [`packages/core/src/types.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/packages/core/src/types.ts). ```ts // skills/understand-security/index.ts import { GraphBuilder } from "@understand-anything/core"; import { analyzeSecurity } from "./security-analyzer.ts"; export async function runSecuritySkill(projectRoot: string) { const builder = new GraphBuilder("my‑project", "HEAD"); // ...load files, run extractors… const graph = builder.build(); const findings = analyzeSecurity(graph); console.log("Security findings:", findings); } ``` Expose the skill in the entry point: ```ts // src/index.ts export { runSecuritySkill } from "../../skills/understand-security/index.js"; ``` Users can now invoke the skill from the CLI. If you add a `bin` script in [`package.json`](https://github.com/Lum1104/Understand-Anything/blob/main/package.json), the command becomes available globally. ## Summary - Implement the `LanguageExtractor` interface and register the class in [`packages/core/src/plugins/extractors/index.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/packages/core/src/plugins/extractors/index.ts) to support new programming languages. - Use `GraphBuilder.addNonCodeFile` or add dedicated methods in [`packages/core/src/analyzer/graph-builder.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/packages/core/src/analyzer/graph-builder.ts) to introduce new node and edge types. - Register dynamic plugins through the `PluginRegistry` in [`packages/core/src/plugins/registry.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/packages/core/src/plugins/registry.ts) or by implementing custom discovery strategies in [`plugins/discovery.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/plugins/discovery.ts). - Export new LLM prompt builders from [`packages/core/src/index.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/packages/core/src/index.ts) after modeling them on existing `build…Context` functions. - Wire new React panels into [`packages/dashboard/src/components/Sidebar.tsx`](https://github.com/Lum1104/Understand-Anything/blob/main/packages/dashboard/src/components/Sidebar.tsx) and add selectors to [`packages/dashboard/src/store.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/packages/dashboard/src/store.ts). - Add CLI skills under `skills/` and re-export them from [`src/index.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/src/index.ts), updating [`package.json`](https://github.com/Lum1104/Understand-Anything/blob/main/package.json) if a dedicated command is required. ## Frequently Asked Questions ### What interface must I implement to add a new language to Understand Anything? You must implement the `LanguageExtractor` interface. This requires an `extractStructure` method that returns `StructuralAnalysis` and an `extractCallGraph` method that returns `CallGraphEntry[]`. Place the implementation in `packages/core/src/plugins/extractors/`, export it from [`index.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/index.ts), and add an instance to `builtinExtractors`. ### How do I make custom graph nodes appear in the dashboard? Any node type you create in the core—through `GraphBuilder` methods like `addNonCodeFile`—is serialized into [`/file-content.json`](https://github.com/Lum1104/Understand-Anything/blob/main//file-content.json) and loaded by the dashboard automatically. To visualize it, add a React component that selects the relevant nodes from the Zustand store and register the component in [`packages/dashboard/src/components/Sidebar.tsx`](https://github.com/Lum1104/Understand-Anything/blob/main/packages/dashboard/src/components/Sidebar.tsx). ### Can I add a new CLI command without modifying the core package? Yes. CLI skills live in the top-level `skills/` directory and consume the public API exported from `@understand-anything/core`. You only need to add your skill logic, re-export the entry point from [`src/index.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/src/index.ts), and optionally define a `bin` script in [`package.json`](https://github.com/Lum1104/Understand-Anything/blob/main/package.json) to expose a dedicated command. ### Where should I register a new dashboard panel so it appears in the sidebar? Register the panel in [`packages/dashboard/src/components/Sidebar.tsx`](https://github.com/Lum1104/Understand-Anything/blob/main/packages/dashboard/src/components/Sidebar.tsx) by importing your component and adding it to the tab map object. If the panel needs state, define the selector and actions in [`packages/dashboard/src/store.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/packages/dashboard/src/store.ts) first.