repo-canvas

MCP.Pizza Chef: m0ast-git

Explore your code repository through an interactive, local map that shows how different parts of your project fit together. Repo Canvas highlights active work by AI coding agents like Codex and Claude Code, letting you see live changes and jump directly to those sessions. It runs on your Windows or macOS machine using Node.js and Git, requiring only a local Codex setup. This helps you understand complex projects and track ongoing AI-assisted development without leaving your environment.

Coding
Other

Use This MCP client To

Visualize the structure of a large code repository at a glance See live coding activity from AI agents in my project Navigate directly to active coding sessions from the map Understand module responsibilities and their relations visually Keep track of project areas and human participants involved Interactively explore project components with drag-and-drop Reload and update the project map as code changes

README

Repo Canvas

Understand a large repository at a glance and see where coding agents are working right now.

Repo Canvas builds a local, Miro-like map of an existing project. Permanent areas, modules and relations show how the system fits together. Live work cards show what Codex, Claude Code and Kimi Code sessions are changing. Double-click a work card to return to that session.

Install with your coding agent

Send your agent this repository URL and one sentence:

https://github.com/m0ast-git/repo-canvas
Install this project-visualization tool in the current repository, build the initial map, start it and give me the local Canvas URL.

The agent will follow INSTALL_WITH_AGENT.txt. The exact commands are:

npm install --save-dev --save-exact --ignore-scripts github:m0ast-git/repo-canvas#v0.11.2
npx --no-install repo-canvas setup
npm run repo-canvas:start

The server opens the protected loopback URL in your default browser. Keep that foreground terminal running while you use the Canvas.

What you see

  • project areas that group related parts of the system;
  • persistent modules, responsibilities, stores, pipeline stages and integrations;
  • circular human participants outside project areas, with directed relations showing what they provide, decide, expect or receive;
  • meaningful runtime, data and control-flow relations;
  • a provisional work card as soon as a supported agent turn is observed;
  • live work attached to every semantic entity it affects;
  • entity passports and recent activity in the left rail;
  • collapsible project sections, full-map reset and an in-canvas legend;
  • draggable area headers and entity cards with immediate, saved movement of their nested contents;
  • owner-controlled area and entity names and descriptions, plus relation labels, by double-clicking the object;
  • light and dark themes, readable active-area emphasis and relation labels revealed by a forgiving line hover;
  • distinct header controls for reloading current Canvas data and regenerating the semantic map with Architect;
  • a persistent Architect status surface with current phase, heartbeat, elapsed time, validation repair and the final result;
  • a local Update button that appears only when a newer verified release is available;
  • direct navigation back to Codex App or an exact Codex, Claude Code or Kimi Code CLI resume command.

The data model has no fixed entity cap. One Canvas can hold a small project or a map with hundreds of semantic entities.

The map keeps one stable project geography at every zoom: areas, nested capabilities and concrete entities never disappear or jump to another composition. Zoom only changes where live activity is emphasized: an area while cards are too small to read, the affected entity at middle distance, and the exact agent work card when it becomes readable. Area colors also identify outgoing relations. React Flow keeps interaction smooth while ELK computes the composition off the main UI thread; the relation router reserves separate lanes and keeps labels outside cards.

Dragging empty canvas space always moves the camera. An area moves from its framed header; an entity moves from its card. The small ⠿ mark identifies those draggable surfaces, while the surrounding area body remains available for panning.

How it works

repo-canvas FAQ

Can I use this to visualize and understand a large code repository?
Yes — Repo Canvas creates a live, interactive map of your project showing modules, areas, and current coding activity.
Can I see where coding agents like Codex or Claude Code are working in my project?
Yes — it shows live work cards for active agent sessions and lets you jump back to those sessions.
Which apps support Repo Canvas?
It works locally on Windows or macOS with Node.js and Git, and integrates with locally authenticated Codex, Claude Code, and Kimi Code agents.
Do I need an API key or online account to use Repo Canvas?
No — it runs locally and connects to your existing Codex or compatible agent installations without extra keys.
How hard is it to set up Repo Canvas?
Setup involves copying and pasting commands into your terminal; it requires Node.js, Git, and a local Codex installation.
Can I use Repo Canvas with ChatGPT or Claude Desktop?
No — it currently supports Codex App, Codex CLI, Claude Code CLI, and Kimi Code CLI sessions only.