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).
Screenshots & Visual Overview
| Architecture Flow View |
Refactor Risk & Blast Radius |
 |
 |
| Data Flow & Taint Tracing |
Symbol Inspector & Telemetry |
 |
 |
Additional Interface Views
Key Features
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.
Architectural Overview & Layering
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) │
└─────────────────┘ └─────────────────┘ └─────────────────┘ └──────────────────┘ └─────────────────┘ └──────────────────┘
Quick Start
Prerequisites
Ensure you have Node.js (v18.0.0 or higher) and npm installed on your system.
1. VS Code Extension Usage
You can also run GraphCore directly inside VS Code as a native extension!
- Open VS Code Command Palette:
Ctrl+Shift+P (or Cmd+Shift+P on macOS).
- Type
GraphCore: Open 4D Code Graph and press Enter.
- GraphCore will automatically scan your active VS Code workspace and render your interactive 4D architectural code graph!
- Click "Scan VS Code Workspace" anytime to rescan changes, or click "Open File in VS Code" in the node inspector to jump directly to code symbols in your editor.
2. Run Web App Dev Server
Start the standalone web app dev server using Vite:
npm run dev
Open your browser and navigate to http://localhost:3000.
3. Installation
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 install
## Usage & Workflow
### 1. Ingesting Codebases
- **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.
### 2. CLI Scanner Utility
For large repositories or automated workflows, run the offline scanner CLI:
```bash
npm run scan -- "C:/path/to/your/project"
This generates a pre-processed JSON graph file saved to dist/custom_project_graph.json.
Tech Stack
Privacy & Security
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.
License
This project is licensed under the MIT License.
