Docs

AI Assistant

Use natural language to edit elements and create new components with the AI-powered assistant.

Quick answer

The AI Assistant lives at the bottom of the Visual Editor sidebar. There is no mode to switch: just type what you want, and it either edits the selected element, edits a section you describe, or creates a new section from scratch. Everything it builds stays fully editable in the property sidebar.

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
Make the headline bigger and bold

Done! I've increased the font size and made the text bold.

🎨 Setting fontSize...

One Assistant, No Modes

There's no Edit/Create toggle to flip. You just type what you want, and the assistant works out the right action from your message and whatever you have selected. It handles three kinds of request:

Type anything…
routes to
Element selected
Edits the selected element
“Make this heading bigger and teal”
Names a section
Edits that section by description
“Tighten up the pricing copy”
Asks for something new
Creates a new section
“Add a testimonials section below”

No mode toggle — the assistant picks the action from what you type and what you have selected.

Edit the selected element

When you have an element selected, your request applies to it.

Example: "Make this heading bigger and teal."

Edit a section by description

Describe a section that already exists and the assistant finds and updates it — no need to select it first.

Example: "Tighten up the copy in the pricing section."

Create something new

Ask for a new section and it builds one from your description.

Example: "Add a testimonials section below the hero."

Everything stays editable

Whatever the assistant builds or changes stays template-bound and fully editable in the property sidebar — it never drops in hand-written markup you can't adjust later.
AI-built section
Properties
Font size18px
Color#1f2937
Padding24px
Fully editable

A section the assistant generates behaves exactly like one you built by hand — every property is yours to tweak.

Example Prompts

Editing What's Selected

"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"

Creating New Sections

"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
🚀 createSection
Add template sections
🔄 swapTemplate
Swap section template
🗑️ 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)
Selecting ElementsStyling Properties
AI Assistant | Prometora Docs