Skip to main content

AI‑Kit blocks​

AI‑Kit exposes front-end UI mainly through the AI‑Kit Feature Gutenberg block (Pro).

  • If you need the same UI outside Gutenberg (Classic Editor, Elementor, theme templates), see Shortcode.
  • The site-wide chatbot is configured from the admin UI, see Chatbot.

AI‑Kit Feature block (Pro)​

The AI‑Kit Feature block renders a configurable UI that lets visitors run one-off AI actions such as:

  • Write
  • Rewrite
  • Proofread
  • Summarize
  • Translate

Under the hood, the block uses the same runtime APIs documented in JavaScript API.

Pro feature

The Feature block is part of the Pro front-end feature surface. If Pro is not active, the block may not render on the front-end.

Configuration reference​

The Gutenberg inspector UI may not expose every option in every build, but the concepts map to the same underlying props used by the shortcode and JavaScript API.

Core behavior​

  • mode — what the UI does: write | rewrite | proofread | summarize | translate.
  • variation — UI layout: default (inline/panel) or modal.
  • title — optional title shown in the panel/modal header.
  • autoRun — if true, runs immediately when opened (common for “Summarize this page”).
  • editable — if true, allows visitors to edit the generated output (with a live preview) before onAccept fires.
  • acceptButtonTitle — custom label for the “Apply/Insert/Accept” button (when an accept flow is enabled).
  • onDeviceTimeout — override the default on-device timeout (5 s for Translate, 45 s for other modes). Has effect only when on-device AI is available (API Settings ≠ “Backend only”).

Default input and options​

You can prefill the tool with a default payload:

  • default.text — initial text.
  • default.instructions — extra guidance for the model.
  • default.outputLanguage — language code or auto.
  • default.tone — writer/rewriter tone.
  • default.length — writer/rewriter/summarizer length.
  • default.type — summarizer type.
  • default.outputFormat — plain-text | markdown | html.

Allow visitor overrides​

allowOverride controls what the visitor is allowed to change in the UI:

  • allowOverride.text
  • allowOverride.instructions
  • allowOverride.tone
  • allowOverride.length
  • allowOverride.type
  • allowOverride.outputLanguage

Options layout & selectors​

  • optionsDisplay — tweak how the options accordion renders.
  • inputSelector — CSS selector to read input text from the page.
  • outputSelector — CSS selector where results should be synced (if supported by the chosen mode).

Language & direction​

  • language — UI language for labels (independent of default.outputLanguage).
  • direction — ltr | rtl | auto.

Theme & appearance​

These map to Mantine theme options:

  • colorMode — light | dark | auto.
  • primaryColor — name of a Mantine color (or a custom color key).
  • primaryShade — number (0–9) or { light, dark }.
  • colors — optional custom named colors.
  • themeOverrides — CSS string merged into the component theme

For CSS-token based customization (launcher/chat/spacing etc.), see Theming (CSS variables).

Open button (modal variation)​

When variation="modal", you can customize the open button:

  • openButtonTitle — button label.
  • openButtonIcon — base64 Data URL (for example data:image/svg+xml;base64,...).
  • showOpenButtonTitle / showOpenButtonIcon — show/hide title and icon independently.
  • showRegenerateOnBackendButton — toggle the secondary regeneration action in the modal footer.

AI‑Kit Doc Search block (Pro)​

The AI‑Kit Doc Search block renders a lightweight search UI that queries your Knowledge Base and returns:

  • a short answer/summary, and
  • optional source cards (documents + snippets)

This is useful for “help center” pages, product documentation, internal portals, or anywhere you want visitors to search your docs without using a full chatbot.

Pro feature

The Doc Search block is part of the Pro front-end feature surface. If Pro is not active, the block may not render on the front-end.

Under the hood, Doc Search uses the same runtime APIs documented in JavaScript API (notably sendSearchMessage() and renderSearchComponent()).

Doc Search configuration reference​

Core behavior​

  • variation — UI layout.
  • autoRun — if true, runs immediately (useful when the query is pulled from an existing input via inputSelector).
  • title — optional title shown above the search input.

Input source​

  • inputSelector — CSS selector for an existing input/textarea on the page.
    If provided, the block reads the query from that element instead of (or in addition to) its own input.

Search button​

  • searchButtonIcon — base64 data URL for an icon (SVG/PNG).
  • showSearchButtonTitle / showSearchButtonIcon — show/hide button label and icon independently.

Results​

  • topK — maximum number of results to return (default: 10).
  • snippetMaxChars — maximum characters shown per snippet (default: 160).

Language, direction, theming​

  • language — UI language (system, en, de, hu, etc.).
  • direction — ltr | rtl | auto.
  • colorMode — light | dark | auto.
  • primaryColor — theme primary color key/name.
  • themeOverrides — CSS string merged into the component theme.