AI design agent

Use the PageDesigner AI design agent with clear context, controlled access, durable queue-backed runs, review, and reversible changes.

The built-in AI Agent can inspect a page, review hierarchy, improve copy, add or reuse a component, adjust classes, manage links, work with translations, and make other supported canvas changes.

It is an execution assistant, not an approval authority. You remain responsible for facts, prices, claims, accessibility, links, brand fit, and publication.

RequirementsCopy Anchor Link

The AI panel requires:

• an active PageDesigner license with AI entitlement;
• admin.page_designer.ai.use;
• update access to the page;
• a configured hosted AI path or direct OpenAI-compatible provider;
• a running Laravel queue worker;
• the PageDesigner AI-runs migration.

If the panel is absent, an access requirement is not satisfied.

Open the AI AgentCopy Anchor Link

Select the sparkle icon in the left rail.

The panel contains:

• New chat.
• Revert all.
• Conversation and progress messages.
• Canvas changes history.
• Selected-component context.
• @ mentions.
• Image attachments.
• Access mode.
• Composer and Send.

Choose an access modeCopy Anchor Link

Full access does not publish unless the request includes publication and the tool path supports it. Do not rely on access mode as a substitute for a clear scope.

Write an effective requestCopy Anchor Link

Name:

1. The target.
2. The audience.
3. The outcome.
4. The facts or source of truth.
5. What must not change.
6. How much work is in scope.

Start with one coherent section or workflow. Large page-wide requests are possible, but they take longer and deserve a clean draft or backup.

Give useful contextCopy Anchor Link

Select a componentCopy Anchor Link

Select the exact section, heading, image, or CTA before you send the request. The panel adds it as selection context.

Mention another componentCopy Anchor Link

Select the mention action or type @. Search the component list and choose a result.

Use this when the request compares or coordinates multiple areas:

Use the spacing rhythm from @Feature grid in @Pricing.

Attach reference imagesCopy Anchor Link

Attach up to four reference images. Each image must be no larger than 4 MB.

Images are visual reference. Do not attach:

• customer records;
• credentials or tokens;
• private conversations;
• full payment details;
• media you do not have permission to process.

State constraintsCopy Anchor Link

Examples:

• Keep the existing link.
• Do not change the price.
• Use only Paymenter theme tokens.
• Do not add JavaScript.
• Leave the page unpublished.
• Reuse an official model before creating a new component.

What the agent can useCopy Anchor Link

The agent has structured operations for:

• canvas context and component search;
• design documentation;
• Hosted and custom library lookup;
• inserting, moving, editing, replacing, and removing components;
• text, classes, safe attributes, and CTA links;
• translations;
• saving or forking reusable components;
• read-only storefront categories, products, plans, prices, and valid link targets;
• page-level custom scripts when explicitly requested.

For product, pricing, or checkout copy, the agent is instructed to read actual storefront data instead of inventing names, intervals, or prices.

For links, it is instructed to choose a valid storefront target before setting the CTA.

Questions and confirmationsCopy Anchor Link

The agent can present:

• A choice list.
• A free-text answer field.
• Proceed and Cancel for a proposed change.

Answer in the panel. In Ask before changes mode, select Proceed only after the action is understandable.

Full access automatically approves confirmation calls, so switch modes before sending when you want human checkpoints.

Durable queue-backed runsCopy Anchor Link

AI work is stored as a durable run:

1. The editor saves the current page.
2. A queue job requests one model response.
3. Tool results and events are checkpointed.
4. The next job continues when more work remains.
5. Questions and confirmations wait for your reply.

The job does not depend on keeping the editor tab open. Returning to the page restores the latest non-cancelled conversation and polling continues.

The service detects an active run and will not start another for the same user and page until it finishes or receives the requested answer. A run with no progress for about ten minutes is marked failed so you can resume with another message.

Review Canvas changesCopy Anchor Link

Expand Canvas changes.

• Read each action description.
• Hover a change when the UI offers canvas preview.
• Inspect the affected component directly.
• Check links and interactions in full Preview.
• Check desktop, tablet, and mobile.
• Save only after review.

The agent must report tool-confirmed changes. A message that only suggests an action is not evidence that the canvas changed.

Revert AI changesCopy Anchor Link

Each Canvas changes entry has Revert.

Reverting an earlier AI action also reverts later AI actions that depend on it.

Revert all restores the session baseline for AI-tracked canvas changes. It is intended for the AI history, not a guarantee that unrelated manual work is preserved. Review the canvas after any revert and save deliberately.

Start a new chatCopy Anchor Link

New chat cancels the current conversation and starts a fresh one. The canvas remains as it is. Use it when the new task is unrelated or the previous thread has accumulated confusing context.

Safe workflowCopy Anchor Link

1. Work on an unpublished draft or duplicate when risk is high.
2. Save.
3. Select the exact target.
4. Choose Read only or Ask before changes.
5. Send one clear request with constraints.
6. Answer questions and review confirmations.
7. Inspect Canvas changes.
8. Check every device width.
9. Open full Preview.
10. Save.
11. Publish only through the normal approval process.

Good and poor usesCopy Anchor Link

Good uses:

• Review page hierarchy.
• Rewrite approved facts in clearer language.
• Add a model from the library.
• Adapt spacing with theme utilities.
• Bind and fill translation values.
• Build product/plan content from actual storefront data.
• Correct a CTA using a valid PageDesigner or Paymenter target.

Do not use it to:

• invent plans, prices, discounts, guarantees, or policy;
• handle private customer or payment data;
• add unknown scripts;
• publish without explicit human intent;
• make broad Full access changes on a critical live page without a recovery plan.

Provider administrationCopy Anchor Link

A direct custom provider uses the Paymenter server, not the browser. A non-empty custom API key gives it priority over the Hosted AI proxy.

When troubleshooting:

• verify endpoint HTTPS and /chat/completions compatibility;
• verify the exact model ID;
• verify the provider supports the tool-calling format the agent needs;
• increase timeout only within 30–180 seconds;
• confirm the queue job timeout remains longer than the provider timeout;
• inspect the provider error and application log without exposing the API key.

See Installation and licensing and Administration, permissions, and advanced code.

---