|Docs
Docs/Features/Edit with AI

Edit with AI

Modify your generated code using natural language prompts.

Overview

After generating your initial UI, use Edit with AI to make changes without writing code. Simply describe what you want to change, and Gemini will update your HTML/CSS accordingly.

How to Use

  1. 1

    Open the Input panel

    Click "Input" in the top toolbar or use the sidebar

  2. 2

    Type your edit request

    Describe what you want to change in natural language

  3. 3

    Press Enter or click Edit

    AI will process and update your code

Example Prompts

Styling

"Change the header background to a dark gradient"
"Make all buttons rounded with shadow"
"Use a serif font for headings"
"Add a glassmorphism effect to cards"

Layout

"Make the sidebar fixed on scroll"
"Convert the grid to a 2-column layout on mobile"
"Add more padding to sections"
"Center the hero content vertically"

Content

"Change the headline to 'Welcome to Our Platform'"
"Add a testimonials section with 3 cards"
"Include a FAQ accordion at the bottom"
"Add placeholder images to all cards"

Functionality

"Add a mobile hamburger menu"
"Make the tabs work with Alpine.js"
"Add smooth scroll to anchor links"
"Create a modal for the signup button"

Creating New Pages

Use the @PageName prefix to generate entirely new pages:

// Create a new About page

@About Create this page with team members and company history

// Create a Pricing page

@Pricing Add 3 pricing tiers: Free, Pro, and Enterprise

The AI will generate a complete page matching your existing design system and automatically add it to the navigation.

Using Images

Upload images with your prompt

Click the image icon to attach reference images. The AI will incorporate them into your design or use them as visual references.

"Add this logo to the header" + [uploaded logo.png]

Database-Aware Edits

If you've connected Supabase in Project Settings, AI can generate code that fetches real data from your tables:

"Show a list of users from my profiles table with their email and join date"

→ AI will generate supabase.from('profiles').select() code

Learn more about Supabase integration

Version History

Every edit creates a new version. You can:

  • View all previous versions in the sidebar
  • Restore any version with one click
  • Compare changes between versions

Credit Cost

Edit with AI~10 credits per edit

Each edit request costs ~10 credits, regardless of complexity. New page generation with @PageName also costs ~10 credits.

AI Response in Chat

After each edit, the AI explains what changes it made in the chat window. This helps you understand exactly what was modified without comparing code line by line.

Done!

I've made the header sticky with a frosted glass effect. Added backdrop-blur-xl and bg-black/80. The navigation now stays visible while scrolling.