Autonnel v0.1.0
Get started

AI page generation

Describe a page in natural language; autonnel assembles Puck components from your prompt.

The Agent panel is an in-editor assistant. It modifies an existing page’s components based on natural language instructions — it is not a creation path. To use the agent, first create a page from a template, then open it in the editor.

Prerequisites

  • An LLM must be configured in Settings → LLM (OpenAI-compatible base URL, API key, and model). If no LLM is configured, the Agent panel is hidden.
  • A page must already exist. Create one via Pages → New page → Template before using the agent.

How it works

  1. Open the page editor (Pages → select page → Edit).
  2. In the left side of the editor, locate the Agent panel (below the component palette).
  3. Type an instruction describing the change you want — for example, “make the hero section darker and move the testimonials below the FAQ.”
  4. Submit the instruction. The agent reads the current page layout and the full component catalog, then produces a revised layout.
  5. Review the proposed changes on the canvas.
  6. Accept the result or refine your instruction and submit again.

The agent modifies the page in place. Each accepted run updates the draft immediately.

Example prompts

  • “Swap the testimonial section for a feature comparison table.”
  • “Make the hero background darker and change the CTA button color to orange.”
  • “Translate all button labels to Spanish.”
  • “Add a countdown timer below the hero and remove the FAQ section.”
  • “Rewrite the hero headline and subheadline to emphasize a 30-day money-back guarantee.”

Be specific about which sections to change, what to add or remove, and any stylistic preferences. Generic instructions produce generic changes.

Caveats

  • In-place editing. The agent edits the page directly — there is no separate “AI version.” Drafts autosave after each successful agent run. If you want to preserve the current state before experimenting, duplicate the page first.
  • LLM cost. Each agent call sends the current page layout and component catalog to your configured LLM. Long iteration sessions can use significant tokens. Check your LLM provider pricing before running many iterations.
  • Validation. If the agent emits invalid component names or prop values, the run is rejected and an error is shown. Re-prompt with clearer instructions. The agent does not retry automatically.
  • No scratch creation. The agent cannot create a page from nothing. Always start from a template; the agent refines from there.
  • Component availability. The agent can only use components in the built-in catalog. It cannot invent new components or layout constructs outside that set.
  • Templates — creating the starting page the agent works from
  • Puck editor — manual editing and component reference
  • LLM settings — configuring the language model