Kitebox

Visual architecture tool that serves as the source-of-truth for Claude Code via MCP.

Map your codebase into an interactive architecture diagram — modules, screens, data models, and system integrations — then keep it in sync as your project evolves through the MCP integration with Claude Code.

Quick Start (per-project)

cd your-project
npx kitebox init    # Creates kitebox.json + configures Claude Code MCP
npx kitebox         # Opens the architecture canvas for this project

This is the fastest way to get started. Runs Kitebox in the context of a single project.

Global Install (multi-project)

npm install -g kitebox

Once installed globally, you can run kitebox from any directory without npx. This also lets you manage multiple projects — click "Projects" in the toolbar to switch between them.

cd project-a && kitebox init
cd project-b && kitebox init
kitebox                          # Opens the canvas — use Projects to switch

What it does

• kitebox init — Scaffolds a kitebox.json in your project and wires up the MCP server in .mcp.json so Claude Code can read and update your architecture.
• kitebox — Starts a local server and opens an interactive canvas where you can explore modules, screens, data models, and system dependencies.

How it works with Claude Code

Once initialized, Claude Code can use the Kitebox MCP tools to:

1. Read your architecture — understand how your app is structured before making changes
2. Update your architecture — keep the diagram in sync as you add features
3. Bulk import — map an entire codebase in one shot when starting fresh

Example prompts for Claude Code

After running kitebox init, open Claude Code in your project. Here are some things you can ask:

Starting a new project

Build the app based on the Kitebox architecture

Implement the Recipe Management module from Kitebox

Continuing development

Check Kitebox for any architecture changes, then implement them

Add a settings screen to the app. Update Kitebox too.

Mapping an existing codebase

Map this project's architecture into Kitebox

Making changes

Remove the auth module and all its code. Clean up Kitebox completely.

Add a search feature — update Kitebox first, then write the code

Staying in sync

Is Kitebox in sync with the code? Fix any differences.

Claude Code automatically reads and updates Kitebox as it works. These prompts are just examples — in most cases, Claude will keep things in sync without being asked.

Requirements

• Node.js 18+
• Claude Code (for MCP integration)

Links

• Website: kitebox.dev
• Viewer: viewer.kitebox.dev