Build a Page by Chatting with the AI Assistant
Open the AI Chat Assistant from the page editor top bar, describe one section at a time, place new sections with words like "below the hero", and name a section to change only that section. Say "no photos" in your brief and add your own images from the media library.
- 0:00Starting from nothing
- 0:35An empty page and the chat panel
- 0:56Describe the hero like you would brief a designer
- 1:37Place the next section with words
- 1:52The hero did not move: sections build up, not redrawn
- 2:16Read what it invented, then fix it in a sentence
- 3:13Add a photo from your own media library
- 4:23The page live on the site
- 4:41What comes next
Transcript
0:00Starting from nothing
Every other video so far started with something on the page. This one starts with nothing. We are going to build a page in conversation: describe a section, place the next one relative to it, then edit one line without disturbing the rest.
0:35An empty page and the chat panel
A brand new page, nothing on it. The chat opens from the top bar. You pick the model per message, and the credit cost sits next to the send button.
0:56Describe the hero like you would brief a designer
First the hero, described the way you would brief a designer, colours included. And one habit worth copying: say no photos. Left to itself the assistant reaches for stock photography it found on the web, and a painting company's pictures should be its own. Your real photos come from the media library in a minute.
There it is: headline, supporting line, buttons, and a gradient in the terracotta this site already uses, with the styles written into the page's own stylesheet.
1:37Place the next section with words
Now the second section, and the useful word in the instruction is below. You place sections relative to what is already there.
1:52The hero did not move: sections build up, not redrawn
Three columns under the hero. And a detail that matters more than it sounds: it generated only the new section and slotted it in. The hero above it is untouched, byte for byte. The page builds up, it does not get redrawn.
2:16Read what it invented, then fix it in a sentence
Before anything ships, read what it wrote. Drafts like this fill gaps with confident specifics: years in business, homes painted, guarantees. Those are invented. The fix is the same conversation: name the section, say what changes.
A new headline, the invented claims gone, and because it edits the one section you named, the strip below is exactly as it was. If an edit ever misses, the undo arrow beside the input rolls the page back one step.
3:13Add a photo from your own media library
The chat panel sits over the top right of the editor, so close it before saving or opening anything that lives in that corner. Now the photograph: drag the image element under the hero, and the placeholder opens your media library.
Picked from the library, placed under the hero, and served as a modern image format because the site converts uploads on the way in.
Three messages and one photograph of your own, and a page that did not exist ten minutes ago, with nothing on it you have to take on faith.
4:23The page live on the site
Here it is on the site. Every claim was checked, the picture is yours, and nothing on the page depends on someone else's server.
4:41What comes next
That is the chat assistant: describe a section, place the next one, edit a line without disturbing the rest, and swap in pictures you actually own. Next up we hand the writing over completely, and tell the AI exactly which keywords the page has to earn before it writes a word. Guides at nitroshock.ai/docs. Thanks for watching.
The NitroShock Page Builder plugin connected to your account, a page with the Page Builder enabled, and credits on your account.
The AI chat assistant in the NitroShock Page Builder builds a page from plain-language instructions. Describe a section and it appears on the canvas. Say where the next one goes and it slots in without redrawing what is already there. Name a section and say what should change, and only that section changes. This guide follows the video above: an empty page, a hero, a three-column strip, one corrected headline, and a photo from your own media library.
For the component editor's version of the same chat, see Using the AI Chat Assistant in Component Studio.
What You Need
- The NitroShock Page Builder plugin, connected to your NitroShock account. See Installing & Connecting NitroShock Page Builder.
- A page with the Page Builder enabled. See Enabling the Page Builder on a Page. A brand-new, empty page is fine.
- Credits on your account. Each message is charged when you send it, and the cost is shown before you send.
Opening the Chat
In the page editor's top bar, click the robot icon between Preview and Save (its tooltip reads AI Chat Assistant). The AI Assistant panel slides in from the right with three things next to the input:
- The model picker. Haiku is the fastest, Sonnet is the balanced default, and Opus is the most capable. You choose per message, so a quick wording fix and a complex layout can use different models.
- The credit cost for the next message, which updates when you change the model or attach an image.
- The undo arrow, which stays greyed out until the assistant has changed something.
Describe the First Section Like a Design Brief
Write the first message the way you would brief a designer: what the section is for, what it says, and how it should look, colours included. In the video the brief asks for a hero with a headline, a supporting line, two buttons, and a warm gradient instead of a photo.
Say "no photos" in your brief. Left to itself, the assistant can fill an image slot with stock photography hotlinked from the web. Your own pictures belong on your page, and they come from the media library in a later step.
The reply lands on the canvas, and its styles are written into the page's own stylesheet (the CSS tab), not into inline attributes. Your site's brand colours are sent with every message, so the result starts from your palette.
Place the Next Section With Words
Position new sections relative to what is already there. "Add a three-column strip below the hero, one column each for interiors, exteriors, and cabinets" tells the assistant both what to build and where it goes.
When the assistant adds a section, it generates only the new section and inserts it. The hero above stays exactly as it was. The page builds up one section at a time instead of being regenerated on every message, which is what makes it safe to keep going once one part looks right.
Read What It Wrote, Then Fix It in a Sentence
Before anything goes live, read every line. AI drafts fill gaps with confident specifics: years in business, the number of homes painted, warranties, guarantees. None of those came from you, so treat them as invented until you confirm them.
The fix is another message in the same conversation. Name the section and say what changes, for example: "In the hero section, change the headline to Interior and exterior painting done properly, and remove any line that claims years in business." The assistant edits the section you named and leaves the rest of the page alone.
If an edit misses, click the undo arrow beside the input. It rolls the page back one step at a time, up to five steps, restoring the HTML, CSS, and JavaScript together.
Add a Photo From Your Own Media Library
Close the chat before saving or opening anything in the top-right corner of the editor, because the panel sits over that area. Then drag the image element from the basic components into place, under the hero in the video, and click its placeholder to open your WordPress media library. Pick a photo and it is placed on the page.
If your site converts uploads to WebP with NitroImg, the converted version is what visitors receive.
Save and Check the Live Page
Click Save, then view the page on your site. Read it once more as a visitor would: every claim should be one you can stand behind, and every image should be yours.
Tips for Better Results
- One section per message. Smaller requests are faster, cheaper to redo, and easier to undo.
- Name what you are changing. "In the hero section" or "in the three-column strip" points the edit at one section.
- Use the quick suggestions. After each reply the panel offers a few follow-up ideas. Clicking one sends it straight away.
- Attach a reference. With Sonnet or Opus you can attach up to three images, such as a screenshot of a layout you like. Haiku does not accept images.
- Switch models when it struggles. If Haiku or Sonnet keeps missing a complex layout, send the same request with Opus.
FAQ
Does the chat remember earlier messages?
Yes, within the session. The last ten messages go with each new one, so you can say "make it match the hero" without re-explaining. The conversation is not kept after you reload the editor; the page itself is.
Will it overwrite sections I have already built?
Not when you add a section: new sections are inserted next to the existing ones. When you ask for a change, name the section so the edit stays inside it. The undo arrow covers the cases where a reply goes further than you wanted.
Where do the styles go?
Into the page's CSS tab, where you can read and edit them. Nothing is hidden in inline style attributes.
Why did it invent facts about my business?
The assistant writes complete-sounding copy, and when it does not know a detail it supplies a plausible one. Give it the real details in your brief, and ask it to remove any claim you cannot confirm.
When am I charged?
When you send a message. The cost for the selected model is shown next to the send button before you send, and attaching images adds to it.
Next Steps
- Have the AI research and write a whole page from a topic: AI Content Generation in the Page Editor
- Save a section you like for reuse on other pages: Component Library Guide
- Build reusable components by chatting: Using the AI Chat Assistant in Component Studio