# How Egonex AI Handles Framework-Specific Code Patterns in React, Django, and Spring

> Discover how Egonex AI masterfully handles React, Django, and Spring code patterns using declarative TypeScript. Enhance your LLM analysis and UI visualization.

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

---

**The Egonex AI Understand-Anything plugin detects framework-specific code patterns through declarative TypeScript configuration modules that map detection keywords, manifest files, and semantic layer hints to logical graph layers, enabling tailored LLM analysis and interactive UI visualization.**

The `Understand-Anything` repository by Egonex-AI provides a sophisticated framework detection system that treats React, Django, Spring Boot, and other frameworks as first-class entities within its analysis pipeline. Understanding how the plugin recognizes and processes these framework-specific code patterns reveals how it builds accurate knowledge graphs and provides context-aware AI assistance for diverse technology stacks.

## Framework Configuration as First-Class Entities

Each supported framework is defined in its own TypeScript module under `packages/core/src/languages/frameworks/`. These modules export a `FrameworkConfig` object that declares the framework's identity, detection signatures, and architectural mapping rules.

### React Configuration (TypeScript/JavaScript)

The React configuration in [`packages/core/src/languages/frameworks/react.ts`](https://github.com/Egonex-AI/Understand-Anything/blob/main/packages/core/src/languages/frameworks/react.ts) defines detection through [`package.json`](https://github.com/Egonex-AI/Understand-Anything/blob/main/package.json) dependencies and maps conventional file patterns to semantic layers:

```typescript
export const reactConfig = {
  id: "react",
  displayName: "React",
  languages: ["typescript", "javascript"],
  detectionKeywords: ["react", "react-dom", "@types/react"],
  manifestFiles: ["package.json"],
  entryPoints: ["src/App.tsx", "src/index.tsx"],
  layerHints: { components: "ui", hooks: "service", pages: "ui" },
} satisfies FrameworkConfig;

```

The `layerHints` object assigns **components** and **pages** to the `ui` layer, while **hooks** map to the `service` layer, enabling the graph builder to categorize React abstractions correctly.

### Django Configuration (Python)

Django's framework configuration in [`packages/core/src/languages/frameworks/django.ts`](https://github.com/Egonex-AI/Understand-Anything/blob/main/packages/core/src/languages/frameworks/django.ts) targets Python's packaging conventions:

```typescript
export const djangoConfig = {
  id: "django",
  displayName: "Django",
  languages: ["python"],
  detectionKeywords: ["django", "djangorestframework"],
  manifestFiles: ["requirements.txt", "pyproject.toml"],
  entryPoints: ["manage.py", "wsgi.py"],
  layerHints: { views: "api", models: "data", templates: "ui" },
} satisfies FrameworkConfig;

```

Here, **views** map to the `api` layer, **models** to the `data` layer, and **templates** to the `ui` layer, preserving Django's architectural separation of concerns in the generated knowledge graph.

### Spring Boot Configuration (Java/Kotlin)

The Spring Boot configuration in [`packages/core/src/languages/frameworks/spring.ts`](https://github.com/Egonex-AI/Understand-Anything/blob/main/packages/core/src/languages/frameworks/spring.ts) handles JVM-based dependency manifests:

```typescript
export const springConfig = {
  id: "spring",
  displayName: "Spring Boot",
  languages: ["java", "kotlin"],
  detectionKeywords: ["spring-boot", "org.springframework"],
  manifestFiles: ["pom.xml", "build.gradle"],
  entryPoints: ["**/Application.java"],
  layerHints: { controller: "api", service: "service", repository: "data" },
} satisfies FrameworkConfig;

```

This configuration recognizes Spring's stereotype annotations, mapping **controllers** to `api`, **services** to `service`, and **repositories** to `data` layers.

## Registry and Detection Pipeline

All framework configurations are collected in `builtinFrameworkConfigs` and registered via `FrameworkRegistry.createDefault()` in [`packages/core/src/languages/framework-registry.ts`](https://github.com/Egonex-AI/Understand-Anything/blob/main/packages/core/src/languages/framework-registry.ts). The registry exposes three critical methods for framework resolution:

- **`getById(id)`** – Retrieves a specific framework configuration by its identifier.
- **`getForLanguage(langId)`** – Returns all frameworks applicable to a given programming language.
- **`detectFrameworks(manifests)`** – Accepts a map of filename-to-content mappings and performs case-insensitive keyword matching against `detectionKeywords` in declared `manifestFiles`.

The detection algorithm iterates over registered configurations, validates manifest file names, and checks for the presence of detection keywords within file contents. Detected frameworks are returned as an ordered array and stored in the project model's `frameworks` field, which drives downstream analysis components.

## Consumption in Downstream Components

Detected frameworks propagate through three primary integration points that shape the analysis output:

### Graph Construction and Layer Mapping

In [`packages/core/src/analyzer/graph-builder.ts`](https://github.com/Egonex-AI/Understand-Anything/blob/main/packages/core/src/analyzer/graph-builder.ts), the `project.frameworks` array informs the graph construction process. The system uses `layerHints` to assign source files to logical graph layers—for example, routing React components to UI nodes and Spring controllers to API nodes. This creates a semantically accurate representation of the architecture that reflects framework conventions.

### LLM Prompt Integration

The [`packages/core/src/analyzer/llm-analyzer.ts`](https://github.com/Egonex-AI/Understand-Anything/blob/main/packages/core/src/analyzer/llm-analyzer.ts) module includes detected frameworks in the system prompt context, passing them as a structured array:

```json
{
  "frameworks": ["React", "Django", "Spring"]
}

```

This enables the LLM to tailor explanations, code suggestions, and architectural insights to the specific frameworks present in the codebase, improving the relevance of AI-generated responses.

### Dashboard UI Visualization

The side-panel dashboard in [`src/onboard-builder.ts`](https://github.com/Egonex-AI/Understand-Anything/blob/main/src/onboard-builder.ts) renders the `project.frameworks` data in markdown tables, providing users with immediate visibility into which frameworks the plugin has recognized and how they influence the analysis.

## Practical Implementation Example

The following example demonstrates the complete detection pipeline using the registry and graph builder:

```typescript
import { FrameworkRegistry } from "./packages/core/src/languages/framework-registry.js";

// Build a default registry with all built-in frameworks
const registry = FrameworkRegistry.createDefault();

// Simulate manifest files from a sample project
const manifests = {
  "package.json": '{ "dependencies": { "react": "^18.2.0" } }',
  "requirements.txt": "Django==4.2\n",
  "pom.xml": '<dependency><groupId>org.springframework.boot</groupId></dependency>',
};

// Detect which frameworks are used
const detected = registry.detectFrameworks(manifests);
console.log(detected.map(c => c.displayName));
// → [ 'React', 'Django', 'Spring Boot' ]

// Use the detection results to build a project graph
import { GraphBuilder } from "./packages/core/src/analyzer/graph-builder.js";
const graph = GraphBuilder.build({
  // ...other project data,
  frameworks: detected.map(c => c.id), // ["react","django","spring"]
});

```

This implementation leverages the `FrameworkConfig` definitions to accurately identify multi-framework projects and initialize the graph with appropriate semantic layer mappings.

## Summary

- **Declarative Configuration**: Each framework (React, Django, Spring) is defined in `packages/core/src/languages/frameworks/` with a `FrameworkConfig` object specifying detection keywords, manifest files, and layer mappings.
- **Automated Detection**: The `FrameworkRegistry` in [`framework-registry.ts`](https://github.com/Egonex-AI/Understand-Anything/blob/main/framework-registry.ts) scans project manifests using `detectFrameworks()` to identify frameworks through keyword matching in dependency files.
- **Semantic Layer Mapping**: `layerHints` in each configuration map framework-specific file types (controllers, components, models) to logical graph layers (`api`, `ui`, `data`, `service`).
- **LLM Context Enhancement**: Detected frameworks are injected into LLM system prompts via [`llm-analyzer.ts`](https://github.com/Egonex-AI/Understand-Anything/blob/main/llm-analyzer.ts) to enable framework-aware code analysis and suggestions.
- **UI Integration**: The dashboard in [`onboard-builder.ts`](https://github.com/Egonex-AI/Understand-Anything/blob/main/onboard-builder.ts) surfaces detected frameworks to users, providing transparency into the analysis scope.

## Frequently Asked Questions

### How does the plugin detect multiple frameworks in a single project?

The `detectFrameworks()` method in `FrameworkRegistry` accepts a map of all manifest files and iterates through every registered framework configuration. It performs case-insensitive keyword matching against the contents of relevant manifest files (such as [`package.json`](https://github.com/Egonex-AI/Understand-Anything/blob/main/package.json), [`requirements.txt`](https://github.com/Egonex-AI/Understand-Anything/blob/main/requirements.txt), or [`pom.xml`](https://github.com/Egonex-AI/Understand-Anything/blob/main/pom.xml)), returning an array of all matching frameworks. This allows the plugin to simultaneously recognize React in the frontend, Django in the backend, and Spring in microservices within the same repository.

### What determines which layer a file gets assigned to in the knowledge graph?

The `layerHints` property in each `FrameworkConfig` object defines the mapping between framework-specific conventions and logical layers. For example, Spring's `layerHints` assigns `controller` to `api`, `service` to `service`, and `repository` to `data`, while React maps `components` to `ui`. The [`graph-builder.ts`](https://github.com/Egonex-AI/Understand-Anything/blob/main/graph-builder.ts) module uses these hints to categorize nodes during graph construction, ensuring the visual representation reflects the framework's architectural intent.

### Can the plugin detect frameworks without standard manifest files?

Yes, though with reduced specificity. The `entryPoints` field in `FrameworkConfig` lists typical source file patterns (such as [`src/App.tsx`](https://github.com/Egonex-AI/Understand-Anything/blob/main/src/App.tsx) for React or `**/Application.java` for Spring) that can trigger framework recognition even when dependency manifests are incomplete. However, the primary detection mechanism relies on `detectionKeywords` found in `manifestFiles` for the highest confidence matches.

### Where does the framework information appear in the user interface?

Detected frameworks populate the **Frameworks** section of the side panel, implemented in [`src/onboard-builder.ts`](https://github.com/Egonex-AI/Understand-Anything/blob/main/src/onboard-builder.ts), which renders the information in markdown tables. Additionally, the framework list is embedded in the LLM context within [`llm-analyzer.ts`](https://github.com/Egonex-AI/Understand-Anything/blob/main/llm-analyzer.ts), ensuring that AI-generated explanations and code suggestions are aware of the specific frameworks present in the analyzed codebase.