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

> Learn how to add support for new frameworks in Lum1104/Understand-Anything. This guide walks you through creating FrameworkConfig objects, registering them, and rebuilding the core package.

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

---

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

```typescript
// 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`](https://github.com/Lum1104/Understand-Anything/blob/main/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`](https://github.com/Lum1104/Understand-Anything/blob/main/packages/core/src/languages/frameworks/index.ts) by adding it to the `builtinFrameworkConfigs` array and the named exports list.

```typescript
// 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`:

```markdown
<!-- 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/`:

```typescript
// 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:

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

```

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

```typescript
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`](https://github.com/Lum1104/Understand-Anything/blob/main/packages/core/src/languages/frameworks/index.ts)** – Aggregates all built-in configs
- **[`packages/core/src/languages/framework-registry.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/packages/core/src/languages/framework-registry.ts)** – Core registry class that performs detection
- **[`packages/core/src/types.ts`](https://github.com/Lum1104/Understand-Anything/blob/main/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`](https://github.com/Lum1104/Understand-Anything/blob/main/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`](https://github.com/Lum1104/Understand-Anything/blob/main/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`](https://github.com/Lum1104/Understand-Anything/blob/main/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`](https://github.com/Lum1104/Understand-Anything/blob/main/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.