LLM Context Crafter
Tired of manually copying files for ChatGPT? Built this to solve my own problem. Now it intelligently filters your codebase, counts tokens in real-time, and generates perfectly formatted markdown—all in your browser.
Click to view full size
Key Features
Select directories using the File System Access API—no uploads needed
Real-time token counting with OpenAI's tiktoken (o200k_base encoding)
Smart exclusions: automatically filters node_modules, build artifacts, images
Shift-click range selection and partial folder selection for precise control
Flatten nested directories to single-level with ^ delimiters
Save configurations per repository—remembers your selections
ASCII tree generation preserves crucial directory structure context
Virtualized lists handle 10,000+ files without breaking a sweat
Dark/light mode because developers have preferences
ZIP download fallback when File System API isn't available
Technical Architecture
Frontend Framework
UI & Styling
Core Libraries
Performance
Browser APIs
Testing & DX
Technical Challenges
Token counting 1,000+ files without freezing the browser. Parallel processing in chunks of 10 + caching = instant counts.
File System API browser support. Built a ZIP download fallback that works everywhere.
Virtualizing a tree view with expand/collapse. Custom implementation with react-window got us 60fps scrolling.
Glob pattern matching in the browser. Ported minimatch patterns to work client-side.
Configuration persistence across sessions. IndexedDB + smart hashing keeps selections intact.
Results & Impact
Reduced context preparation time from 30+ minutes to under 30 seconds
Successfully handles repositories with 50,000+ files
Zero backend required—runs entirely in the browser
Used daily by developers preparing code for AI assistants