Getting Started with AI‑Kit for WordPress

Getting Started with AI‑Kit for WordPress

Learn how to add on-device AI tools to WordPress using AI-Kit. Discover blocks, shortcodes, editor tools, and the JavaScript API — without API keys or external AI services by default.

Table of Contents

What AI‑Kit is (and why it feels different)

Most “AI for WordPress” plugins follow a simple flow: your text is sent to a third‑party API, processed there, and the result comes back. AI‑Kit is built around a different default: run AI directly in the visitor’s browser whenever possible.

Privacy‑first by default

On supported Chrome Desktop builds, AI‑Kit can use Chrome’s built‑in AI APIs (Writer/Rewriter/Proofreader/Summarizer/Translator, etc.). That means no API key dance for basic workflows, and no automatic content shipping to external services.
When you need more power (or broader browser coverage), AI‑Kit can optionally use a backend fallback — deployed into your own AWS account. That backend story is covered in the second post.

Admin screens and where settings are stored

AI‑Kit’s admin experience is intentionally split into configuration, diagnostics, and editor-level tools. This keeps the global baseline predictable, while letting editors access AI features exactly where they write.

Global settings (stored in wp_options)

Core plugin settings live under:

  • WP Admin → SmartCloud → AI‑Kit Settings
AI-Kit settings screen in WordPress admin showing on-device AI feature configuration
AI-Kit global settings in the WordPress admin interface.

These settings are the “local” truth for AI‑Kit and are saved in WordPress (wp_options). Use them to control baseline behavior like defaults, availability checks, and general feature behavior.

Diagnostics (environment + availability checks)

AI‑Kit also provides a dedicated diagnostics screen:

  • WP Admin → SmartCloud → AI‑Kit Diagnostics

This view focuses on reality checks rather than configuration: it detects unsupported browser versions, missing Origin Trial requirements, and other constraints that would otherwise look like “random failures.”

PRO editors (stored in hosted WPSuite site settings)

Some PRO configuration surfaces are available in the admin UI, but they are stored in your hosted site configuration on wpsuite.io (not in WordPress options). These become available after:

  • WP Admin → SmartCloud → Connect your site to WPSuite

The two key PRO editors are:

  • API Settings Editor — backend connectivity and related controls
  • Chatbot Settings Editor — chatbot behavior, scope, and UX configuration
Chatbot Settings Editor in WordPress admin for configuring the AI-Kit chatbot experience
Configure AI-Kit’s chatbot behavior and appearance from the Chatbot Settings Editor.

Why split storage?

WordPress options are perfect for local defaults and safe baseline behavior. Hosted site settings are great for PRO features that benefit from centralized management (agency workflows, consistent settings across environments, and backend connectivity).

Editor tools: image metadata, language utilities, AI sidebar

AI‑Kit doesn’t limit AI to front‑end widgets. It also adds editor‑level tools inside WordPress, so authors can generate copy, improve text, and create SEO‑friendly image metadata while they work.

AI-Kit editor tools toolbar shown in the WordPress editor for proofreading, rewriting, and translation
AI-powered proofreading, rewriting, and translation tools directly in the editor toolbar.

AI‑Kit Sidebar (Gutenberg)

Inside the block editor, AI‑Kit adds a dedicated sidebar panel (AiKitSidebar). From a user perspective it behaves like a native editor sidebar: you open it and run AI actions that work with the current post.

AI-Kit editor tools toolbar inside WordPress showing language and AI utilities for content editing
AI utilities available directly inside the WordPress editing experience.
AI-Kit text generation panel inside the Gutenberg editor sidebar for writing and rewriting content
Generate, rewrite, and refine text from the Gutenberg sidebar with AI-Kit.

Typical sidebar workflows:

  • Generate post SEO metadata (e.g. title + excerpt/description) from the current content, then apply the results back to the post fields.
  • Text generation (draft paragraphs, bullet lists, intros) with tone/length/language controls, with an Accept/Apply action.

Inline Language tools (block toolbars)

For text blocks, AI‑Kit can surface quick language actions right in the Gutenberg toolbar (LanguageUtils) — think “translate / detect language / quick rewrite” style helpers without leaving the canvas.

Image metadata generation (blocks + Media Library)

AI‑Kit can help with image SEO and accessibility by generating drafts for common fields such as alt text, title, caption, and description.

You’ll see this in two main places:

  • Gutenberg image-like blocks such as core/image, core/cover, core/media-text (UI component often referenced as GenerateMetadataBox / ImageExtra).
  • Media Library tools (MediaLibrary) — including attachment screens and bulk flows.
AI-Kit metadata generator for Gutenberg image blocks creating alt text and image descriptions
Generate alt text and image metadata for Gutenberg image blocks with AI-Kit.
AI-Kit bulk action modal in the WordPress Media Library for generating metadata across multiple images
Apply AI-powered metadata generation to multiple media items at once.

The AI‑Kit Feature block + shortcode (PRO)

The AI‑Kit Feature UI (Pro) is the main way to expose on‑page AI actions to visitors. You can use it in two forms:
  • Gutenberg block — add “AI‑Kit Feature” in the editor and configure it in the inspector.
  • Shortcode — use the same UI outside Gutenberg (Elementor, Classic Editor, templates).
AI-Kit Feature block configured in the WordPress editor with summarize, write, rewrite, and proofread modes
Configure AI features directly in the editor and expose them on the frontend.
AI-Kit Feature block options for rendering on-device AI tools on the WordPress frontend
Configure the AI-Kit Feature block to expose AI tools on the frontend.

The shortcode

The shortcode name is: 
smartcloud-ai-kit-feature ...
AI-Kit Feature shortcode used in Elementor to add a frontend AI summarize button
Use the AI-Kit Feature shortcode to expose AI tools in any editor, including Elementor.

Parameters you’ll use most

The shortcode mirrors the Feature UI props used by the Gutenberg block and the JavaScript API. These are the most common parameters:

  • mode — summarize | write | rewrite | translate | proofread
  • variation — default | modal
  • title — header label (panel or modal)
  • language — UI language (e.g. en, de, hu)
  • direction — ltr | rtl | auto

Theming & appearance

These map to the same Mantine theme options used across the AI‑Kit UI:

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

Default values, overrides, and “one‑click” demos

Most modes support a default payload and an allowOverride switchboard. Together they let you prefill content and decide what the visitor can change.

  • default.text / default.instructions
  • default.inputLanguage / default.outputLanguage (auto supported)
  • default.tone, default.length, default.type (where applicable)
  • default.outputFormat — plain-text | markdown | html
  • allowOverride.* — enable/disable controls per field
  • autoRun — useful for “one click → open modal → start immediately” demos
  • onDeviceTimeout — per‑feature timeout override

Targeting: connect the Feature UI to an element

To make the Feature UI operate on a specific element (e.g. your demo textarea), use target. It accepts a CSS selector or a direct HTMLElement (in the JS API).

Why target matters: it’s the cleanest way to build editor‑like demos. The UI can read from the target, and the Accept action can apply the result back to the same element.

Copy‑paste recipes: shortcode configs (with YAML)

Below are practical recipes you can reuse in Elementor. Replace selectors, labels, and icons as needed.

Tip: For “demo toolbar” style, set variation="modal" and hide the open button title. Use openButtonIcon for compact icon controls.

“Write” — one click generates content into the textarea

This is great for demos: the visitor clicks once and gets a full piece of text. Topic + instruction are prefilled, so there’s no prompt typing.

smartcloud-ai-kit-feature 
  mode="write" 
  variation="modal"
  showOpenButtonTitle="false"
  openButtonIcon="data:image/svg+xml;base64,..." 

default:
  text: "Write a short product intro for AI-Kit. Keep it friendly and practical."
  tone: neutral
  length: medium
  outputFormat: markdown

/smartcloud-ai-kit-feature

“Rewrite” — improves what’s already in the textarea

smartcloud-ai-kit-feature 
  mode="rewrite"
  variation="modal"
  showOpenButtonTitle="false"
  openButtonIcon="data:image/svg+xml;base64,..." 

inputSelector: h2:first-child
default:
  tone: more-casual
  length: shorter
allowOverride:
  instructions: false
  length: false
  tone: false

/smartcloud-ai-kit-feature

“Proofread” — safe edits (grammar + clarity)

smartcloud-ai-kit-feature mode="proofread" variation="modal" 
  showOpenButtonTitle="false"
  openButtonIcon="data:image/svg+xml;base64,..." 

inputSelector: h2:first-child
default:
  outputFormat: plain-text

/smartcloud-ai-kit-feature

“Translate” — auto-detect + output language

smartcloud-ai-kit-feature
  mode="translate"
  variation="modal"
  showOpenButtonTitle="false"
  openButtonIcon="data:image/svg+xml;base64,..." 

inputSelector: h2:first-child
default:
  inputLanguage: auto
  outputLanguage: ar
  outputFormat: plain-text
allowOverride:
  outputLanguage: true

/smartcloud-ai-kit-feature

“Summarize” — compact overview

smartcloud-ai-kit-feature 
  mode="summarize"
  variation="modal"
  showOpenButtonTitle="false"
  openButtonIcon="data:image/svg+xml;base64,..." 

inputSelector: h2:first-child
default:
length: short
type: key-points
outputFormat: html

/smartcloud-ai-kit-feature

Note on icons

openButtonIcon expects a base64 Data URL. For a consistent look, use a single icon set (same stroke weight) and keep them small (18–20px).

JavaScript API: run features without UI + log events

If you prefer fully custom UI (or no UI), AI‑Kit exposes a JavaScript API under the WP Suite global:

  • globalThis.WpSuite.plugins.aiKit — plugin object
  • globalThis.WpSuite.plugins.aiKit.features — feature methods + UI helper renderFeature()
Perfect for: custom buttons, automations, bulk actions, or integrating AI‑Kit into your own components.

Minimal example: rewrite + status events

Every feature method accepts an optional FeatureOptions object where you can pass onStatus. The callback receives an AiKitStatusEvent with steps like on-device:download, on-device:run, backend:request, and done.

				
					// Example: rewrite the textarea content and log status events
(async () => {
  const ai = globalThis.WpSuite?.plugins?.aiKit?.features;
  if (!ai) return;

  const textarea = document.querySelector('#ai-kit-demo');
  if (!(textarea instanceof HTMLTextAreaElement)) return;

  const input = textarea.value;

  const { result } = await ai.rewrite(
    {
      text: input,
      // Optional: influence the output
      tone: 'neutral',
      length: 'short',
      // Optional: sharedContext can be set globally in settings too
      // sharedContext: 'Write for a WordPress product page.',
    },
    {
      onStatus: (e) => {
        console.log('[AI‑Kit]', e.feature, e.step, e.progress ?? '');
      },
      // Optional overrides:
      // modeOverride: 'backend-fallback',
      // onDeviceTimeoutOverride: 45000,
    }
  );

  textarea.value = result;
})();

Proofread example: apply correctedInput

				
					// Proofread returns dom-chromium-ai's ProofreadResult shape
(async () => {
  const ai = globalThis.WpSuite?.plugins?.aiKit?.features;
  const textarea = document.querySelector('#ai-kit-demo');
  if (!ai || !(textarea instanceof HTMLTextAreaElement)) return;

  const out = await ai.proofread(
    {
      text: textarea.value,
      includeCorrectionTypes: true,
      includeCorrectionExplanations: false,
    },
    { onStatus: (e) => console.log('[AI‑Kit]', e.step) }
  );

  textarea.value = out.result.correctedInput;
})();

Add a simple event log UI (great for demo pages)

				
					<div id="ai-kit-events" style="font-family:monospace;font-size:12px"></div>
				
			
				
					const events = document.querySelector('#ai-kit-events');
const log = (msg) => events?.insertAdjacentHTML('beforeend', `<div>${msg}</div>`);

// Use onStatus to log progress
const options = {
  onStatus: (e) => log(`${e.feature} • ${e.step}${e.progress != null ? ` • ${Math.round(e.progress*100)}%` : ''}`)
};
AI-Kit Features JavaScript API showing frontend events and on-device processing in the browser console
Frontend AI features exposed through the AI-Kit JavaScript API with real-time status events.

UI injection: renderFeature()

If you want AI‑Kit to render its own UI into a specific element, use renderFeature(). This accepts the same props you configure via shortcode (plus a target selector/element).

AI-Kit feature rendering example showing inputSelector and outputSelector binding for frontend text editing
Bind feature input and output using inputSelector and optional outputSelector.

Pro Tips & Common Mistakes

Pro Tips

  • Use inputSelector + outputSelector to create a clean “editor toolbar” UX around a single textarea.
  • Enable editable when you want users to refine AI output in the modal/inline preview before pressing Accept.
  • Prefer a modal UI for longer outputs (Rewrite / Translate / Summarize) and inline UI for quick edits (Proofread).
  • Keep the default demo text short and meaningful; users are more likely to try multiple features if the first run feels instant.
  • Add a small event log (via the JS API) during onboarding so developers can see feature lifecycle and troubleshoot quickly.

Common Mistakes

  • Expecting AI-Kit to “find” the right text automatically — features read input from inputSelector unless default.text is set.
  • Forgetting outputSelector and wondering why nothing is inserted — without it, the feature can remain preview-only unless you handle onAccept.
  • Testing on unsupported browsers — on-device AI is reliable only on Chrome Desktop, and some features require Origin Trials.
  • Using selectors that match multiple elements (or elements that load later) — bind to a unique, stable element ID.
  • Overly strict timeouts on first run — the initial model readiness/download can take longer than subsequent calls.

Key Takeaways

  • AI-Kit brings on-device AI editing tools to WordPress — no API keys required for the core experience.
  • Features are consistent across blocks, shortcodes, and the JS API thanks to the same input → preview → accept flow.
  • inputSelector defines where text comes from; outputSelector defines where accepted output goes.
  • editable lets users refine generated text inside the preview UI before accepting changes.
  • For advanced use cases, renderFeature() mounts the UI anywhere in the DOM while selectors control the text binding.
  • When you need broader compatibility or chatbot/KB features, you can pair AI-Kit with an optional backend deployed into your own AWS account.
Try AI-Kit Free →
Read the Docs