Skip to main content

In-context "Generate with AI" button

A button injected into the SEO fieldset on product / category / CMS edit forms. Click it → modal pops up with a Claude-generated suggestion → click Insert → the form's meta_title and meta_description fields get populated. Editor still has to save the form for the values to persist.

What makes this different from the queue​

  • No DB write — it's a generate-and-discard preview. The suggestion isn't queued, isn't persisted, isn't tracked in the AI Meta Suggestions grid.
  • Editor stays in flow — they're already on the product edit form; one click drafts copy, one click inserts it, save as normal.
  • Per-store via the edit URL's store parameter — the modifier reads ?store=<id> from the request and passes it to the preview controller. Switching the scope selector at the top of the form gives the AI the right per-store context for that generation

Where it appears​

  • Product edit page — top of the "Search Engine Optimization" section. Injected via Byte8\SeoSuite\Ui\DataProvider\Product\Form\Modifier\AiMetaButton.
  • Category edit page — top of the "Search Engine Optimization" fieldset. Via the form XML override in view/adminhtml/ui_component/category_form.xml.
  • CMS Page edit — top of the "Search Engine Optimisation" fieldset. Via view/adminhtml/ui_component/cms_page_form.xml.

The button only renders when byte8_seosuite/ai/is_active = 1. Otherwise the SEO fieldset looks unchanged.

What the editor sees​

  1. Generate with AI button next to a one-line hint
  2. Click → button label changes to Generating… and disables itself
  3. Modal appears with:
    • Editable Suggested Meta Title input
    • Editable Suggested Meta Description textarea
    • Rationale (Claude's explanation of why it picked that copy)
    • Model + token usage line for cost transparency
  4. Insert into form writes the (possibly edited) values into the form fields and closes the modal
  5. Cancel discards everything

Behind the scenes​

  • The button HTML is rendered server-side by Byte8\SeoSuite\Ui\DataProvider\Product\Form\Modifier\AiMetaButton and delivered to the form as the content config of a Magento_Ui/js/form/components/html container. The custom JS at Byte8_SeoSuite/js/form/element/ai-meta-button only attaches behaviour (click delegation, modal, AJAX), no Knockout templates.
  • Triggers an authenticated POST to /admin/byte8/metasuggestion/preview with entity_type, id, store_id, form_key
  • Server calls Byte8\SeoSuite\Model\Ai\PreviewService::preview() which:
    • Loads the entity from the relevant repository
    • Builds the prompt via the same PromptBuilder the queue uses (so output format/voice is consistent)
    • Calls Claude with the same cached system blocks (so even single-shot previews benefit from cache if you use the button repeatedly in a session)
    • Parses + enforces char limits
  • Response is a JSON {success: true, meta_title, meta_description, rationale, model, input_tokens, cached_tokens, output_tokens}
  • Insert writes via uiRegistry filter syntax — registry.get('index = meta_title', cb) — rather than a hardcoded form path, so the JS works on product / category / CMS forms identically and survives Magento upgrades that re-name the form hierarchy.
  • Failures surface in a styled Magento_Ui/js/modal/alert dialog with the API's reason; no native browser alerts.

Requirements​

  • Entity must be saved at least once (so the edit URL carries ?id=N) before the button can be used. If clicked on a brand-new unsaved entity, a Magento modal alert says "Save the entity once before generating — we need its ID."
  • Editor needs the Byte8_SeoSuite::meta_suggestion_manage ACL resource (the same one the queue uses).

Hyvä admin​

The component is built with Magento_Ui/js/form/components/html + standard jQuery + Magento_Ui/js/modal/modal + Magento_Ui/js/modal/alert — all of which Hyvä admin themes preserve. The button works identically there.

Common workflow​

Editor's normal flow with the button:

  1. Open product edit page
  2. Fill in name, price, description, images, etc.
  3. Save (so the product gets an ID)
  4. Click Generate with AI in the SEO section
  5. Review modal → tweak title slightly, leave description
  6. Insert into form
  7. Save again

This is faster than going through the queue when you're working on one product at a time.

Bulk vs in-context​

ScenarioBest path
New SKU just imported, want quick meta nowIn-context button
Quarterly refresh of 500 products' metaCLI seosuite:meta:generate → review queue
Hands-off ongoingCron auto-generate + auto-approve
Re-write meta for a hero product with editorial careIn-context button + manual edit