CCInsight
No description available
Ask AI about CCInsight
Powered by Claude ยท Grounded in docs
I know everything about CCInsight. Ask me about installation, configuration, usage, or troubleshooting.
0/500
Reviews
Documentation
CCInsight
CCInsight โ Interactive Source Code Visualization & Bilingual Annotation Tool
Built on top of GitNexus. Core capability: Parse and index any code repository, visualize its structure through interactive knowledge graphs, overlay bilingual annotations on source code, and leverage AI assistance to help developers efficiently understand complex codebases.
็ฎไฝไธญๆ | English
What Is CCInsight
CCInsight is an interactive source code visualization and bilingual annotation tool. Core capabilities: parse and index any code repository, visualize its structure through interactive knowledge graphs, overlay bilingual annotations on source code, and leverage AI to help developers efficiently understand complex architectures.
Annotations are stored in independent JSON files โ the original source code is never modified.
Features
Core Features
- Interactive Knowledge Graph โ Sigma.js WebGL rendering, smooth interaction with tens of thousands of nodes, click nodes to jump directly to source code
- Bilingual Source Code Annotation โ Overlay Chinese explanations on source code without modifying the original, supports English/Chinese toggle
- Tier-based Navigation โ Layered by importance (Core โ Communication โ Command โ Tool layers), prioritize the most critical code
- Smart Code Search โ BM25 full-text search + graph database queries, supports searching annotation content
- AI-assisted Interpretation โ Integrate with OpenAI/Gemini/Ollama LLMs, select code blocks for auto-generated explanations
Technical Highlights
- Annotation Layer Separation โ Source code remains untouched, annotations in independent JSON files with independent version control
- Tier Priority Strategy โ 20 core files cover 80% of core concepts, quickly master the overall architecture
- Multi-language Parsing โ Tree-sitter supports incremental syntax parsing for 20+ programming languages
- Automatic Backend Integration โ Auto-detect and connect to backend on startup, one-click graph loading
Quick Start
Prerequisites
- Node.js >= 20.0.0
- pnpm >= 9.0.0
Install
# Clone the repository
git clone https://github.com/WmjXiaoJun/CCInsight.git
cd CCInsight
# Install dependencies (monorepo workspaces)
pnpm install
# Build all packages
pnpm run build
Run
Option 1: One-click startup (recommended)
pnpm run dev # Frontend (http://localhost:5173)
pnpm run dev:backend # Backend (http://localhost:4747)
Option 2: Separate terminals
# Terminal 1 โ Backend
pnpm run dev:backend
# Terminal 2 โ Frontend
pnpm run dev:frontend
Option 3: Connect to a remote backend
If the backend is already running on another machine:
http://localhost:5173?server=http://localhost:4747
Load a Code Repository
- Click Analyze New Repository in the UI and select the target repository path
- Wait for indexing to complete (backend parses code structure and builds the knowledge graph)
- Start exploring!
Architecture Overview
CCInsight/
โโโ frontend/ # React + Vite frontend
โ โโโ src/
โ โ โโโ components/ # UI components
โ โ โโโ annotations/ # Annotation loader & type definitions
โ โ โโโ hooks/ # React Hooks
โ โ โโโ services/ # Backend communication
โ โ โโโ config/ # Configuration & constants
โโโ backend/ # Node.js backend (GitNexus core)
โ โโโ src/
โ โ โโโ server/ # HTTP API server
โ โ โโโ cli/ # CLI tools
โ โ โโโ core/ # Core engine (graph DB, embeddings, clustering)
โ โ โโโ mcp/ # MCP protocol server
โโโ gitnexus-shared/ # Shared type definitions
โโโ annotations/ # Source code annotations
โ โโโ tier1/ # Core layer (~20 files)
โ โโโ tier2/ # Communication layer
โ โโโ tier3/ # Command layer
โ โโโ tier4/ # Tool layer
โโโ docs/ # Project documentation
Tier Strategy
| Tier | Name | Files | Description |
|---|---|---|---|
| T1 | Core Layer | ~20 | Core logic, tool interfaces, job state machines |
| T2 | Comm. Layer | ~10 | API clients, server, context management |
| T3 | Command Layer | ~10 | Slash command system, REPL interaction |
| T4 | Tool Layer | ~30 | File system, search, network, sub-agents |
Learning path: Start from T1 Core Layer โ understanding 20 files gives you 80% of the architectural picture.
CLI Commands
ccinsight analyze <path> # Index a repository
ccinsight serve # Start API server
ccinsight wiki <output> # Generate architecture documentation
ccinsight clean # Clean up index data
ccinsight status # Check server status
Tech Stack
| Layer | Technology |
|---|---|
| Frontend | React 18 + TypeScript |
| Build tool | Vite 5 |
| Graph | Sigma.js 3 + Graphology |
| Backend | Express 4 |
| Parser | Tree-sitter (20+ languages) |
| Graph DB | SQLite + lbug |
| AI/LLM | LangChain.js |
| MCP Protocol | @modelcontextprotocol/sdk |
Roadmap
- Phase 1: Project scaffold and basic architecture
- Phase 2: Core UI customization and localization
- Phase 3: Bilingual annotation system framework
- Phase 4: Tier 1 core file annotations
- Phase 5: Tier 2-4 annotation coverage
- Phase 6: AI-assisted annotation generation
- Phase 7: Documentation generator enhancements
- Phase 8: Open source release and community building
License
MIT License โ see LICENSE file.
Acknowledgements
- GitNexus โ This project is built on top of GitNexus source code
- Sigma.js โ Interactive graph visualization
- Tree-sitter โ Incremental syntax parsing
- LangChain.js โ LLM integration framework
