---
id: aikit-blocks
title: Blocks
slug: /ai-kit/blocks
sidebar_position: 20
description: Front-end Gutenberg blocks provided by AI-Kit (Pro).
tags: [ai-kit, gutenberg, blocks, frontend]
hide_title: true
---

## 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](./shortcodes)**.
- The site-wide chatbot is configured from the admin UI, see **[Chatbot](./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](./javascript-api)**.

:::note 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)](./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.

:::note 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](./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.