UI Builder with Gemini AI

About

Chrome Extension that builds complete HTML/CSS/JS websites with Gemini AI — live preview, inspect & edit elements, multi-page management, AI prompt suggestions, and multi-page deployment to Netlify.

Generate HTML with AI:
- Describe the UI in natural language (Vietnamese), and Gemini generates complete HTML (single-file, inline CSS/JS)
- Two AI modes: Flash (fast) and Thinking (deeper reasoning) — switchable via toggle
- Iterative editing — each new prompt automatically includes the current HTML, so AI changes only the requested parts while preserving CSS/structure
- Conversation context — each page keeps its own chat context, so follow-up prompts understand previous context

Inspect & Edit Elements:
- Enable Inspect mode → hover to highlight elements → click to select
- Describe changes for the selected element → AI edits only that element’s `innerHTML`
- Display the CSS selector of the element being edited

Device Preview:
- Preview in 3 sizes: Desktop (100%), Tablet (768px), Mobile (375px)
- Quick switching via toolbar on the preview

Multi-page Management:
- Create, rename (double-click), and delete multiple pages
- Each page is an independent workspace with its own conversation context
- Fast page switching, with full JavaScript support via sandbox blob URL

Link Navigation & Auto Page Creation:
- Click a link in preview → show modal to create a new page or navigate to an existing page
- Page name is derived from the link text (supports Vietnamese diacritics)
- Prompt splitting: user sees a clean prompt, internal instructions are appended automatically
- Smart matching: match by page name + slug fallback (Vietnamese diacritics-safe)

AI Suggestions (Prompt Suggestions):
- Automatic suggestions from presets + AI-powered completion from Gemini
- Ghost text displays suggestions; press Tab to accept
- LRU cache (50 items) to avoid duplicate API calls
- Works in both the main prompt and create-page modal

History & Revert:
- Every generate/edit action is saved (prompt + full HTML)
- Click a history item to view older versions
- Revert — the next prompt continues from the reverted version

Deploy to Netlify (Multi-page):
- Connect using a Netlify Personal Access Token
- One site for all pages — deploy/update under the same URL
- First page → `/index.html` (root), other pages → `/slug/index.html`
- Automatically rewrite links between pages
- Auto-recreate site if it was deleted on Netlify

Other Actions:
- Refresh preview / open in new tab / download HTML / copy HTML
- Lock UI while generating (shake-reject effect on click)
- Auto connect/reconnect to Gemini
- Dynamic Island-style toast notifications