Page builder

The page builder is for the blank-page problem. You describe a page (“a landing page for the new pricing tiers, with a comparison table and an FAQ”) and the model drafts the whole thing: YAML frontmatter that matches your section’s fields and a Markdown body that uses your shortcodes. You review it, tweak it and apply it to the editor.

It’s a draft, not a finished page. The useful part is that it knows your site’s vocabulary.

Opening it#

Either click Build Page above the chat input in the AI panel, or pick Page Builder from the toolbar AI menu. Both open the same modal.

Build new or improve current#

If the entry already has a body, the modal starts with a two-way toggle:

  • Build new ignores what’s there and drafts from your description alone. The model gets your section’s fields, your shortcodes and your brand voice, but not the current content.
  • Improve current sends the existing frontmatter and body along with your instructions (“tighten the copy, add a comparison table, expand the FAQ”) and asks for the complete updated page back.

On an empty entry there’s no toggle; you’re building new.

Describing the page#

Type what you want in the text area. Below it the modal shows which section you’re building for and lists the shortcodes available in it, so you can refer to them by name. Then click Generate Page and wait; this is one request for the whole page, so it takes longer than an inline action.

Under the hood the prompt tells the model to keep everything in the content file, to use your shortcodes for components and plain Markdown for everything else, to respect any parent/child nesting rules from your shortcode config, and to put custom CSS in <style> tags rather than inventing layouts. Each shortcode is listed with its syntax (the hugo example from your config, or one built from its fields) and whether it’s paired, with an instruction never to add a closing tag to one that isn’t and never to mix positional and named parameters. Those are the two mistakes that make Hugo fail the build, and the ones models most like to make. It’s also told how Hugo inline shortcodes work, so it can define a one-off component at the top of the page and reuse it further down:

{{< card.inline >}}
<div class="card">
  <h3>{{ .Get "title" }}</h3>
  <p>{{ .Get "text" }}</p>
</div>
{{< /card.inline >}}

{{< card.inline title="Second card" text="Reused with different values" />}}

Whether the result is any good depends on the model and how well you’ve described your shortcodes in site.yaml; the fields, hints and required flags all go into the prompt.

Reviewing the output#

When the page comes back you get two views. Preview is the raw page text in a monospace box, frontmatter fences and all; it’s not rendered, so don’t expect to see your shortcodes drawn. Source is the same text in an editable textarea, which is where you fix the bits you don’t like before applying. Copy puts the whole thing on the clipboard.

Above them, if anything looks off, a Shortcode check box lists what Emet found when it ran the output through its shortcode parser: names that are neither in your config nor Hugo built-ins, missing required parameters, a closing tag on a shortcode that takes none (or none on one that does), positional and named parameters mixed in one call, a child outside its parent, and child counts outside min_children and max_children. It’s advisory. Fix the source, or apply anyway and sort it out in the editor.

Then:

  • Apply to Editor parses the frontmatter and body and writes them into the open entry. Each frontmatter key in the output is set individually, so fields the model didn’t mention keep their current values, and the body is replaced wholesale. Nothing is committed until you save.
  • Start Over clears the output and takes you back to the description.

If the model wrapped the page in a code fence, Emet strips it before parsing. If the frontmatter still doesn’t parse you’ll see “Failed to parse generated content”, in which case switch to Source and fix the YAML by hand.

Configuration#

ai:
  enabled: true
  features:
    pageBuilder: true

pageBuilder: false removes both entry points. The page builder uses whichever provider and model you have selected in AI Settings; see Providers.