Zip2LLMContext is a powerful web application that converts your project files into optimized context formats for Large Language Models (LLMs). Whether you're working with ZIP archives, GitHub repositories, or web content, this tool intelligently processes and formats your data for seamless AI integration.
-
📦 Multiple Import Methods
- Upload ZIP files directly
- Import from GitHub repositories (with private repo support)
- Scrape website content
-
🤖 AI Model Integration
- Real-time pricing from 500+ models via OpenRouter API
- Dynamic cost estimation based on token count
- Context budget tracking for model limits
-
🎨 Smart Processing
- Automatic filtering of node_modules, binaries, and common excludes
- File type recognition with visual icons
- Intelligent content extraction and formatting
-
📄 Multiple Export Formats
- Markdown (GPT, DeepSeek compatible)
- XML (Claude, Anthropic compatible)
- One-click copy to clipboard or download
-
💻 Modern UI
- Dark theme optimized for developers
- Responsive design
- Real-time statistics and progress tracking
The easiest way to run Zip2LLMContext is using Docker. No need to install dependencies or configure anything!
- Docker installed on your system
- Docker Compose (usually included with Docker Desktop)
# Clone the repository
git clone https://github.com/yourusername/zip2llmcontext.git
cd zip2llmcontext
# Start the application
docker compose up
# Or run in detached mode
docker compose up -dThe application will be available at http://localhost:5700
# Build the Docker image
docker build -t zip2llmcontext .
# Run the container
docker run -p 5700:3000 zip2llmcontext# If running with docker compose
docker compose down
# If running manually
docker stop <container-id>If you prefer to run the application locally without Docker:
- Node.js 18.x or higher
- npm or yarn package manager
# Clone the repository
git clone https://github.com/yourusername/zip2llmcontext.git
cd zip2llmcontext
# Install dependencies
npm install
# Run the development server
npm run devThe application will be available at http://localhost:3000
# Create an optimized production build
npm run build
# Start the production server
npm startOption A: Upload ZIP File
- Click the "Upload ZIP" tab
- Drag and drop your project ZIP file or click to browse
- The app automatically filters out unnecessary files
Option B: Import from GitHub
- Click the "GitHub" tab
- Enter the repository URL (e.g.,
owner/repoor full URL) - Optionally add a GitHub token for private repositories
- Click "Import Repository"
Option C: Scrape Website
- Click the "Website" tab
- Enter the URL of the webpage
- Click "Scrape Website" to extract clean text content
- Browse the file explorer on the left side
- Check/uncheck files you want to include
- Use "Select All" or "Deselect All" for bulk actions
- View file sizes and token estimates in real-time
AI Model Selection
- Search for your target AI model
- View pricing information (input/output costs per 1M tokens)
- See accurate cost estimates based on your content
Output Format
- Choose between Markdown or XML format
- Markdown: Best for GPT models, DeepSeek
- XML: Optimized for Claude and Anthropic models
Context Budget
- Monitor token usage vs. model limits
- Color-coded status indicators (Safe/Warning/Critical)
- Real-time usage percentage
- Click "Copy to Clipboard" for quick paste into AI chats
- Click "Download Megafile" to save as a file
- The output includes all selected files with proper formatting
- Framework: Next.js 15 with React 19
- Language: TypeScript
- Styling: Tailwind CSS v4
- UI Components: shadcn/ui
- File Processing: JSZip
- API Integration: OpenRouter
- Containerization: Docker
zip2llmcontext/
├── app/
│ ├── api/ # API routes for scraping and processing
│ ├── layout.tsx # Root layout with metadata
│ ├── page.tsx # Main application page
│ └── globals.css # Global styles and design tokens
├── components/
│ ├── drop-zone.tsx # File upload interface
│ ├── file-explorer.tsx # File tree and selection
│ ├── github-import.tsx # GitHub repository importer
│ ├── website-scraper.tsx # Web scraping interface
│ ├── model-selector.tsx # AI model selection
│ ├── stats-panel.tsx # Statistics and budget display
│ └── export-panel.tsx # Export controls
├── lib/
│ ├── zip-processor.ts # ZIP file processing logic
│ ├── output-generator.tsx # Format generation
│ └── file-icons.ts # File type icon mapping
├── public/
│ └── logo.png # Application logo
├── Dockerfile # Docker configuration
├── compose.yaml # Docker Compose setup
└── DOCKER.md # Detailed Docker documentation
- 100% Client-Side Processing: All ZIP and GitHub file processing happens in your browser
- No Data Storage: Files are never uploaded to external servers
- Secure API Calls: Website scraping and model pricing use server-side routes to handle CORS
- Optional GitHub Token: Only required for private repositories, stored locally in your session
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Made with ❤️ by Joshua Viars
Port already in use:
# Change the port in compose.yaml or use:
docker compose downBuild fails:
# Clear Docker cache and rebuild
docker compose build --no-cacheModule not found:
# Clear cache and reinstall
rm -rf node_modules package-lock.json
npm installPort 3000 in use:
# Change the port
PORT=3001 npm run devFor more detailed Docker troubleshooting, see DOCKER.md.
⭐ If you find this project useful, please consider giving it a star!