How to Add Support for New Frameworks in Understand-Anything: A Complete Guide

Adding a new framework to Understand-Anything requires creating a FrameworkConfig object in the frameworks directory, exporting it in the index.ts registry, and rebuilding the core package.

Extending Understand-Anything to recognize additional web frameworks involves registering a new configuration in the core analysis engine. This process allows the system to automatically detect framework-specific patterns, generate accurate knowledge graphs, and provide contextual LLM prompts. By following the standardized registry pattern in packages/core/src/languages/frameworks, you can add support for any framework without modifying the underlying detection logic.

Step 1: Create a Framework Configuration File

Create a new TypeScript file in packages/core/src/languages/frameworks/ that defines a FrameworkConfig object. This configuration specifies detection keywords, manifest files, entry points, and layer hints that help the analyzer identify and categorize framework components.

Example for NestJS:

// packages/core/src/languages/frameworks/nestjs.ts
import type { FrameworkConfig } from "../types.js";

export const nestjsConfig = {
  id: "nestjs",
  displayName: "NestJS",
  languages: ["typescript", "javascript"],
  detectionKeywords: ["@nestjs/core", "@nestjs/common", "nestjs"],
  manifestFiles: ["package.json"],
  promptSnippetPath: "./frameworks/nestjs.md",
  entryPoints: [
    "src/main.ts",
    "src/app.module.ts",
    "src/main.js",
    "src/app.module.js",
  ],
  layerHints: {
    controllers: "service",
    providers: "service",
    modules: "utility",
    interceptors: "middleware",
  },
} satisfies FrameworkConfig;

The satisfies FrameworkConfig operator ensures type safety against the schema defined in packages/core/src/types.ts.

Step 2: Register the Framework in the Built-in Registry

Export the new configuration in packages/core/src/languages/frameworks/index.ts by adding it to the builtinFrameworkConfigs array and the named exports list.

// packages/core/src/languages/frameworks/index.ts
import { nestjsConfig } from "./nestjs.js";

export const builtinFrameworkConfigs: FrameworkConfig[] = [
  djangoConfig,
  fastapiConfig,
  flaskConfig,
  reactConfig,
  nextjsConfig,
  expressConfig,
  vueConfig,
  springConfig,
  railsConfig,
  ginConfig,
  nestjsConfig,
];

export {
  djangoConfig,
  fastapiConfig,
  flaskConfig,
  reactConfig,
  nextjsConfig,
  expressConfig,
  vueConfig,
  springConfig,
  railsConfig,
  ginConfig,
  nestjsConfig,
};

This registration makes the framework available to the FrameworkRegistry class used by the analyzer.

Step 3: Add Optional Prompt Snippets and UI Localization

LLM Prompt Snippets

Create a markdown file containing context about the framework for LLM consumption. Place it in the frameworks directory as specified in your promptSnippetPath:

<!-- packages/core/src/languages/frameworks/frameworks/nestjs.md -->
NestJS is a progressive Node.js framework for building efficient, reliable and scalable server-side applications. It uses TypeScript by default, follows the MVC pattern, and provides a powerful dependency-injection container.

Dashboard UI Strings

To display the framework name in the dashboard, add entries to the locale files in packages/dashboard/src/locales/:

// packages/dashboard/src/locales/en.ts
export const en = {
  // ... other translations
  frameworks: "Frameworks",
  nestjs: "NestJS",
};

Step 4: Build and Test the Integration

Rebuild the core package to compile the new framework configuration:

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

Verify the integration by writing a test that uses the FrameworkRegistry:

import { FrameworkRegistry } from "../languages/framework-registry.js";
import { nestjsConfig } from "../languages/frameworks/nestjs.js";

test("detects NestJS from package.json", () => {
  const registry = FrameworkRegistry.createDefault();
  const manifests = {
    "package.json": JSON.stringify({
      dependencies: { "@nestjs/core": "^9.0.0" },
    }),
  };
  const detected = registry.detectFrameworks(manifests);
  expect(detected.map(c => c.id)).toContain("nestjs");
});

Run the test suite with pnpm --filter @understand-anything/core test to confirm detection works correctly.

Key Files and Architecture

Understanding these core files helps when extending the system:

• packages/core/src/languages/frameworks/*.ts – Individual framework configurations
• packages/core/src/languages/frameworks/index.ts – Aggregates all built-in configs
• packages/core/src/languages/framework-registry.ts – Core registry class that performs detection
• packages/core/src/types.ts – Defines the FrameworkConfig schema (Zod validation)
• packages/dashboard/src/locales/*.ts – UI translation tables

Summary

• Create a FrameworkConfig object in packages/core/src/languages/frameworks/ with detection keywords and entry points
• Export the configuration in packages/core/src/languages/frameworks/index.ts by adding it to builtinFrameworkConfigs
• Optionally add LLM prompt snippets and dashboard localization strings
• Rebuild the packages using pnpm and verify with unit tests
• The framework registry automatically handles detection without requiring changes to the core engine

Frequently Asked Questions

What is the FrameworkConfig schema?

The FrameworkConfig schema is defined in packages/core/src/types.ts using Zod validation. It requires an id, displayName, languages array, detectionKeywords, manifestFiles, and optional fields like entryPoints and layerHints that guide the knowledge graph construction.

Do I need to modify the core detection engine?

No. The FrameworkRegistry in packages/core/src/languages/framework-registry.ts automatically consumes the builtinFrameworkConfigs array. You only need to add your configuration file and export it in the index.

How does the framework detection work?

The registry scans project manifest files (like package.json) for detection keywords. When keywords match, the framework is added to the detected set. The system then uses entryPoints and layerHints to analyze the project structure and generate the knowledge graph.

Can I add frameworks for languages other than TypeScript?

Yes. The languages field in FrameworkConfig accepts any language identifier. The architecture supports Python, Java, Ruby, Go, and others, as demonstrated by existing configs for Django, Spring, Rails, and Gin in the packages/core/src/languages/frameworks/ directory.

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