AI Assistant
Use natural language to edit elements and create new components with the AI-powered assistant.
The AI Chat Panel
The AI Assistant lives at the bottom of the Visual Editor sidebar. It understands natural language requests and can modify your page in real-time.
AI Assistant
EditCreate
Make the headline bigger and bold
Done! I've increased the font size and made the text bold.
🎨 Setting fontSize...
Edit vs Create Mode
The AI Assistant has two modes, controlled by the toggle buttons:
Edit Mode
Active when you have an element selected. AI changes apply to the selected element.
Use for: Changing text, colors, sizes, spacing, and other properties of existing elements.
Create Mode
Active when no element is selected. AI generates new components from your description.
Use for: Adding new sections, creating components, building layouts.
Example Prompts
Edit Mode Examples
"Make the text larger"
"Change the color to blue"
"Add 20px padding"
"Make this bold and centered"
"Change the background to a gradient"
"Update the text to say 'Welcome to our store'"
"Add a border radius of 8px"
"Make the image wider"
Create Mode Examples
"Add a testimonials section with 3 customer reviews"
"Create a hero section with a headline, subtitle, and CTA"
"Add a pricing table with Basic, Pro, and Enterprise tiers"
"Create a features grid with icons and descriptions"
"Add a FAQ section with 5 questions"
"Create a team section with 4 member cards"
"Add a newsletter signup form"
AI Tools
The AI has access to these tools to modify your page:
✏️ setText
Change text content
🎨 setProperty
Change CSS properties
💅 applyStyles
Apply multiple styles
🔗 setLink
Change link URLs
🖼️ setImageSrc
Change image sources
✨ createComponent
Generate new sections
🔄 regenerateComponent
Remake a component
🗑️ deleteComponent
Remove components
💡 Tips for Better Results
- • Be specific: "Make padding 24px" works better than "add more space"
- • AI sees current styles, so relative changes like "make it bigger" work
- • For complex components, describe layout, colors, and content
- • Chat history clears when you switch elements (to keep context relevant)