Describe any web app in plain English — get a fully working, downloadable HTML app in seconds.
Prompt2App turns a plain English (or spoken) description into a fully functional, self-contained HTML app — instantly. You type (or say) something like "a daily planner with voice reminders" and the app calls Google Gemini 2.0 Flash, which writes the complete HTML, CSS, and JavaScript. The result renders live in an iframe so you can interact with it immediately, and you can download it as a standalone .html file that runs anywhere — no server, no framework, no dependencies. The alternative is opening a code editor.
Live demo → prompt2app.tanisheesh.in
- AI-powered generation — Google Gemini 2.0 Flash writes complete, functional single-file apps from a natural language prompt; not mockups, actual working code with real browser APIs.
- Voice input — Describe your app by speaking; the Web Speech API transcribes and appends to your prompt, no keyboard required.
- Live interactive preview — Generated apps render instantly in a sandboxed iframe; click buttons, fill forms, and interact with the output before downloading.
- Code view + download — Inspect the raw HTML in a scrollable code tab, then download
prompt2app_preview.htmlfor standalone use.
| Layer | Tech |
|---|---|
| Frontend | Next.js 15 (App Router) · React 18 · Tailwind CSS 3 · Radix UI (shadcn/ui) |
| AI | Google Gemini 2.0 Flash via Firebase Genkit (genkit · @genkit-ai/googleai) |
| Language | TypeScript |
| Icons | Lucide React |
| Hosting | Vercel |
Why Genkit over a raw Gemini API call?
Genkit provides first-class structured output enforcement via Zod schemas — the model is constrained to return { code: string } rather than free-form text, eliminating JSON parsing and regex extraction. It also ships a local dev UI (genkit start) for iterating on prompts without deploying.
Why a single self-contained HTML file? It is the most universally runnable format — no npm install, no server, no framework version conflicts. The user downloads one file and opens it in any browser forever. It also gives the AI a clean, well-scoped task: "produce one complete HTML file" is more reliable than "produce a multi-file React project."
Why a Next.js Server Action instead of an API route?
The Server Action pattern eliminates a separate route file and the fetch + JSON boilerplate. It is fully type-safe end-to-end — GenerateAppInput and GenerateAppOutput are shared TypeScript types, so type mismatches are compile errors. The API key never leaves the server.
Why omit allow-same-origin from the preview iframe?
Generated code is arbitrary AI output. Without allow-same-origin, the iframe's scripts cannot access the host page's DOM, cookies, or localStorage, limiting the XSS surface regardless of what the model produces.
| Document | Description |
|---|---|
| PRD | Product requirements — goals, user stories, non-goals |
| Architecture | System design, data flow, component breakdown |
| Decisions | Every major technical decision and why |
| Setup | Local dev setup, env vars, deployment |
Tanish Poddar — tanisheesh.in · LinkedIn · GitHub