---
id: aikit-shortcodes
title: Shortcode
slug: /ai-kit/shortcodes
sidebar_position: 35
description: Use the AI-Kit Feature UI outside Gutenberg via the [smartcloud-ai-kit-feature] shortcode.
tags: [ai-kit, shortcode, wordpress, frontend]
hide_title: true
---

## 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

:::note 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

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

Open in a modal:

```text
[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):

```text
[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 `[]`

```text
[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”

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

### “Translate to Hungarian”

```text
[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.

---

## Shortcode: `[smartcloud-ai-kit-doc-search]`

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

:::note 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

```text
[smartcloud-ai-kit-doc-search]
```

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

```text
[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`).

```text
[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.
:::