AI Chat: Build And Edit By Talking
title: AI Chat: Build And Edit By Talking description: How to use the Protuno Pro in-editor AI chat to generate a Proton widget from a description, make structural changes, and refine a design through conversation without leaving Elementor.
The Proton widget includes an in-editor AI chat that lets you build sections, make structural changes, and refine designs by describing what you want in plain English. The AI reads the widget's current HTML, CSS, and JavaScript, applies your requested changes, and the updated design appears live on the canvas.
Opening The AI Chat
- Select a Proton widget on the Elementor canvas
- Click the Style tab in the left panel
- Click Edit With AI
The AI chat panel opens alongside the canvas. If the widget already has content, the AI reads it before responding. If the widget is empty, the AI starts with a blank canvas.
Building A New Section
Type a description of what you want to build. Be specific:
- Section type: hero, pricing table, feature grid, testimonials, team section, FAQ accordion, contact form, etc.
- Content: what text, how many columns or cards, what the buttons say
- Visual style: color scheme, dark or light, corner radius, spacing feel (airy vs dense)
Example:
"A two-column hero section. Left column: a large H1 headline, a short subtitle, and a primary call-to-action button. Right column: a full-height image. White background, dark text. The button uses a dark fill with white text and rounded corners."
The AI generates the HTML, CSS, and JavaScript. The result appears on the canvas. Every text, link, and image in the generated design automatically becomes a slot in the Content tab.
Editing With Follow-Up Messages
After the AI generates a section, you can refine it through the same conversation:
Change visual properties:
"Make the background dark navy. Change the button to an outlined style with navy text."
Add or remove elements:
"Add a row of three feature icons below the headline, each with an SVG icon, a bold label, and one sentence of text."
Adjust layout:
"Switch to a single-column layout on mobile. The image should go below the text."
Change copy:
"Change the headline to 'Ship faster with AI' and the button to 'Start for free'."
Each follow-up message is applied to the current state of the widget. The AI does not start from scratch, it reads what it built and modifies it.
What The AI Can Do
| Task | Supported |
|---|---|
| Generate a section from a text description | Yes |
| Change colors, fonts, spacing | Yes |
| Add or remove elements | Yes |
| Change the grid or column layout | Yes |
| Add responsive CSS breakpoints | Yes |
| Write Twig expressions for dynamic data | Yes |
Add a form with data-atom-form | Yes |
| Load an external library (GSAP, Swiper) | Yes |
| Edit an existing section | Yes |
| Describe a change using the target element | Yes |
Using Reference Images And Screenshots
You can describe a design you want the AI to replicate:
"Look at this screenshot, build me a pricing section that matches this layout."
The AI analyzes the image and generates HTML and CSS to approximate the design. This is especially useful when converting a design mockup or referencing a competitor's layout.
Tips For Better Results
Be specific about structure, not just style. "Make it look nice" gives the AI too much latitude. "Three columns, each with an icon, a 3-word heading, and 20 words of body text" gives it a clear target.
Iterate in small steps. Ask for one change at a time if the section is complex. "Add a fourth pricing card matching the style of the other three" is easier for the AI to get right than ten simultaneous changes.
Ask the AI to explain what it built. "What CSS classes did you use for the grid?" gives you context for writing follow-up instructions or for editing the code yourself.
Frequently Asked Questions
Does the AI chat remember previous sessions? No. The chat history is per-session. When you close and reopen Edit With AI, the AI reads the current widget code as its starting context, but does not have memory of your prior conversation.
Can I undo an AI change? Yes. Use Elementor's standard undo (Ctrl+Z / Cmd+Z) to revert the widget to its state before the last AI change.
The AI made a change I do not like. What should I do? Either use undo, or describe the correction in the chat: "Revert the background to white" or "Remove the image you just added." The AI can reverse specific changes without affecting the rest of the design.
Can the AI build a complete page, not just a section? The in-editor AI chat operates on one widget at a time. For building full pages or entire sites through conversation, use an external AI client connected via MCP, see Connect Any AI Client Over MCP.