Mockify is a free, open-source AI image generator for designers, developers, and marketers. It runs entirely in the browser using Pollinations.ai, a free and open image API. No backend, no API keys, no auth, no database required. Generated images and your model settings are saved in your browser's localStorage.
- Auto model mode, Uses the best default model automatically, with automatic fallback if a request fails
- AI models, Flux (photorealistic) and Turbo (fast), selectable per generation
- Prompt enhancement, Adds composition and quality guidance before generation
- Aspect ratio selector, Square, landscape, portrait, and widescreen options (model-dependent)
- Quality control, Per-model quality settings where supported
- Generation history, Browse, search, reload, and delete images saved in localStorage
- Fullscreen lightbox, View generated images with zoom
- Download, Save any generated image locally
- Copy prompt, One-click copy of the prompt used for any image
- Example prompts, Quick-start chips for common product and mockup use cases
- Persistent settings, Model, quality, and size preferences saved to localStorage (legacy settings migrate automatically)
| Category | Technology |
|---|---|
| Framework | Next.js 16 (App Router) |
| Language | TypeScript 5.7 |
| Styling | Tailwind CSS v4 |
| AI Inference | Pollinations.ai (free, client-side) |
| Icons | Lucide React |
| Package Manager | pnpm or npm |
- Node.js 18+
- pnpm or npm
# 1. Clone the repo
git clone https://github.com/MuhammadTanveerAbbas/mockify.git
cd mockify
# 2. Install dependencies
pnpm install
# 3. Start the development server
pnpm dev
# 4. Open in browser
# http://localhost:3000No environment variables are required. Pollinations.ai handles AI inference with no API key.
mockify/
├── public/ # Static assets (favicon)
├── app/
│ ├── globals.css # Global styles and design tokens
│ ├── layout.tsx # Root layout
│ └── page.tsx # Main page, generation, history, settings
├── components/
│ ├── prompt-form.tsx # Prompt input, model/quality/size selectors
│ ├── mockup-result.tsx # Image display, download, copy, fullscreen
│ ├── prompt-history.tsx # History list with search and delete
│ ├── wave-loader.tsx # Loading animation
│ └── empty-state.tsx # Empty state UI
├── lib/
│ ├── generateImage.ts # Pollinations.ai wrapper + model/size config
│ └── utils.ts # Tailwind class utilities
├── package.json
├── tsconfig.json
└── README.md
| Command | Description |
|---|---|
pnpm dev |
Start development server |
pnpm build |
Build for production |
pnpm start |
Start production server |
pnpm lint |
Run ESLint |
pnpm typecheck |
Run TypeScript compiler |
Deploy on Vercel or any static Next.js host. No environment variables are needed.
- Multiple AI model support via Pollinations.ai
- Prompt enhancement
- Aspect ratio and quality controls
- Generation history with search (localStorage)
- Fullscreen lightbox with zoom
- Persistent settings via localStorage
- Image-to-image generation
- Batch generation mode
- Custom prompt templates
Contributions are welcome:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
Distributed under the MIT License. See LICENSE for more information.
Muhammad Tanveer Abbas SaaS Developer | Building production-ready MVPs in 14-21 days
