Skip to main content

Shortcode: [smartcloud-ai-kit-feature]​

The AI‑Kit Feature UI (Pro) can be embedded outside Gutenberg using a shortcode.

This is useful for:

  • Classic Editor content
  • Page builders (Elementor, etc.)
  • Templates / theme areas that support shortcodes
Pro feature

[smartcloud-ai-kit-feature] is part of the Pro frontend feature surface. If Pro is not active, this shortcode may not render.

Basic usage​

[smartcloud-ai-kit-feature mode="summarize"]

Open in a modal:

[smartcloud-ai-kit-feature mode="rewrite" variation="modal" title="Rewrite this section"]

Common parameters​

The shortcode is designed to mirror the AI‑Kit Feature block configuration. The most commonly used parameters are:

  • mode — summarize | write | rewrite | translate | proofread
  • variation — default | modal
  • title — UI title shown in the header (modal) or panel (default)
  • language — UI language (e.g. en, de, hu)
  • direction — ltr | rtl | auto
  • colorMode — light | dark | auto
  • primaryColor — theming key/name for your UI palette
  • primaryShade — number (0–9) or { light, dark }
  • themeOverrides — CSS string applied to the component theme
  • autoRun — run immediately when opened (typical for “summarize this page”)
  • editable — allow visitors to edit the generated output (with a live preview) before onAccept fires
  • acceptButtonTitle — customize “Apply/Insert” button label (when onAccept is wired)
  • onDeviceTimeout — override the default on-device timeout (5 s translate / 45 s other modes). Only applies when the site is not configured as “Backend only”.

Default input / output​

Most modes accept a “default” payload, for example:

  • default.text — initial text to process
  • default.instructions — extra guidance
  • default.outputLanguage
  • default.tone, default.length
  • default.type (summarizer), default.outputFormat (plain-text | markdown | html)

Because WordPress shortcode attributes are strings, complex values are typically passed as JSON (when supported by your integration):

[ai-kit-feature
  mode="summarize"
  variation="modal"
  default='{"type":"tldr","outputFormat":"markdown"}'
]

Tip: for cleaner formatting (no JSON escaping), move these attributes into the YAML body as shown in the next section.

YAML body configuration (recommended for complex values)​

In addition to shortcode attributes, you can provide any property in the shortcode body using YAML.

This is especially useful when you need:

  • Multiline values (for example themeOverrides)
  • Values that contain characters that are painful in attributes (for example selectors with [])
  • Nested objects (for example default.*, allowOverride.*)

Example: multiline CSS and selectors with []​

[smartcloud-ai-kit-feature mode="summarize" variation="modal"]
 # Mount the UI next to a specific element (selector can contain [] safely)
 target: "[data-widget_type=\"theme-post-content.default\"]"

themeOverrides: |
  :host {
    --ai-kit-modal-max-width: 760px;
  }

default:
  text: "Summarize the content of the current page"
  outputFormat: markdown

allowOverride:
  outputLanguage: true
[/smartcloud-ai-kit-feature]
note

If the same property is provided both as an attribute and in YAML, the YAML body is applied on top of the attributes.

Practical patterns​

“Summarize this page”​

[smartcloud-ai-kit-feature mode="summarize" variation="modal"]
autoRun: true
[/smartcloud-ai-kit-feature]

“Translate to Hungarian”​

[smartcloud-ai-kit-feature mode="translate" variation="modal"]
default:
  outputLanguage: hu
[/smartcloud-ai-kit-feature]

Troubleshooting​

  • If nothing renders, check capability decisions (on-device and/or backend) and confirm the user’s browser supports the requested feature.
  • If backend fallback is enabled, confirm the backend URL and security policy for your frontend paths.
  • For developer-level control, consider using WpSuite.plugins.aiKit.features.renderFeature() instead of shortcodes.

The AI‑Kit Doc Search UI (Pro) can be embedded outside Gutenberg using a shortcode.

Typical uses:

  • Classic Editor content
  • Page builders (Elementor, etc.)
  • Templates / theme areas that support shortcodes
Pro feature

[smartcloud-ai-kit-doc-search] is part of the Pro front-end feature surface. If Pro is not active, this shortcode may not render.

Basic usage​

[smartcloud-ai-kit-doc-search]

Open in a modal-style UI (if supported by your build):

[smartcloud-ai-kit-doc-search variation="modal" title="Search our docs"]

Common parameters​

  • variation — default (common) or other build-specific values.
  • autoRun — run immediately on load (default: true).
  • title — optional title shown above the input.
  • inputSelector — read the query from an existing input/textarea on the page.
  • topK — max number of results (default: 10).
  • snippetMaxChars — max snippet length per result (default: 160).
  • searchButtonIcon — base64 data URL for the search icon (SVG/PNG).
  • showSearchButtonTitle / showSearchButtonIcon — show/hide button label and icon independently.
  • language — UI language (system, en, hu, …).
  • direction — ltr | rtl | auto.
  • colorMode — light | dark | auto.
  • primaryColor — theme primary color key/name.
  • themeOverrides — CSS string applied to the component theme.

YAML body configuration (recommended for complex values)​

Just like the Feature shortcode, you can pass any property in the shortcode body as YAML (handy for multiline themeOverrides).

[smartcloud-ai-kit-doc-search title="Search the docs"]
themeOverrides: |
  :host {
    --ai-kit-modal-max-width: 820px;
  }
[/smartcloud-ai-kit-doc-search]
note

If the same property is provided both as an attribute and in YAML, the YAML body is applied on top of the attributes.