Dashboard Features How it Works Design Hub AI Integration GitHub ↗ Install Free ↗

Your Codebase, Visualized.
In Real-Time.

A lightweight, zero-configuration local tool that watches your project and builds interactive graphs of your functions call hierarchy, database schemas (ERD), and architectural layers.

$ npx @vmcreate/ai-watcher
Explore Features

Trusted by developers building on modern stacks

🔵 TypeScript
🚀 Next.js
🔥 Firebase
🡗 Prisma
⚡ Astro
🐦 Flutter

Watch your Codebase Think

Real-time interactive graph of your functions, database entities, and architectural layers — all in one local dashboard.

AI-Watcher Dashboard — http://localhost:4321
Live
130 fn
36 tables
✓ clean
Functions Graph
DB ERD
Architecture
AI Context
Call-Graph — 130 functions · 253 edges
core auth api db server cli
Active File
auth.js
12 functions · 3 callers
login()
logout()
verifyToken()
refreshSession()
+ 8 more...
Break History
✓ No breaks detected
Core
Auth/API
DB/Server
Database ERD — 36 entities · Prisma schema
User
PKidInt
emailString
nameString?
FKroleIdInt
createdAtDateTime
1 : N
Post
PKidInt
FKauthorIdInt
titleString
bodyText
publishedBoolean
N : 1
Role
PKidInt
nameString
permissionsJson
Schema Source
schema.prisma
36 models · 84 fields
PKUser.id
FKPost.authorId
FKUser.roleId
Primary Key
Foreign Key
Architecture Layers — D3 tree view
● my-project/
◍ src/
■ core/ 42 fn
■ server/ 28 fn
■ parsers/ 19 fn
◍ db/ 36 entities
■ models/ 12 fn
■ migrations/ 8 fn
◍ bin/ CLI entry
■ index.js 21 fn
Layer Stats
■ Core42 fn
■ Server28 fn
■ Parsers19 fn
■ DB12 fn
■ CLI21 fn
.ai_context.json — auto-generated · always current
1{
2  "project": "my-app", "version": "3.0.2",
3  "scannedAt": "2026-08-09T10:47:00Z",
4  "stats": { "nodes": 130, "edges": 253, "entities": 36, "breaks": 0 },
5  "nodes": [
6    {
7      "id": "auth.login",
8      "file": "src/auth.js",
9      "line": 42,
10      "callers": ["api.routePost", "cli.authCmd"],
11      "callees": ["db.findUser", "auth.verifyToken"],
12      "group": "auth", "status": "clean"
13    },
14    { "id": "db.findUser", /* ... 128 more nodes */ }
15  ],
16  "entities": [
17    { "table": "User", "pk": "id", "relations": ["Post", "Role"] },
18    { "table": "Post", "fk": "authorId", "relations": ["User"] }
19  ],
20  "status": "clean", "breaks": 0
21}
Agent Rule
Read this first

Instruct your AI agent to read .ai_context.json before every code modification session.

✓ 0 breaks · graph clean
✓ 130 nodes indexed

Designed for Developer Clarity

No configuration files, no setups, no cloud uploads. Simply run it and explore your codebase.

Functions Call-Graph

Explore live call hierarchies between functions and methods. Hover highlights show caller/callee links, and broken connections trigger warnings.

Database ERD Visualizer

Auto-extracts database models from Prisma schemas, SQL scripts, and object classes. Displays relationship links with yellow PK and purple FK indicators.

Architecture Tree View

Organizes code into logical layers (CLI, Application, Server, DB, etc.) in a D3 tree, displaying functions count, file-level dependencies, and recent changes.

Break Detection

Instantly detects when function call chains break due to rename or deletion. Flash alerts and history log keep your agent and team informed in real time.

Design Inspiration Hub

Upload screenshots, paste reference URLs, and let the AI Vision agent analyze and generate a full Master UI Prompt with Anti-AI-Slop directives and Impeccable guidelines.

Zero Configuration

One command — npx @vmcreate/ai-watcher — and the full visualization dashboard opens locally. No cloud, no sign-up, no YAML files.

Zero Config. Run Instantly.

AI-Watcher works out of the box. Point it at any repository, and it immediately scans and serves the interactive visualization dashboard locally.

1

Run locally or globally

Type npx @vmcreate/ai-watcher inside your workspace root.

2

Explore the dashboard

Dashboard opens on http://localhost:4321 instantly.

3

Watch updates live

Graphs update dynamically as you modify files in your editor.

bash

viktor@laptop:~/project$ npx @vmcreate/ai-watcher


╔══════════════════════════════════════════════════════╗

║ AI-WATCHER v3.0.2 — Modular Architecture Edition ║

║ Functions Graph · DB ERD · Architecture View ║

╚══════════════════════════════════════════════════════╝


[AI-WATCHER] Watching root: C:\PROGRAMIRANJE\chronos

[AI-WATCHER] Scanning for source files and DB schemas…

[SYNC OK] Graphs ready: 130 functions · 36 DB entities · 253 links

[AI-WATCHER] Visualization App: http://localhost:4321

[AI-WATCHER] Browser opened: http://localhost:4321

Design & Inspiration Hub

Upload screenshots or paste a reference URL. AI-Watcher's Vision Agent analyzes it, generates a Master UI Prompt with Anti-AI-Slop directives, and sends it directly to your coding agent.

01

Upload Screenshot

Drag & drop multiple design screenshots or paste a reference website URL. Supports PNG, WebP, JPG.

02

AI Vision Analysis

Gemini Vision Agent inspects the image and URL content — extracting color palette, typography, layout structure, and design patterns.

03

Impeccable Prompt

Synthesizes a Master UI Prompt with 11 Impeccable design commands, Anti-AI-Slop directives, and bespoke design token specifications.

04

Agent API Call

One-click sends the generated prompt to your AI coding agent (Gemini / OpenAI) via API — ready to rebuild your UI immediately.

AI-Watcher — Design & Inspiration Gallery
📈 Graph 🗃 ERD 🎨 Design
Inspiration Gallery
Dark SaaS Dashboard
darkvioletSaaS
✓ Active
Linear App Style
blueminimal
Add Inspiration
🛡️
Anti-AI-Slop Directive Active
Generic white boxes, plain blue buttons, boring 3-column grids — strictly forbidden.
Impeccable Commands (11 active)
/colorize
/typeset
/layout
/overdrive
/delight
/bolder
/distill
/harden
/audit
/polish
/anti-slop
Generated Master Prompt
# MASTER SYSTEM PROMPT
You are the Master UI Architect...
## Color Token Matrix
Canvas: #000000 (Pitch Black)
Accent: #8B5CF6 (Electric Violet)
## Anti-AI-Slop Directives
✖ No generic blue buttons...
✖ No plain white backgrounds...
✔ 8px spatial grid enforced
✔ Micro-interactions required...
🖶 AI Agent Config
📋 Copy Prompt
⚡ Send to Agent

Available in the Design tab of your AI-Watcher dashboard

Try Design Hub Free ↗
🤖 Built for AI Agents

Synergy with your
AI Coding Assistant

AI-Watcher writes a structured graph index to a local .ai_context.json file, allowing coding agents like Gemini, Claude, or Cursor to understand your full codebase at a glance.

Live Codebase Graph
core auth api db server cli
Live watching
130
Functions
253
Edges
36
DB Entities
.ai_context.json auto-updated
1{
2  "project": "my-app",
3  "scannedAt": "2026-08-09",
4  "nodes": [
5    { "id": "auth.login",
6      "file": "auth.js",
7      "callers": ["api.route"],
8      "callees": ["db.find"] },
9    { "id": "db.find", ... }
10  ],
11  "entities": [
12    { "table": "User",
13      "pk": "id",
14      "relations": ["Post"] }
15  ],
16  "breaks": 0,
17  "status": "clean"
18}
✓ No broken links ● 130 nodes
Agent Rules
01
Read Context First

Instruct your agent to read .ai_context.json before any action to ensure 100% accurate codebase maps.

// Add to your AGENTS.md or system prompt:
Before making code modifications,
inspect and consult
.ai_context.json to understand
existing function chains.
02
10,000-Line Digest Rule

When changes exceed 10,000 lines, AI-Watcher triggers a warning to pause and summarize — preventing agent context drift.

⚠ [AI-WATCHER]
Context threshold reached.
Changes: 10,241 lines.
ACTION: Pause & summarize
before continuing.
03
Architectural Memory Sync

Structural changes and design decisions are immediately written into the graph index and the agent's persistent memory.

✓ [SYNC OK]
Graph updated: +3 nodes
New edge: auth → session
Memory: ai_context.json
written successfully.
Works with
🤖 Gemini
🤗 Claude
🔨 Cursor
⚡ Antigravity
👀 GitHub Copilot
⚡ Open-source & free
Install Free ↗