Building Localable - A GitHub Pages AI App Builder

🚀 I Built an AI App Builder That Runs 100% in Your Browser (No Server Needed!)

After seeing several "Lovable clones," I decided to build something different – Localable, an AI-powered app builder that's completely browser-based and can be hosted for FREE on GitHub Pages.

Link: https://devidasjadhav.github.io/bootstrap-lovable/

Code: https://github.com/devidasjadhav/bootstrap-lovable

🎯 The Challenge

Most AI app builders require:

• Backend servers ($$$)
• Complex deployments
• Third-party hosting
• Your data passing through their servers

I asked myself: "What if everything ran in the browser?"

💡 The Solution

Localable is a pure static site that:

• ✅ Runs entirely in your browser
• ✅ Works with OpenAI, Google Gemini, AND DeepSeek
• ✅ Hosts FREE on GitHub Pages
• ✅ Stores API keys in memory only (cleared on refresh)
• ✅ Generates Bootstrap + VanillaJS apps in real-time
• ✅ Has NO backend server

🛠️ The Journey (And What I Learned)

Week 1: The Foundation Started with basic OpenAI streaming. Hit my first wall: API calls weren't working because I forgot to wire up the chat callback! Lesson learned: Test early, test often.

Week 2: Security First Initially stored API keys in localStorage. Then realized: that's a security risk. Switched to sessionStorage only. Added HTTPS warnings. Made it privacy-first from day one. Your keys, your control.

Week 3: The Parser Problem The AI would regenerate EVERYTHING on every request. User asks "change button color" → entire app regenerated! 😅

Solution? Context-aware incremental updates. Now it:

• Sends current code as context
• Makes targeted changes only
• Preserves working code
• Saves tokens AND time

Week 4: UI/UX Polish Dark theme was there but... forms were unreadable 🤦. Bootstrap modals had light text on light backgrounds. Spent a solid day fixing EVERY color inconsistency.

Added resizable panels with drag handles, collapsible sections, and a loading animation. Details matter.

🎨 What Makes It Different?

vs. Other Lovable Clones:

1. GitHub Pages Ready - Deploy in 2 minutes, completely free
2. Multi-Provider - Not locked to one AI provider
3. Privacy-First - No data leaves your browser (except API calls)
4. No Backend - Zero infrastructure, zero maintenance
5. Smart Updates - Incremental code changes vs. full regeneration

📊 The Results

v0.4 (stable) shipped with:

• 3 AI providers (OpenAI, Gemini, DeepSeek)
• Real-time streaming responses
• Live preview with sandboxed iframe
• Smart code parser with context awareness
• Resizable/collapsible UI panels
• Complete dark theme
• Project management (IndexedDB)
• ZIP export functionality
• Zero hosting costs

🤔 Key Takeaways

1. Static > Dynamic for this use case
2. Security Without Servers
3. Context is King
4. UI Polish Matters
5. Multi-Provider = Future-Proof

🔮 What's Next?

Considering:

• Visual diff viewer
• Version history / undo
• Code editor with syntax highlighting
• Template library
• Import from ZIP

📢 Why Share This?

I see too many AI tools that:

• Lock you into their platform
• Charge monthly fees
• Store your data
• Require complex deployments

Localable proves you don't need any of that.

It's open, free to host, privacy-respecting, and works with YOUR choice of AI provider.

💭 Final Thought

The best tools are the ones that empower users, not extract from them.

Building Localable taught me that sometimes the best solution is the simplest one: just JavaScript, no strings attached.

🔗 Try it yourself (GitHub Pages deployed)

💬 What's your experience building with AI? Would love to hear your thoughts!

Tech Stack: Vanilla JavaScript | Bootstrap 5 | IndexedDB | GitHub Pages | OpenAI | Google Gemini | DeepSeek

 #AI #WebDevelopment #OpenSource #JavaScript #Innovation #BuildInPublic #Privacy #GitHub #OpenAI #DeepSeek #Gemini #NoCode #LowCode #DeveloperTools