CodeMap AI

💡 Inspiration

Navigating a massive, legacy, or unfamiliar codebase is one of the most time-consuming hurdles developers face every day. Reading through hundreds of nested directories and thousands of lines of code feels like navigating a dense city without a map.

We created CodeMapAI to change that. We asked ourselves: What if developers could instantly visualize any repository as an interactive dependency graph, while having an agentic AI assistant perform security audits, trace data flow, and refactor code on demand?

⚙️ How We Built It

CodeMapAI is architected as a high-performance pnpm monorepo consisting of a React 19 visual frontend and a Node.js/Express backend engine:

• Interactive Mind Map Engine: Powered by React Flow and @dagrejs/dagre layout algorithms. It converts file trees and dependencies into interactive visual graphs where complexity nodes are calculated dynamically.
• Agentic AI Core: Connects to OpenRouter AI models to perform contextual node explanations, multi-node data flow tracing, and automated code refactoring.
• AI Security Audit Scanner: Audits code for SQL injection, XSS vulnerabilities, hardcoded secrets, and memory leaks. It outputs a normalized security posture score $S \in [0, 100]$: $$S = \max\left(0, 100 - \sum_{i=1}^{n} w_i \cdot c_i\right)$$ where $w_i$ represents the severity weight coefficient (Critical $= 25$, High $= 15$, Medium $= 8$, Low $= 3$) and $c_i$ is the count of detected vulnerabilities of severity type $i$.
• Database & Persistence: Built with Drizzle ORM connected to a Supabase PostgreSQL instance with SSL connection pooling.
• DevOps & Containerization: Multi-stage Dockerfile builds, docker-compose orchestration, and automated GitHub Actions CI/CD pipelines.

🚧 Challenges We Faced

1. Cross-Platform Binary Bundling: Building native binaries like Rollup (@rollup/rollup-linux-x64-musl) and LightningCSS across Windows development environments and Alpine Linux Docker containers required custom multi-stage Docker targeting and pnpm workspace resolution.
2. OpenRouter JSON Mode Normalization: Different free AI models handle strict JSON schema output formatting differently. We engineered an auto-fallback completion wrapper that strips markdown code fences and retries standard completions if a model rejects JSON response constraints.
3. Monorepo Split Deployment: Configuring a split deployment where the frontend runs on Vercel's global CDN while the backend Express server operates continuously on cloud containers required robust CORS handling, proxy routing, and dynamic base URL resolution.

🧠 What We Learned

• Visual Software Architecture: Abstracting complex code structures into directed graphs dramatically speeds up developer comprehension and onboarding.
• Resilient AI System Design: Designing AI integrations requires defensive fallback layers to accommodate model variance and rate limits gracefully.
• Modern Monorepo Optimization: Leveraging pnpm workspace catalogs and TypeScript project references ensures strict type safety across micro-packages without build overhead.

✨ What's Next for CodeMapAI

• 🔄 Real-Time Git PR Security Scanning: Automated GitHub Bot integration to post visual graph diffs and security scores on incoming Pull Requests.
• ⚡ Multi-Language AST Parsers: Deep Abstract Syntax Tree (AST) parsing for Rust, Python, Go, and C++ repositories.
• 👥 Real-Time Collaborative Code Mapping: Multi-user multiplayer rooms using WebSockets for team code reviews.

Built With

• docker
• express.js
• node.js
• openai
• pnpm
• react
• typescript
• vite