Snap UI is an AI-driven, no-code user interface generator that transforms natural language prompts into clean, production-ready React + Tailwind CSS components. It empowers developers, designers, and businesses to instantly build UI layouts, edit them visually, and preview the output with live code.
- Next.js — React framework for SSR and fast frontend rendering
- Tailwind CSS — Utility-first styling
- Convex — Real-time backend for data sync, auth, and deployments
- Gemini AI (Google) — Generative AI for prompt-to-code logic
- Framer Motion — Smooth UI animations
- Shadcn UI — Prebuilt components
- CodeMirror — Embedded VS Code-style live code editor
- PayPal SDK — For future monetization/payments (optional)
To run Snap UI locally, create a .env.local file with the following variables:
NEXT_PUBLIC_GOOGLE_CLIENT_ID=your_google_client_id_here
CONVEX_DEPLOYMENT=your_convex_deployment_id
NEXT_PUBLIC_CONVEX_URL=https://<your-convex-url>.cloud
NEXT_PUBLIC_GEMINI_API_KEY=your_google_gemini_api_key
NEXT_PUBLIC_PAYPAL_CLIENT_ID=your_paypal_client_id (optional)- NEXT_PUBLIC_GOOGLE_CLIENT_ID: For user login via Google OAuth (NextAuth or Firebase depending on setup).
- CONVEX_DEPLOYMENT: Your Convex deployment name used for real-time data sync and backend auth.
- NEXT_PUBLIC_CONVEX_URL: Public-facing Convex endpoint for client-side operations.
- NEXT_PUBLIC_GEMINI_API_KEY: Google Gemini API for AI prompt handling and code generation.
- NEXT_PUBLIC_PAYPAL_CLIENT_ID: (Optional) Used if enabling payment functionality inside the UI (for premium components or export access).
git clone https://github.com/your-username/snap-ui.git
cd snap-uinpm install
# or
yarn installCreate a .env.local file and paste your secrets as shown above.
npm run dev
# or
yarn devOpen http://localhost:3000 to see Snap UI in action.
- 🧠 AI-Powered UI Generation — Describe your UI and see it built instantly.
- 🧩 Drag-and-Drop Editor — Visually refine the layout and component structure.
- 🧑💻 Live Code Editor — Edit the generated code live using CodeMirror (VS Code feel).
- 🪄 AI Theme & Design Suggestions — Gemini suggests better UX patterns.
- 📱 Mobile/Desktop Preview — Instantly switch between responsive modes.
- 🔄 Convex Sync — Real-time save/load of UI sessions.
- 🔐 Google Auth — Login to save your work and manage sessions securely.
- 💵 (Optional) PayPal Integration — Monetize export/download features.
snap-ui/
├── components/ # UI components like Navbar, Hero, Editor, Sidebar
├── pages/ # Next.js routes
├── lib/ # API helpers, auth configs
├── convex/ # Convex backend functions
├── public/ # Static assets and logos
├── styles/ # Tailwind & global styles
├── utils/ # Prompt parsers, Gemini wrappers
└── .env.local # Your secrets (not pushed)
Prompt: "Build a pricing section with three cards and a dark theme."
✨ Gemini will generate:
- A
sectionwith Tailwind CSS layout - Three cards using
shadcn/uicomponents - Proper spacing, dark background, responsive styles
- User types prompt → "Make a navbar with a call to action."
- Gemini AI interprets → returns structured UI components.
- Convex stores session data in real-time.
- CodeMirror renders the generated code live.
- User can edit visually or tweak the code.
- Optional: User exports code or saves to profile via Google login.
- 🌍 Multi-language support
- 📦 Export to GitHub or CodeSandbox directly
- 🧠 Fine-tuned Gemini for domain-specific UI patterns
- 🧑🤝🧑 Live collaboration mode (like Figma)
- 🗂️ Marketplace for UI templates/components
- Fork the repo
- Create your branch (
git checkout -b feature/awesome) - Commit your changes
- Push and open a PR 🙌
MIT © [Tushar Gautam]