Back to Projects
OpenKombai
📄

OpenKombai

Tags
Open SourceAITooling
Links
Demo GitHub
Tech Stack
Backend, Frontend, AI Engine, Icons, Deployment

Overview

Local-first alternative to Kombai. AI-powered UI generation without data leaks.

The Problem

Designers and developers often struggle with the 'handoff' gap—converting Figma designs into clean, usable code is time-consuming and error-prone. Existing AI tools often require sending proprietary designs to the cloud, raising security and privacy concerns. OpenKombai solves this by providing a local-first, privacy-focused engine that generates high-quality React/Tailwind code directly on your machine, ensuring your IP never leaves your device while speeding up the development workflow.

What I Did

  • Built a local-first, privacy-focused alternative to Kombai that converts UI screenshots into production-ready code
  • Designed and implemented a full-stack monorepo architecture with a Python backend and React frontend
  • Created a Studio UI with drag-and-drop functionality to upload screenshots and preview generated code in real-time
  • Integrated two local LLMs (Llama 3.2 Vision for image understanding, Qwen 2.5 Coder for code generation) via Ollama
  • Shipped a working demo to Vercel and open-sourced the project on GitHub

Tech Stack Details

Backend
Python, FastAPI, Pillow, Ollama
Frontend
React, Vite, Shadcn UI, Tailwind CSS
AI Engine
Llama 3.2 Vision, Qwen 2.5 Coder (via Ollama)
Icons
Lucide React
Deployment
Vercel

Key Learnings

💡
Local LLM IntegrationLearned how to orchestrate multiple local models (vision + code) via Ollama, managing context windows and prompt engineering for multi-step AI pipelines
💡
Full-Stack ArchitectureDesigned a clean separation between FastAPI backend (AI orchestration, image processing) and React frontend (UI/UX, state management)
💡
Privacy-First DesignUnderstood the value proposition of keeping user data on-device—no API keys, no cloud costs, no data leakage
💡
Image-to-Code PipelinesExplored how vision models extract UI structure from screenshots and how code models translate that into React + Tailwind output
💡
Open Source Best PracticesStructured the project for contributors with clear README, modular codebase, and easy local setup