Monorepo Component Map
A VS Code extension that uses your Copilot subscription (through the VS Code Language Model API) to run an agent over your monorepo, write component skills, and then draw a drill-down component diagram from those skills.
How it works
scan (fast, no AI) agent (Copilot model + read-only tools) skills (on disk) diagram
───────────────── ───────────────────────────────────── ──────────────── ───────
manifests, folders, ──▶ per app / service / library: ──▶ .github/skills/ ──▶ top level → click →
imports → draft tree list_dir · read_file · search monorepo-architecture/ nested components → click →
→ submit_component (validated) component-<path>/SKILL.md folder & files at the leaves
overview pass → submit_overview
- Scan. Packages are found from manifests (
package.json, Cargo.toml, go.mod, pyproject.toml, project.json, …), grouped by folder (apps/, packages/, services/), with code folders inside each package proposed as nested sub-components. Links come from workspace dependencies and from cross-component imports (relative paths and workspace package names such as @acme/ui/button).
- Agent. For each app / service / library the model gets the draft and explores the folder with three read-only tools. It then calls
submit_component with a description, responsibilities, entry points, nested sub-components and links. The result is validated: folders that don't exist are dropped, relative paths are fixed, dependency names are resolved to components, and import links the model left out are kept.
- Skills. The overall skill (
monorepo-architecture) plus one skill per component is written as a standard Agent Skill (SKILL.md with name + description frontmatter). Copilot agent mode (and Claude, if you point the folder at .claude/skills) can load these skills too. Each file ends with a ```json component-map block, and that block is what the diagram reads.
- Diagram. The diagram is drawn only from the skills. If you edit a skill by hand, the open diagram refreshes.
The diagram
- Default view: the high-level components only. Each box lists its nested components as chips. Arrows mean "uses", and the arrows are added up across everything nested inside the box.
- Click a box (or one of its chips) to drill into it. You then see its sub-components and how they link. Anything outside that level that they use, or that uses them, shows as a dashed box.
- Components | Folders toggle: switch any level to its real folder tree. Clicking a file opens it. A folder that is also a component has an open in diagram link.
- Leaves: when a component has no sub-components, clicking it shows its folder and files.
- Going back: use the breadcrumb, ↑ (or Backspace) to go up one level, and ← (or Alt+←) to go back.
- Hover a box to highlight its links. Drag to pan, Ctrl/⌘+wheel to zoom, and press Fit to reset.
- Each box has hover actions: open its folder tree, open its skill file, and reveal it in the Explorer. You can also right-click a folder in the Explorer and choose Show in Component Map.
Commands
| Command |
What it does |
Component Map: Show Component Diagram |
Opens the diagram. Also available from the Components status-bar item. Before any skill exists it shows a live scan. |
Component Map: Generate Component Skills with Copilot |
Runs the agent and writes the skills. Shows progress and can be cancelled. Logs go to the Component Map output channel. |
Component Map: Generate Component Skills (no AI, scan only) |
Writes skills from the scan alone. |
Component Map: Select Language Model |
Chooses which model from your subscription to use (for example GPT-4o or Claude Sonnet via Copilot). |
The extension also registers two language-model tools, so Copilot can query the map while it works:
#components (componentMap_listComponents): the component tree with links#component (componentMap_getComponent): one component's skill: purpose, sub-components, what it depends on and what uses it
Settings
| Setting |
Default |
|
componentMap.skillsDirectory |
.github/skills |
Where skills are written. Use .claude/skills for Claude. |
componentMap.modelVendor |
copilot |
LM API vendor |
componentMap.modelFamily |
(first available) |
e.g. gpt-4o, claude-sonnet-4 |
componentMap.maxAgentSteps |
12 |
Tool rounds per component |
componentMap.maxDepth |
3 |
Nesting levels the scanner proposes |
componentMap.exclude |
node_modules, dist, … |
Folders that are ignored |
Develop
npm install
npm test # compiles, then runs the scanner / skills / agent tests (agent uses a scripted fake model)
# F5 in VS Code → Extension Development Host; open a monorepo (e.g. test/fixtures/acme)
npm run package # builds monorepo-component-map-<version>.vsix
Requirements: VS Code 1.95+ and a signed-in Copilot (or any provider exposed through the Language Model API). The scan-only command works without one.
| |
