AI-powered wireframe generator — describe your UI in plain language and get an interactive wireframe instantly. No login, no backend, no data collection.
- 6 default templates — Admin Dashboard, Landing Page, SaaS App, Mobile App, E-Commerce, Blog/CMS
- AI-powered generation — chat with an AI to generate wireframes from a description
- Interactive canvas — zoom, pan, click elements to inspect coordinates and dimensions
- Bring your own key — connect OpenAI, Anthropic, Google Gemini, or Groq with your own API key
- Export to JSON — download the wireframe spec for use in other tools
- Light & dark mode — full theme support
- 100% client-side — no backend, no database, your API key never leaves your browser
Your API key is stored only in memory for the duration of your browser session. It is sent directly to the AI provider's API — never proxied through any server. When you close the tab, the key is gone.
- Node.js 18+
- npm 9+
git clone https://github.com/muhamien/layout-builder.git
cd layout-builder
npm install
npm run devOpen http://localhost:5173.
- Click Connect AI in the top-right corner
- Choose a provider (OpenAI, Anthropic, Google Gemini, or Groq)
- Select a model
- Paste your API key — get an OpenAI key · get an Anthropic key · get a Gemini key · get a Groq key
- Click Save & Connect
- Pick a template from the left panel, or click Blank Canvas
- Type a description in the AI Chat panel, e.g. "Design a SaaS dashboard with a sidebar, stat cards, and a data table"
- Press Enter — the wireframe appears on the canvas
- Click any element to inspect its position and size
- Optionally export the spec as JSON
| Layer | Technology |
|---|---|
| Framework | React 19 + TypeScript |
| Build tool | Vite 6 |
| Styling | Tailwind CSS v4 |
| Components | shadcn/ui (new-york style) |
| Icons | lucide-react |
| Toasts | sonner |
| Animations | tw-animate-css |
| AI | OpenAI / Anthropic / Google Gemini / Groq |
src/
├── components/
│ ├── ui/ # shadcn/ui primitives
│ ├── WireframeCanvas # interactive canvas renderer
│ ├── TemplatePanel # left sidebar with default templates
│ ├── ChatPanel # AI chat + wireframe generation
│ ├── ProviderConfig # AI provider & API key dialog
│ └── ElementInspector # element property inspector
├── lib/
│ ├── ai.ts # provider adapters (OpenAI, Anthropic, Gemini, Groq)
│ ├── templates.ts # default wireframe templates
│ └── utils.ts # cn() helper
└── types/
└── index.ts # shared TypeScript types
Built with the Grid Design System — Forest accent, Stone base palette, Sora typeface, 4px radius. Fully themeable via CSS variables.
See CONTRIBUTING.md.
MIT