GraphCore is an enterprise-grade, local-first spatial code comprehension and refactor intelligence engine for TypeScript and JavaScript codebases. GraphCore dynamically parses source code into an interactive 4D architectural flow diagram—offering real-time refactor risk analysis, taint/data flow tracing, architectural rule enforcement, and AI context extraction via the Model Context Protocol (MCP).
| Architecture Flow View | Refactor Risk & Blast Radius |
|---|---|
.png) |
.png) |
| Data Flow & Taint Tracing | Symbol Inspector & Telemetry |
|---|---|
.png) |
.png) |
.png)
.png)
.png)
-
Horizontal Architectural Flow Diagram:
Automatically organizes project files into 6 distinct architectural layer lanes (UI Components➔API & Routers➔Domain Services➔Infrastructure➔Database➔External Packages) with clean left-to-right dependency routing. -
Refactor Blast Radius Engine:
Instantly computes downstream impact when modifying or refactoring any file or AST symbol, outputting affected dependency trees and assigning a Refactor Risk Score (Low, High, or Critical). -
Taint & Data Flow Tracing:
Traces full execution paths from HTTP endpoints down to database model mutations with real-time neon particle animations along graph edges. -
Git Churn & Complexity Heatmap:
Highlights high-risk code hotspots based on commit activity, file churn, lines of code (LOC), and cyclomatic function complexity. -
Architectural Rule Guard:
Enforces structural boundaries (e.g., prohibiting UI components from querying database repositories directly or bypassing domain logic layers) with visual violation badges. -
MCP AI Context Extraction:
Extracts precise, token-optimized Markdown context subgraphs for AI coding assistants (Cursor, Claude, Copilot, ChatGPT)—reducing prompt token overhead by up to -85%. -
Local Ingestion & AST Parsing:
Leverages the browser File System Access API to scan local project directories (.ts,.tsx,.js,.jsx), or analyze custom snippets via the in-app code editor. -
100% Privacy & Air-Gapped:
All parsing, dependency graphing, and AST telemetry execute strictly client-side inside your browser. No code or telemetry ever leaves your machine.
GraphCore categorizes software architecture into structured horizontal lanes:
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐ ┌──────────────────┐ ┌─────────────────┐ ┌──────────────────┐
│ UI Components │ ─► │ API & Routers │ ─► │ Domain Services │ ─► │ Infrastructure │ ─► │ Database │ ─► │ External Packages│
│ (React/JSX/CSS) │ │ (Express/Fastify)│ │ (Business Logic)│ │(Gateways/Clients)│ │ (Prisma/ORM/SQL)│ │ (npm packages) │
└─────────────────┘ └─────────────────┘ └─────────────────┘ └──────────────────┘ └─────────────────┘ └──────────────────┘
graph-project/
├── public/ # Static assets & standalone scripts
│ └── axiom-auto-telemetry.js # Auto telemetry injection script
├── screenshots/ # Application UI screenshots
│ ├── Screenshot (540).png
│ ├── Screenshot (541).png
│ ├── Screenshot (542).png
│ ├── Screenshot (543).png
│ ├── Screenshot (544).png
│ ├── Screenshot (545).png
│ └── Screenshot (546).png
├── scripts/
│ └── scan.js # CLI offline repository scanner
├── src/
│ ├── components/ # UI Components
│ │ ├── BlastRadiusPanel.tsx# Blast radius analysis drawer
│ │ ├── GraphCanvas.tsx # High-performance HTML5 Canvas graph renderer
│ │ ├── Header.tsx # Main navigation bar & project control panel
│ │ ├── McpModal.tsx # MCP context generator modal
│ │ ├── NodeInspector.tsx # Detailed symbol & file inspector drawer
│ │ ├── RulesModal.tsx # Architectural rule guard management modal
│ │ └── UploadModal.tsx # Code snippet ingestion modal
│ ├── services/
│ │ ├── graphEngine.ts # Graph traversal, blast radius & taint flow algorithms
│ │ └── tsParser.ts # TypeScript/JavaScript AST parser & preset graphs
│ ├── types/
│ │ └── graph.ts # TypeScript interfaces & types for project graph
│ ├── App.tsx # Root application component
│ ├── index.css # Global Tailwind CSS styles
│ └── main.tsx # Application entry point
├── USAGE.md # Detailed user guide and feature walkthrough
├── context.md # Sample MCP subgraph output format
├── architectural_vision_and_blueprint.md # Architecture specification blueprint
├── package.json # Project manifest and scripts
├── tsconfig.json # TypeScript compiler config
└── vite.config.ts # Vite bundling configuration
Ensure you have Node.js (v18.0.0 or higher) and npm installed on your system.
Clone the repository and install the dependencies:
# Clone the repository
git clone https://github.com/Hardikkhyal/GraphCore.git
# Navigate into the project folder
cd GraphCore
# Install dependencies
npm installStart the local dev server using Vite:
npm run devOpen your browser and navigate to http://localhost:3000 (or the port indicated in your console).
- Open Folder: Click Open Folder in the top bar to load any local TypeScript/JavaScript project.
- Dropdown Presets: Select built-in demo architectures (E-Commerce Microservice, FinTech Core, Design System).
- Paste Code: Paste arbitrary code snippets into the in-app code editor for instant AST graph visualization.
For large repositories or automated workflows, run the offline scanner CLI:
npm run scan -- "C:/path/to/your/project"This generates a pre-processed JSON graph file saved to dist/custom_project_graph.json.
- Framework: React 18
- Language: TypeScript
- Build Tool: Vite
- Styling: Tailwind CSS v4
- Icons: Lucide React
- Canvas Rendering: Custom HTML5 Canvas Engine with 2D spatial layouts & level-of-detail (LOD) controls
GraphCore is built with a strict local-first architecture:
- No code snippets, source files, or file paths are ever uploaded to cloud endpoints or remote telemetry servers.
- Works 100% offline in air-gapped environments.
- File parsing uses browser native APIs (
FileSystemDirectoryHandle) operating entirely within client memory.
This project is licensed under the MIT License.