CodeHarborAI 🚀

Transform Your Codebase Into Perfect AI Prompts

Features • Getting Started • Usage • Contributing

CodeHarborAI is a modern, privacy-first web application that helps developers transform their codebases into optimized AI prompts. Built with React, TypeScript, and Rspack, it allows you to securely select and combine project files directly in your browser to create comprehensive, context-rich prompts for AI coding assistants like ChatGPT, Claude, and more.

• 🔒 100% Private - All processing happens locally in your browser
• ⚡ Lightning Fast - Advanced caching and batch processing
• 🎯 AI-Optimized - Professional templates and context engineering
• 🎨 Beautiful UI - Modern design with dark mode support
• 🚀 No Installation - Runs directly in your browser

• 100% Local Processing - No code is ever sent to external servers
• Secure File Access - Uses native File System Access API
• No Data Collection - Your code stays private on your machine

• Local Folder Support - Browse and select files/folders from your computer
• GitHub Integration - Load repositories directly from GitHub (10-100x faster)
• Smart Filtering - Exclude files using glob patterns (node_modules, .git, etc.)
• Batch Processing - Process up to 15 files concurrently with progress tracking
• Real-time Statistics - Track file count, size, and line count

• Smart Context Optimizer - AI-powered intelligent context generation with file-aware optimization
• Adaptive Token Management - Automatic compression and summarization based on file importance
• File Intelligence - Auto-detects file types, roles, and relevance scores
• Smart Token Tracking - Real-time token count for GPT-4, Claude, and other models
• Comment Removal - Strip comments to reduce context size and token usage
• File Filtering - Intelligent filtering with customizable patterns
• Preset Management - Save and load your favorite file selections and configurations
• GitHub Integration - Import repositories with intelligent caching (1-hour cache)
• One-Click Copy - Copy formatted output directly to clipboard

Pre-optimized prompts for common development tasks:

• 📝 Code Review - Comprehensive code analysis
• 📚 API Documentation - Generate API docs
• 🏗️ Architecture Analysis - System design review
• 🔒 Security Audit - Security vulnerability assessment
• ⚡ Performance Optimization - Performance bottleneck identification
• 🐛 Bug Investigation - Debug and troubleshooting
• 🧪 Test Generation - Unit and integration test creation
• 📖 Documentation - Technical documentation generation
• ♻️ Refactoring - Code improvement suggestions
• 🔄 Migration - Framework/library migration planning

• Smart Context Optimizer - AI-powered context intelligence system (NEW!)
  • Automatic file analysis and role detection
  • Adaptive formatting based on file type and importance
  • Progressive summarization for large files
  • Token budget management with priority queuing
  • Cross-file dependency mapping
• Context7 Integration - Import external documentation to enrich AI context
• Intelligent File Prioritization - ML-based scoring of file relevance and importance
• Adaptive Compression - Smart truncation at function/class boundaries
• Code Signature Extraction - Auto-extract types, interfaces, and key functions
• Token Optimization - Minification and comment stripping to maximize context efficiency

• Dark/Light Mode - Beautiful UI with automatic theme detection
• Responsive Design - Works seamlessly on desktop and tablet devices
• Real-time Progress - Visual progress indicators with file counts
• Smart Sorting - Prioritize important files automatically
• Keyboard Shortcuts - Efficient workflow with keyboard navigation

• Node.js 16.14.0 or later
• npm or yarn package manager
• Modern Web Browser (Chrome/Edge 86+, Firefox 89+)

1. Clone the repository:

   git clone https://github.com/MontaCoder/CodeHarborAI.git
   cd CodeHarborAI

2. Install dependencies:

   npm install
   # or
   yarn install

3. Start the development server:

   npm run dev
   # or
   yarn dev

4. Open your browser: Navigate to the URL printed by the Rspack dev server (default: http://localhost:8080)

To create a production build:

npm run build
# or
yarn build

The build artifacts will be stored in the dist/ directory. You can preview the production build locally:

npm run preview
# or
yarn preview

1. Choose Your Source

   • Select "Local Folder" to browse files on your computer
   • Or select "GitHub Repo" to import from a repository

2. Load Your Files

   • For Local: Click "Browse Folder" and select your project directory
   • For GitHub: Paste the repository URL (e.g., https://github.com/username/repo)

3. Select a Template (Optional)

   • Choose from 10 professional templates optimized for specific tasks
   • Each template includes pre-configured context and instructions

4. Pick Your Files

   • Use smart sorting to prioritize documentation and key files
   • Apply filters to exclude unnecessary files
   • Select individual files or use "Select All"

5. Configure Advanced Options (Optional)

   • Smart Optimizer: Enable AI-powered context intelligence
   • Token Budget: Set maximum context size for your AI model
   • Context7 Docs: Add external documentation for framework references
   • Remove Comments: Strip comments to reduce token usage
   • Minify Code: Compress code for maximum context efficiency

6. Generate AI Context

   • Click "Generate AI Context" button
   • Review the formatted output with file contents

7. Copy & Use

   • Click "Copy to Clipboard"
   • Paste into ChatGPT, Claude, or your favorite AI assistant

• ✨ Smart Sort: Automatically prioritizes:
  • Documentation files (README, docs/)
  • Configuration files (package.json, tsconfig.json)
  • Entry points (index, main, app)
• Custom Filters: Exclude patterns like *.test.ts, *.spec.js, dist/

Add external documentation to enrich AI understanding:

• Framework documentation (React, Vue, Angular)
• Library references (Express, FastAPI)
• API specifications (OpenAPI, GraphQL)

Intelligent, file-aware context optimization that automatically:

• Analyzes each file's type, role, and importance
• Prioritizes critical files (entry points, configs, docs)
• Adapts formatting based on file characteristics
• Summarizes large files while preserving key information
• Optimizes token usage with progressive enhancement

Configuration options:

• Token Budget: Set max context size (10k-200k tokens)
• Documentation Priority: Always include docs even if over budget
• Structure Map: Generate intelligent project overview
• Code Signatures: Extract types, interfaces, and exports
• Adaptive Compression: Smart summarization for large codebases

• Save your file selections and configurations
• Quickly switch between different project setups
• Export/import presets for team collaboration

• File Type Detection: Auto-identify source, config, docs, tests, etc.
• Role Analysis: Detect entry points, services, components, utilities
• Relevance Scoring: ML-based importance calculation
• Adaptive Formatting: Different strategies per file type
• Token Budget Management: Intelligent file selection within constraints
• Progressive Summarization: Extract key elements from large files
• Structure Mapping: Visual project overview with priority indicators

• 🔍 Get AI assistance with code reviews
• 📝 Generate documentation from existing code
• 🐛 Debug complex issues with full context
• 🔄 Plan refactoring strategies
• 🧪 Create comprehensive test suites

• 📊 Share preset configurations across team members
• 🏗️ Architectural decision documentation
• 🔒 Security audits and vulnerability assessments
• 📚 Onboarding documentation generation
• 🎓 Code learning and knowledge transfer

CodeHarborAI is designed with privacy as the top priority:

• ✅ No Server Communication - All processing happens in your browser
• ✅ No Data Collection - We don't collect, store, or transmit your code
• ✅ No Analytics - No tracking or user behavior monitoring
• ✅ Open Source - Full transparency with open-source code
• ✅ Local Storage Only - Presets saved to browser's local storage

Your code is YOUR CODE. Period.

• Frontend Framework: React 19 with TypeScript
• Build Tool: Rspack 1.5
• Styling: Tailwind CSS 4
• Icons: Lucide React
• State Management: React Hooks (useState, useEffect, useCallback)
• File System: File System Access API
• GitHub API: REST API with Git Tree API for performance

Contributions are welcome! Whether it's bug fixes, new features, or documentation improvements, we'd love your help.

1. Fork the repository
2. Create a feature branch

   git checkout -b feature/AmazingFeature

3. Commit your changes

   git commit -m 'Add some AmazingFeature'

4. Push to the branch

   git push origin feature/AmazingFeature

5. Open a Pull Request

• Follow the existing code style and conventions
• Write clear, descriptive commit messages
• Add comments for complex logic
• Test your changes thoroughly
• Update documentation as needed

• Support for more AI models and token calculators
• Browser extension for quick access
• Team collaboration features
• Export presets as JSON files
• Custom template creation
• Syntax highlighting in preview
• File diff visualization
• Integration with popular IDEs

This project is licensed under the MIT License - see the LICENSE file for details.

Built with love using:

• React - UI framework
• TypeScript - Type safety
• Rspack - Build tool
• Tailwind CSS - Styling
• Lucide - Icons
• File System Access API - Local file access

Special thanks to the open-source community for making this possible!

• GitHub: @MontaCoder
• Issues: Report a bug or request a feature
• Email: contact@codeharborai.com