Understand Anything Frontend

Turn any codebase, knowledge base, or docs into an interactive knowledge graph you can explore, search, and ask questions about.
Works with Trae, Trae CN, Codex CLI, and a standalone CLI.

English | 简体中文

You just joined a new team. The codebase is 200,000 lines of code. Where do you even start?

Understand Anything Frontend is a Trae plugin that analyzes your project with a multi-agent pipeline, builds a knowledge graph of every file, function, class, and dependency, then gives you an interactive dashboard to explore it all visually. Stop reading code blind. Start seeing the big picture.

The goal isn't a graph that wows you with how complex your codebase is — it's a graph that quietly teaches you how every piece fits together.

✨ Features

Explore the structural graph

Navigate your codebase as an interactive knowledge graph — every file, function, and class is a node you can click, search, and explore. Select any node to see plain-English summaries, relationships, and guided tours.

Understand business logic

Switch to the domain view and see how your code maps to real business processes — domains, flows, and steps laid out as a horizontal graph.

🧭 Guided Tours Auto-generated walkthroughs of the architecture, ordered by dependency. Learn the codebase in the right order.	🔍 Fuzzy & Semantic Search Find anything by name or by meaning. Search "which parts handle auth?" and get relevant results across the graph.
📊 Diff Impact Analysis See which parts of the system your changes affect before you commit. Understand ripple effects across the codebase.	🎭 Persona-Adaptive UI The dashboard adjusts its detail level based on who you are — junior dev, PM, or power user.
🏗️ Layer Visualization Automatic grouping by architectural layer — API, Service, Data, UI, Utility — with color-coded legend.	📚 Language Concepts 86 language-specific concepts (generics, closures, reactive stores, SFC patterns, etc.) explained in context wherever they appear.

Platform Adapters

Three adapters run the same 8-phase pipeline, but differ in how they dispatch agents:

Adapter	LLM	Use case
Trae	✅ (via Trae subagent)	Inside Trae / Trae CN IDE — full semantic analysis
Codex	✅ (via Codex CLI)	Outside the IDE — full semantic analysis with an external coding agent
CLI	❌ (deterministic tree-sitter only)	CI/CD, scripts, offline — reproducible and free, no API key required

All three emit a knowledge-graph.json that works with the same dashboard.

🚀 Quick Start

1. Install the plugin

Install via the one-line installer:

macOS / Linux:

curl -fsSL https://raw.githubusercontent.com/creayma-del/Understand-Anything-Frontend/main/install.sh | bash -s trae

Windows (PowerShell):

iwr -useb https://raw.githubusercontent.com/creayma-del/Understand-Anything-Frontend/main/install.ps1 | iex

2. Analyze your codebase

/understand

A multi-agent pipeline scans your project, extracts every file, function, class, and dependency, then builds a knowledge graph saved to .understand-anything-frontend/knowledge-graph.json.

Localized output: Use --language to generate content in your preferred language:

# Generate English content (knowledge graph node descriptions and Dashboard UI)
/understand --language en

# Supported languages: zh (default), en

The --language parameter affects:

Node summaries and descriptions in the knowledge graph
Dashboard UI labels, buttons, and tooltips
Guided tour explanations

3. Explore the dashboard

/understand-dashboard

An interactive web dashboard opens with your codebase visualized as a graph — color-coded by architectural layer, searchable, and clickable. Select any node to see its code, relationships, and a plain-English explanation.

4. Keep learning

# Analyze impact of your current changes
/understand-diff

# Extract business domain knowledge (domains, flows, steps)
/understand-domain

# Re-run anytime — incremental by default (only re-analyzes changed files)
/understand

# Auto-update on every commit via a post-commit hook
/understand --auto-update

# Scope to a subdirectory (for huge monorepos)
/understand src/frontend

5. Use the standalone CLI

Prefer the terminal or need CI/CD? The standalone CLI runs the same pipeline without an IDE, and without an LLM:

# Install (from source until published to npm)
git clone https://github.com/creayma-del/Understand-Anything-Frontend.git
cd Understand-Anything-Frontend
pnpm install
pnpm --filter @understand-anything-frontend/adapter-cli build

# Analyze a project (full mode, deterministic analysis)
node understand-anything-frontend-plugin/packages/adapter-cli/bin/understand-anything.mjs analyze /path/to/project --full --language zh

Output is written to /path/to/project/.understand-anything-frontend/knowledge-graph.json. Use --language en for English output.

The CLI adapter uses deterministic tree-sitter analysis: no API key, no rate limits, fully reproducible. Summaries are empty and complexity is fixed to simple — use the Trae or Codex adapter when you need LLM-powered semantic descriptions.

🌐 Installation

Understand-Anything-Frontend is designed for Trae, Trae CN, Codex CLI, and standalone CLI use.

Trae / Trae CN

macOS / Linux:

curl -fsSL https://raw.githubusercontent.com/creayma-del/Understand-Anything-Frontend/main/install.sh | bash -s trae

Windows (PowerShell):

iwr -useb https://raw.githubusercontent.com/creayma-del/Understand-Anything-Frontend/main/install.ps1 | iex

The installer clones the repo to ~/.understand-anything-frontend/repo and creates the right symlinks for Trae. Restart Trae afterwards.

Update later: ./install.sh --update
Uninstall: ./install.sh --uninstall trae

Standalone CLI

The CLI adapter is part of this monorepo and runs without an IDE. Requires Node.js >= 18.

# From source (until published to npm)
git clone https://github.com/creayma-del/Understand-Anything-Frontend.git
cd Understand-Anything-Frontend
pnpm install
pnpm --filter @understand-anything-frontend/adapter-cli build

# Run
node understand-anything-frontend-plugin/packages/adapter-cli/bin/understand-anything.mjs analyze /path/to/project --full

Platform Compatibility

Platform	Status	Install Method
Trae	✅ Supported	`install.sh trae`
Trae CN	✅ Supported	`install.sh trae`
Codex CLI	✅ Supported (adapter)	Requires Codex CLI installed + API key; uses `packages/adapter-codex`
Standalone CLI	✅ Supported	`pnpm install` + `pnpm --filter @understand-anything-frontend/adapter-cli build`

📦 Share the Graph with Your Team

The graph is just JSON — commit it once, and teammates skip the pipeline. Good for onboarding, PR reviews, and docs-as-code.

What to commit: everything in .understand-anything-frontend/ except intermediate/ and diff-overlay.json (those are local scratch).

.understand-anything-frontend/intermediate/
.understand-anything-frontend/diff-overlay.json

Keep it fresh: enable /understand --auto-update — a post-commit hook incrementally patches the graph so each commit lands with a matching graph. Or re-run /understand manually before releases.

Large graphs (10 MB+): track with git-lfs.

git lfs install
git lfs track ".understand-anything-frontend/*.json"
git add .gitattributes .understand-anything-frontend/

🔧 Under the Hood

Supported Languages

Code languages (3): TypeScript, JavaScript, Vue SFC

Non-code languages (15): Markdown, YAML, JSON Config, TOML, Env, Dockerfile, SQL, GraphQL, Prisma, Makefile, Shell, HTML, CSS, reStructuredText, Plain Text

Frameworks (4): React, Vue, Next.js, Express

Tree-sitter + LLM hybrid

Static analysis and LLMs do what each does best:

Tree-sitter (deterministic) — parses source into a concrete syntax tree and extracts structural facts: imports, exports, function/class definitions, call sites, inheritance. Pre-resolved into an importMap during the scan phase and passed to file-analyzers so they don't re-derive imports from source. Same input → same output, every run. Also powers fingerprint-based change detection for incremental updates.
LLM (semantic) — reads the parsed structure alongside the original source to produce what parsers can't: plain-English summaries, tags, architectural layer assignments, business-domain mapping, guided tours, language concept callouts. Available with the Trae and Codex adapters.
CLI adapter (deterministic-only) — skips the LLM entirely. Summaries are empty and complexity is fixed to simple. Use this mode when you need reproducibility, offline runs, or CI/CD integration. Switch to Trae or Codex when you need semantic descriptions.

This split is why the graph is reproducible on the structural side (the same code always yields the same edges) while still capturing intent on the semantic side (what a file is for, not just what it imports) — when an LLM adapter is used.

Orchestration Layer

All three adapters share the same orchestration engine (@understand-anything-frontend/orchestration), which runs an 8-phase analysis pipeline:

PREFLIGHT → SCAN → ANALYZE → ASSEMBLE → ARCHITECTURE → TOUR → REVIEW → SAVE

AnalysisPipeline — orchestrates the 8 phases sequentially, coordinating five interfaces: IAgentDispatcher, IToolExecutor, IContextManager, IProgressReporter, IFallbackManager.
Platform adapters — each adapter (adapter-trae, adapter-codex, adapter-cli) implements the same orchestration interfaces, but dispatches agents differently:
- Trae — schedules subagents inside the Trae IDE
- Codex — invokes the Codex CLI binary per agent task
- CLI — runs deterministic tree-sitter analyzers in-process (no LLM)
Failure strategies — every phase supports one of three strategies: abort (halt the pipeline), skip (continue without the phase output), or fallback (retry via IFallbackManager). The strategy is configured per phase, so a transient rate limit in ANALYZE doesn't have to abort the whole run.

Multi-Agent Pipeline

The /understand command orchestrates 6 specialized agents, and /understand-domain adds a 7th:

Agent	Role
`project-scanner`	Discover files, detect languages and frameworks
`file-analyzer`	Extract functions, classes, imports; produce graph nodes and edges
`assemble-reviewer`	Assemble batch results and validate graph integrity
`architecture-analyzer`	Identify architectural layers
`tour-builder`	Generate guided learning tours
`graph-reviewer`	Validate graph completeness and referential integrity (runs inline by default; use `--review` for full LLM review)
`domain-analyzer`	Extract business domains, flows, and process steps (used by `/understand-domain`)

Additionally, knowledge-graph-guide provides interactive guidance for using the knowledge graph.

File analyzers run in parallel (up to 5 concurrent, 20-30 files per batch). Supports incremental updates — only re-analyzes files that changed since the last run.

🤝 Contributing

Contributions are welcome! Here's how to get started:

Fork the repository
Create a feature branch (git checkout -b feature/my-feature)
Run the tests (pnpm --filter @understand-anything-frontend/core test)
Commit your changes and open a pull request

Please open an issue first for major changes so we can discuss the approach.

Stop reading code blind. Start understanding everything.

Thanks to everyone who's used and contributed — knowing this saves people time is what made it worth building.

Name		Name	Last commit message	Last commit date
Latest commit History 11 Commits
.trae/skills		.trae/skills
READMEs		READMEs
docs/specs		docs/specs
scripts		scripts
tests/skill/understand		tests/skill/understand
understand-anything-frontend-plugin		understand-anything-frontend-plugin
.gitignore		.gitignore
.npmrc		.npmrc
CLAUDE.md		CLAUDE.md
LICENSE		LICENSE
README.md		README.md
eslint.config.mjs		eslint.config.mjs
install.ps1		install.ps1
install.sh		install.sh
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
pnpm-workspace.yaml		pnpm-workspace.yaml
tsconfig.json		tsconfig.json
vitest.config.ts		vitest.config.ts

Navigation Menu

Repository files navigation

Understand Anything Frontend

✨ Features

Explore the structural graph

Understand business logic

🧭 Guided Tours

🔍 Fuzzy & Semantic Search

📊 Diff Impact Analysis

🎭 Persona-Adaptive UI

🏗️ Layer Visualization

📚 Language Concepts

Platform Adapters

🚀 Quick Start

1. Install the plugin

2. Analyze your codebase

3. Explore the dashboard

4. Keep learning

5. Use the standalone CLI

🌐 Installation

Trae / Trae CN

Standalone CLI

Platform Compatibility

📦 Share the Graph with Your Team

🔧 Under the Hood

Supported Languages

Tree-sitter + LLM hybrid

Orchestration Layer

Multi-Agent Pipeline

🤝 Contributing

About

Releases

Packages

Contributors

Languages

Folders and files

Latest commit

History

Repository files navigation

Understand Anything Frontend

✨ Features

Explore the structural graph

Understand business logic

🧭 Guided Tours

🔍 Fuzzy & Semantic Search

📊 Diff Impact Analysis

🎭 Persona-Adaptive UI

🏗️ Layer Visualization

📚 Language Concepts

Platform Adapters

🚀 Quick Start

1. Install the plugin

2. Analyze your codebase

3. Explore the dashboard

4. Keep learning

5. Use the standalone CLI

🌐 Installation

Trae / Trae CN

Standalone CLI

Platform Compatibility

📦 Share the Graph with Your Team

🔧 Under the Hood

Supported Languages

Tree-sitter + LLM hybrid

Orchestration Layer

Multi-Agent Pipeline

🤝 Contributing

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages