About SnapSight AI
🎯 Inspiration
Visual information is everywhere, but not everyone can access it equally. Screenshots, documents, and images contain valuable information that should be available to all. We wanted to create a tool that:
- Makes visual content accessible through AI-powered analysis
- Gives users control over costs by supporting multiple AI providers
- Prioritizes privacy by keeping API keys client-side
- Provides flexibility - users choose their preferred provider based on budget and needs
The inspiration came from realizing that while powerful vision AI exists, it's often locked behind single-provider solutions with opaque pricing. We wanted to democratize access.
💡 What It Does
SnapSight AI is a multi-provider vision analysis platform that transforms screenshots and images into accessible content:
Core Features:
- 📸 Multiple Input Methods - Screen capture, file upload, drag & drop, clipboard paste (Ctrl+V)
- 🔍 AI Vision Analysis - Comprehensive image understanding with natural language
- 📝 Smart OCR - Extract all visible text from any image
- 📄 Markdown Export - Save analysis as formatted documents
- 🔊 Text-to-Speech - Convert analysis to natural audio
- 🎨 Image Preview - Review images before sending to AI
Multi-Provider Architecture:
Users can configure any combination of these AI providers:
| Provider | Free Tier | Paid Pricing | Best For | |---------------------|----------------------|---------------------------|-----------------------------------| | Google Gemini | ✅ 1,500 req/day FREE | $0.15/$0.60 per 1M tokens | Cost-conscious users, high volume | | OpenAI GPT-4 Vision | ⚠️ $18 trial credit | $2.50/$10 per 1M tokens | General vision & reasoning | | Claude 3.5 Sonnet | ⚠️ $10/month credit | $3/$15 per 1M tokens | Superior OCR, affordable | | Alibaba Qwen-VL | ⚠️ Free quota | Competitive | Multilingual support |
Key Innovation: Automatic fallback - if your selected provider fails (rate limit, network error, etc.), SnapSight automatically tries other configured providers until one succeeds.
🛠️ How We Built It
Frontend:
- Angular 20+ with standalone components for modern, lightweight architecture
- Angular Material for accessible, responsive UI components
- RxJS Signals for reactive state management
- Marked.js for markdown rendering
Backend:
- Vercel Serverless Functions for scalable, cost-effective API endpoints
- Edge Runtime for low-latency responses
Architecture Pattern:
- Factory Pattern for dynamic provider instantiation
- Strategy Pattern for interchangeable AI providers
- Base Abstract Class to reduce code duplication across providers
Privacy-First Design:
- API keys stored in browser LocalStorage only
- No server-side API key storage
- Client-side provider selection and configuration
Development Workflow:
- Researched 6+ vision AI providers (OpenAI, Claude, Gemini, Qwen, Azure, Baidu)
- Created unified provider interface with VisionProvider abstraction
- Implemented 4 providers with different authentication patterns:
- OpenAI: Official SDK with base64 prefix required
- Claude: Direct fetch() with x-api-key header, no prefix
- Gemini: Query parameter auth ?key=, no prefix
- Qwen: OpenAI-compatible API
- Built Material Dialog settings UI for easy configuration
- Implemented automatic fallback mechanism
- Added comprehensive error handling per provider
🚧 Challenges We Faced
- Base64 Encoding Inconsistencies
- Problem: Different providers require different base64 formats
- OpenAI needs: data:image/jpeg;base64,{data}
- Claude/Gemini need: raw base64 without prefix
Solution: Created ensureBase64Prefix() and removeBase64Prefix() utility methods in base provider class
Authentication Diversity
Problem: Each provider uses completely different auth mechanisms
- OpenAI: Bearer token in Authorization header
- Claude: x-api-key custom header
- Gemini: Query parameter ?key=
- Qwen: OpenAI-compatible but different endpoint
Solution: Abstracted authentication into provider-specific implementations while maintaining unified interface
Cost Transparency
Problem: Vision AI can be expensive, users need to understand costs upfront
Solution:
- Created detailed pricing comparison table
- Default to Gemini (truly free tier)
- Show pricing info in settings dialog for each provider
- Let users control which providers are enabled
Error Handling & Fallback
Problem: Providers can fail for many reasons (rate limits, network, invalid keys)
Solution: Implemented automatic fallback logic that tries all enabled providers in sequence until one succeeds
ES Module Configuration for Vercel
Problem: TypeScript serverless functions caused 500 errors
Solution: Added "type": "module" to api/package.json and created api/tsconfig.json
🏆 Accomplishments That We're Proud Of
✅ First fully multi-provider vision platform - Users choose their provider based on budget/features, not locked into one ✅ Privacy-first architecture - Zero server-side API key storage ✅ Automatic fallback - Never fails if you have multiple providers configured ✅ Cost transparency - Honest pricing with truly free option (Gemini) ✅ Accessibility focus - OCR + TTS makes visual content accessible to all ✅ Clean architecture - Factory + Strategy patterns make adding new providers trivial ✅ Complete UX - Multiple input methods, preview, confirmation, organized tabs
📚 What We Learned
Technical:
- Different vision APIs have vastly different request/response formats
- Base64 encoding is not standardized across providers
- Vercel serverless functions require careful ES Module configuration
- Factory pattern is perfect for multi-provider architectures
- Client-side API key management is viable with LocalStorage
Product:
- Cost matters - Users want control over which AI provider they use
- Free tier is critical - Gemini's 1,500 free requests/day is a game-changer
- Privacy is valuable - Users appreciate keeping API keys in browser
- Fallback is essential - Single-provider dependency is fragile
- Honesty builds trust - Being transparent about pricing is better than overpromising
AI/Vision:
- OCR quality varies significantly between providers
- Claude excels at text extraction
- Gemini offers best cost/performance ratio
- Vision API token costs add up quickly without free tier
🚀 What's Next for SnapSight AI
Short Term:
- 🌐 Add more providers - Azure Computer Vision, AWS Rekognition, Baidu OCR
- 📊 Usage tracking - Show users their API consumption and costs
- 🎨 Custom prompts - Let users define their own analysis templates
- 📱 PWA support - Install as native app with offline capabilities
Medium Term:
- 🔄 Batch processing - Analyze multiple images at once
- 📈 Analytics dashboard - Compare provider performance and costs
- 🌍 Multi-language support - UI translation beyond Spanish prompts
- 🎯 Smart provider selection - Auto-select cheapest available provider
Long Term:
- 🤝 Collaborative analysis - Share and annotate analysis with teams
- 🧠 Learning mode - Train custom models for specific use cases
- ♿ Enhanced accessibility - Screen reader optimization, WCAG AAA compliance
- 🔌 Browser extension - Right-click analyze any image on the web
Vision: Make visual information universally accessible while giving users complete control over costs and privacy.
Built With
- browser
- build:
- frontend:-angular-20+-with-standalone-components-for-better-tree-shaking-ui/ux:-angular-material-for-consistent
- localstorage
- persistence
- reactive
- serverless
- signals
- typescript)
- vercel