Ask AI

Do the usual composer work — add a component, move it, delete it, change how it looks — by describing the change in ordinary language. Ask AI is targeted: it performs the same operations the palette and the Modify drawer already perform, so you do not have to learn the interface to make those edits.

What Ask AI is for

Ask AI is a second way to do the work you already do in the composer. It does not invent a new kind of edit. It does not write a page from a mood. It performs the same operations the mouse performs: drop a component, move it, delete it, or change a setting in the Modify drawer.

The benefit is that you can say those operations in ordinary language instead of learning RuleCMS's interface. You do not have to find the right card on the palette, hover until the drop indicator appears, then open the drawer and hunt for Padding. You can type “add a heading above the first row” or “give that image 32 pixels of padding on desktop and 16 on phones”, and the composer does the same work a drag-and-drop plus a drawer click would have done.

The result is indistinguishable from a manual edit. A component Ask AI adds looks like one you dropped — including your project's starter styles for new items. A padding it sets shows up in the drawer with the right unit selected. Undo treats the whole request as one step. Autosave and publish treat it as ordinary composer work.

Ask AI is targeted on purpose. It is at its best when you already know the change you want — add this, move that, make this setting this value. It is not a designer you brief with “make me a banner” or “improve this page.” Those requests are out of scope today, and asking them will disappoint you. Use the lists below as the whole menu.

How to use it

Open a widget in the composer. Ask AI is for widgets only right now — collections are not supported yet.
Look for the Ask AI button in the lower-right of the canvas. Click it to open the panel. The canvas stays visible above the panel so you can see each change land.
Type a request in ordinary language and press Enter. Shift-Enter starts a new line. While a request is running, Send becomes Stop.
Watch the canvas. Changes apply as soon as they are made — there is no accept or reject step. The transcript lists what was applied, in words.
If the result is not what you meant, use Undo in the composer toolbar. One Ask AI request is one undo step, even when it made several changes.

If you have unsaved edits, Ask AI waits for autosave to finish before it starts, so it never works from a stale copy of the widget. If it cannot tell which row or component you mean, it will ask rather than guess.

What you can ask

Everything below is something you could also do with the palette, the canvas, or the Modify drawer. If it is not on this page, Ask AI cannot do it.

Adding components

Ask AI can drop any component that is on your palette — the ones RuleCMS ships, and any component from a component library your team has enabled. A new drop gets the same starter styles a manual drop would: your project's defaults for that component, that row, and that column.

You choose where it goes:

You say	What happens
Add a text component above the first row	A new row is created above that row, with the component in it.
Add an image below the heading	A new row is created below that row.
Put a button to the left / right of that image	The component is added as a new column in the same row.
Add a divider at the end of the second row	The component is appended as the last column of that row.
Add a text component at the end	A new row is appended after everything currently on the widget.

There is no “add an empty row” request. A row exists because a component was dropped above, below, or at the end — the same as dragging from the palette.

The components RuleCMS ships, and the settings Ask AI can change on each one:

Component	Settings Ask AI can change
Text	Content Text, Enclosing Tag, Links, Class Names & Styles
Image	Media Selector, Image Alt Text, Image Intrinsic Width, Image Intrinsic Height, Image Sizes, Image Loading, Image Fetch Priority, Cloudinary Transformations
Video	Video Selector, Poster Image, Video Controls, Video Autoplay, Video Loop, Video Muted, Video Plays Inline, Video Preload, Video Intrinsic Width, Video Intrinsic Height, Video Transformations
Icon	Icon
Button	Button Style, Label, Link, Icon, Icon Position, Disabled
Divider	Line Style, Thickness
Embed	Embed URL, Embed Title, Aspect Ratio, Loading
List	List Items, List Kind, Marker Style, Numbering Start, Reversed Numbering, Links, Class Names & Styles
Accordion	Summary, Detail, Open by Default, Summary Heading Level, Links, Class Names & Styles
Custom Component	Component Name, Props

Team-library components work the same way: Ask AI can add them and change the settings those components expose. Those settings are documented by whoever maintains the library, not on this site.

Moving, copying, and duplicating

You say	What happens
Move the heading above the image	The column is taken from where it is and placed at the new position — above, below, left of, right of, or at the end of a row.
Copy that card to the bottom	A second column is created at the new position. The original stays where it is.
Duplicate this column	A copy is placed beside the original, in the same row.
Duplicate this row	A copy of the whole row — every column in it — is placed immediately below.

Removing

You say	What happens
Delete that column / that image / the button	The column is removed. If it was the only column in its row, the empty row is removed too.
Delete this row	The row and everything in it are removed.

Delete is applied immediately, like every other Ask AI change. Undo brings the row or column back. There is no confirm step, and there is no “empty the whole widget” request — Ask AI will not reset the canvas.

Changing how things look

Any setting you can change in the Modify drawer, Ask AI can change — on the component, on the column around it, on the row, or on the widget as a whole. You can ask for one value everywhere, or different values for phone, tablet, and desktop. You can also point a setting at a CSS variable instead of a typed number or colour, the same way the drawer's Value / CSS variable toggle does.

The lists below are complete. If a setting is not here, Ask AI cannot set it.

On the selected component

These are the settings that belong to the component itself — the words, the picture, the button label. Each component offers a different set; they are listed under Adding components and documented with the component.

Typical requests:

“Change the heading to Welcome back” — Content Text on Text.
“Make that text a heading 2” — Enclosing Tag on Text.
“Set the button label to Get started and link it to /signup”.
“Use the hero image we already uploaded” — Media Selector, for a file that is already in your media library. Ask AI cannot upload a new file.

On the selected column — the box around the component

Spacing, size, colour, borders, typography, visibility. Every column offers the same list. This is the drawer section labelled Selected Column.

Setting	What it does
Margin	The empty space pushed outward from the edges of the column, separating it from its neighbours.
Padding	The cushioning inside the column, between its edges and the content sitting in it.
Width	How wide the column should be across the page.
Height	How tall the column should be.
Min Width	A floor for the column's width — it will never shrink narrower than this.
Max Width	A ceiling for the column's width — it will never grow wider than this.
Min Height	A floor for the column's height — it can grow taller, but never shorter.
Max Height	A ceiling for the column's height — it will never grow taller than this.
Overflow	What happens to content that is too big for the column: show it, hide it, or make it scroll.
Overflow X	What happens to content that is too wide for the column.
Overflow Y	What happens to content that is too tall for the column.
Pointer Events	Whether clicks and taps land on this column or pass through it to whatever sits behind.
Border	A visible line drawn around the edge of the column.
Border Radius	How rounded the corners of the column are.
Box Shadow	A soft shadow behind the column that makes it look raised off the page.
Horizontal Alignment	Where the column's children sit across its width when the column is a flex container.
Vertical Alignment	Where the column's children sit from top to bottom when they are not all the same height.
Flex Wrap Setting	Whether children that no longer fit wrap onto a new line, or stay on one line and squeeze.
Align Content	How multiple wrapped lines of children pack from top to bottom inside the column.
Flex Direction	The main axis children follow inside the column: row, column, or reversed.
Gap	The space between the items inside the column, when the column arranges them in a row or grid.
Background Color	The colour that fills the column behind its content.
Background Image	A picture painted behind the column content, with control over how it is scaled, placed, and tiled.
Text Color	The colour of the text in the column, which everything inside it inherits.
Typography	The group of nine text settings on the column: family, size, weight, style, line height, letter spacing, alignment, decoration, and transform.
Font Family	Which typeface the text in the column is set in.
Font Size	How large the text in the column is.
Font Weight	How bold or light the text in the column is.
Font Style	Whether the text in the column is upright or italic.
Line Height	How much vertical space each line of text occupies, which sets the gap between lines.
Letter Spacing	How much space sits between individual characters.
Text Align	Whether the text in the column lines up on the left, the right, the centre, or both edges.
Text Decoration	Lines drawn through the text: underline, strikethrough, or overline.
Text Transform	Force the text into capitals, lower case, or title case without retyping it.
Opacity	How see-through the whole column is, from fully solid to invisible.
CSS Classes	Attach your own CSS class names to the column so your site's stylesheet can style it.
Hide Column	Remove the column from the page entirely, either everywhere or only on chosen device sizes.

Typical requests:

“Give the image 32px padding on desktop and 16px on phones”.
“Make the heading colour #1a4f8a”.
“Hide that banner on phones” — Hide Column.
“Set the column width to 50%”.

On the entire row

How the columns in a horizontal band sit together — alignment, wrapping, gap — plus the same family of box styles the column has. This is the drawer section labelled Entire Row.

Setting	What it does
Row Margin	Space around the outside of the row band.
Row Padding	Space inside the row, between the row edges and its columns.
Row Width	How wide the row band is.
Row Height	How tall the row band is.
Row Min Width	The smallest width the row is allowed to shrink to.
Row Max Width	The largest width the row is allowed to grow to.
Row Min Height	The smallest height the row is allowed to shrink to.
Row Max Height	The largest height the row is allowed to grow to.
Row Overflow	What happens when row content does not fit the row box.
Row Overflow X	Horizontal overflow behaviour for the row.
Row Overflow Y	Vertical overflow behaviour for the row.
Row Pointer Events	Whether clicks and taps land on this row or pass through it to whatever sits behind.
Row Border	Border around the row band.
Row Border Radius	How rounded the row corners are.
Row Box Shadow	Drop shadow behind the row band.
Horizontal Alignment	Where the columns sit across the row, and how any leftover space between them is shared out.
Vertical Alignment	Where the columns sit from top to bottom within the row when they are not all the same height.
Flex Wrap Setting	Whether columns that no longer fit drop onto a new line, or stay on one line and squeeze.
Align Content	How multiple wrapped lines of columns pack from top to bottom inside the row.
Row Flex Direction	The main axis columns follow inside the row: row, column, or reversed.
Gap	The space between columns inside the row.
Row Background Color	Fill colour behind the row band.
Row Background Image	A picture painted behind the whole row band.
Row Text Color	Default text colour inherited by content inside the row.
Row Typography	Font and text settings inherited by content inside the row.
Row Font Family	Font family inherited from the row.
Row Font Size	Font size inherited from the row.
Row Font Weight	Font weight inherited from the row.
Row Font Style	Font style (for example italic) inherited from the row.
Row Line Height	Line height inherited from the row.
Row Letter Spacing	Letter spacing inherited from the row.
Row Text Align	Text alignment inherited from the row.
Row Text Decoration	Text decoration inherited from the row.
Row Text Transform	Text transform inherited from the row.
Row Opacity	Transparency of the entire row band and its contents.
Row CSS Classes	Attach your own CSS class names to the row's flex wrapper so your site's stylesheet can style the band.
Hide Row	Hide the entire row for one or more device sizes.

Typical requests:

“Centre the columns in the second row” — Horizontal Alignment.
“Put 24 pixels between the columns” — Gap.
“Give that row a light grey background”.
“Stop the row wrapping” — Flex Wrap.

On the widget as a whole

The box every row sits inside — the same kinds of settings as Widget Settings in the gear menu. Some of these (size, spacing, overflow) are left off the editing canvas so drag and drop keeps a full surface; open Preview to see them applied, just as with a manual edit.

Setting	What it does
Widget Margin	Space around the outside of the whole widget, between it and the host page.
Widget Padding	Space inside the widget edges, before the first row starts.
Widget Width	How wide the whole widget is on the host page.
Widget Height	How tall the whole widget is.
Widget Min Width	The smallest width the widget is allowed to shrink to.
Widget Max Width	The largest width the widget is allowed to grow to on the host page.
Widget Min Height	The smallest height the widget is allowed to shrink to.
Widget Max Height	The largest height the widget is allowed to grow to.
Widget Overflow	What happens when widget content does not fit the widget box.
Widget Overflow X	Horizontal overflow behaviour for the whole widget.
Widget Overflow Y	Vertical overflow behaviour for the whole widget.
Widget Pointer Events	Whether clicks and taps land on this widget (or layer) or pass through it to whatever sits behind.
Widget Border	Border around the whole widget.
Widget Border Radius	How rounded the widget corners are.
Widget Box Shadow	Drop shadow behind the whole widget.
Widget Gap	The vertical space between the rows of the widget.
Widget Background Color	Fill colour behind every row of the widget.
Widget Background Image	A picture painted behind every row of the widget.
Widget Text Color	Default text colour inherited by content inside the widget.
Widget Typography	Font and text settings inherited by content inside the widget: family, size, weight, style, line height, letter spacing, alignment, decoration, and transform.
Widget Font Family	Font family inherited from the widget.
Widget Font Size	Font size inherited from the widget.
Widget Font Weight	Font weight inherited from the widget.
Widget Font Style	Font style (for example italic) inherited from the widget.
Widget Line Height	Line height inherited from the widget.
Widget Letter Spacing	Letter spacing inherited from the widget.
Widget Text Align	Text alignment inherited from the widget.
Widget Text Decoration	Text decoration inherited from the widget.
Widget Text Transform	Text transform inherited from the widget.
Widget Opacity	Transparency of the entire widget and its contents.
Widget CSS Classes	Attach your own CSS class names to the widget's outermost element so your site's stylesheet can style the embed.
Hide Widget	Hide the entire widget for one or more device sizes.

Reset and Clear

The same pills that sit at the top of each Modify drawer section. They only touch the section they belong to. Read Reset and Clear attributes before you ask for these — Reset is not undo, and Clear is not a softer Reset.

You say	What happens
Reset this column's styles / put the column back to defaults	The column's box (padding, width, colour, …) returns to the look a fresh drop would have. The component's content is left alone.
Clear this column's styles / strip the column bare	Every column style is removed. Content stays. The column has no padding, width, or background of its own.
Reset this component / put the text back to defaults	The component's own settings return to their declared defaults — placeholder copy comes back, a chosen image is cleared. Column styles stay.
Reset this row / clear the row's styles	The row's styles are removed. The columns inside stay.
Clear the padding on that image	One setting is removed so it falls back to whatever the browser or a parent would have done. Works for a column setting or a row setting.

Ask AI cannot Reset or Clear the widget's outer box as a single action. Change those settings one at a time, or use Clear in Widget Settings yourself.

What Ask AI will not do

This list is as important as the one above. A request that is not on the menu is refused or answered with a question — it will not quietly do something adjacent.

Request	Why it is out of scope	Do this instead
“Make me a banner” / “improve this page” / “design a hero”	Ask AI does not invent layouts. Those requests are several operations plus design judgement, and shipping a poor guess teaches you not to trust the panel.	Ask for the pieces: add an image, add a heading below it, set the heading text, set the row gap.
Edit a collection	Ask AI only runs on widgets today.	Open the collection and edit it by hand. See Collections.
Create, embed, or replace a collection	Those write a different kind of record than a widget edit.	Use the Collections tab in the palette, or the collection actions in the drawer.
Add, switch, or delete an overlay layer	Layers are a separate editing target, not a row you can drop.	Use Add Layer in the header. See Overlay Layers. If a layer is already selected, Ask AI will edit that layer's content the same way it edits the base.
Change CSS Variables, class definitions, fonts, themes, or other CSS Settings	Those live in a different catalog, not in the widget's rows and columns.	Open the widget's CSS Settings. Ask AI can still point a setting at a variable that already exists.
Upload an image or a video	Media upload is its own flow, with its own picker.	Upload in Media, then ask Ask AI to use that file, or pick it in Media Selector yourself.
Publish, promote, or restore a version	Publishing is a separate, explicit step. Ask AI only changes the draft.	Use Publishing when you are ready.
Edit another widget, or another environment	Ask AI only sees the widget you have open, in the environment you are in.	Open that widget and ask again.
Write raw CSS, or change project-level starters	The composer does not offer a free-text CSS channel on a column, and project CSS Styles are a different page.	Use the settings above, or edit project CSS Styles if you want every new drop to start differently.

How a change lands

It applies as soon as it is made. There is no preview-and-accept step. That is only safe because the canvas stays visible and Undo is one click away.
One request is one undo. If Ask AI added a row, set its gap, and changed a heading, Undo reverts all three together.
The draft is saved. Ask AI writes through the same save path a manual edit uses. Publishing is still a separate step.
The drawer agrees with the canvas. Open Modify after a request and you will see the same values you would have typed.
Switching widgets clears the conversation. The transcript belongs to the widget you have open, so it does not follow you to the next one.

When you will not see Ask AI

The button is hidden — not disabled — when the feature cannot work. A control that cannot work is worse than absence.

Your team has not granted you the AI editing permission. Ask AI is a separate grant on top of the permission to edit the widget — a team can have editors who do not spend on AI turns. Ask a team administrator.
You are editing a collection, not a widget.
The window is narrower than the composer's minimum width. Ask AI needs the same space the rest of the composer does.
The environment has not been configured for Ask AI. That is a RuleCMS setup step.

If a request fails because the widget changed underneath you, reload and try again. Ask AI refuses to write when the copy on screen no longer matches what is saved — that is how it avoids overwriting work you cannot see.

How to get a good result

Name the thing and the change. “Give the second row 24px of padding” is better than “make it roomier.”
Point at what is already on the canvas. “The heading”, “the image in the first row”, “the button I just added” all resolve. If two things could match, Ask AI will ask which one.
Say the device when it matters. “32 on desktop, 16 on phones” writes two values of one setting. Without that, the change applies everywhere.
One intent per request is plenty. Several operations in one sentence are fine when they are one job — “add a button to the right of the heading and label it Shop”. Mixing unrelated jobs in one sentence is how results drift.
Use Undo, then the drawer, without ceremony. Ask AI is not a commitment. If a value is almost right, finish it in the Modify drawer the way you always have.

Where to go next

The Composer — the palette, the canvas, and the Modify drawer, for the same operations done by hand.
RuleCMS Components — what each component is, and every setting it offers.
Attribute Reference — every column, row, and widget setting in plain language.
Setting a different value per device and Choosing a unit — the two ideas that turn up in almost every style request.
Publishing — getting a finished draft onto staging or production.