Admin Modules

Utilities (Magic Wands)

AI Engine can also help you directly inside your posts through Magic Wand icons, which trigger AI-powered automated actions such as generating content, media, and more for your posts.

Start by enabling the “Utilities” module in the Admin Modules settings (Dashboard tab).

This features are designed to work with the WordPress Gutenberg block editor.

Then you’ll be able to trigger the Magic Wand from different places:

Post listing table

Post settings

Post content ( press space to trigger )

Post blocks

Magic Wand Customization

The Magic Wand module in AI Engine allows you to customize the instructions (prompts) sent to the AI for each feature.

To modify the instructions sent to the AI, you can use the `mwai_prompt_{actionName}` filter. This allows you to change the system prompt or the instructions wrapper without replacing the entire logic.

The following actions are available for customization:

correctText (Correct Text)
enhanceText (Enhance Text)
longerText (Longer Text)
shorterText (Shorter Text)
translateText (Translate Text)
translateSection (Translate Post Section)
suggestSynonyms (Suggest Synonyms)
generateImage (Generate Image)
suggestExcerpts (Suggest Excerpts)
suggestTitles (Suggest Titles)

If you want to change the behavior of the “Correct Text” feature (e.g., to make it more formal), you can use the following code snippet in your theme’s `functions.php` or a custom plugin:

add_filter( 'mwai_prompt_correctText', function( $prompt, $arguments ) {
    // $prompt contains the default instruction.
    // $arguments contains context like 'postId', 'text', etc.
    
    // Return your custom instruction
    return "Correct the grammar and spelling in this text. Please ensure the tone is professional and formal. Keep the same language.\n\n";
}, 10, 2 );

If you need to completely change how a feature works (not just the text prompt), you can hook into the `mwai_magic_wand_{action}` filter. This filter expects the result array to be returned.

add_filter( 'mwai_magic_wand_correctText', function( $result, $arguments ) {
    // Perform your own logic here
    // ...
    
    return [
        'mode' => 'replace',
        'type' => 'text',
        'result' => 'This is the replaced text.',
        'results' => ['This is the replaced text.']
    ];
}, 10, 2 );

External Integration

You can use your AI Engine environments and chatbots on third-party services using the public REST API. You also have the possibility of integrating your chatbot UI — along with its full configuration and connections — into any other website you want using cross-site script integration, even if it’s not running WordPress!

If you’re interested in using your AI Engine environment and chatbots in external applications like Discord, WhatsApp, webhooks, and more, you’ll need to use the REST API. You can learn more about it here: AI Engine REST API.

First, if you want to integrate your chatbot into another webpage, you need to go to the settings and enable the Cross-Site feature:

Then go to the Chatbots tab. Under the chatbot’s settings, open the Cross Site section. Enable the option there, and you’re done.

You need to register the domains on which you want to load the chatbot scripts. If you don’t do so, the script requests will be rejected due to CORS. This ensures your chatbots can’t be used without your consent by someone else trying to load the same scripts.

Now you can just copy and paste the “Embed Code” into any webpage you want.

If you’re doing this on WordPress, either insert it inside a script that is loaded or use a Custom HTML block in your post directly.

If you’re using it on a site that doesn’t run WordPress, make sure you don’t insert it as plain text — the content must be interpreted as HTML so the scripts can load properly.

Discussions

You can go into the settings and, under the Chatbot section, enable the Discussions feature.

This will add a new tab where you can view a history of all the conversations that have taken place in your chatbots, presented in a human-readable format.

All of this data remains entirely on your server—Meow Apps does not process or store any of it. You can read this article to learn more.

You can add a list of the discussions (like ChatGPT) next to your chatbot, by using the mwai_discussions shortcode on your website so each user can see it’s history of conversation.

[mwai_discussions id="default" text_new_chat="+ Start New Discussion"]

You can go to Settings > Chatbot > Discussions to change the display for this shortcode. By default, when the shortcode is loaded on a page, all recent discussions will be fetched every 5 seconds. If you prefer to avoid repetitive requests, you can either lower this value or use a manual refresh option instead.

Local Memory

If you enable the Local Memory option for your chatbot, the current discussion thread will be saved in the user’s browser local storage—not in your database. This means the conversation will persist even if the user refreshes the page or navigates to a different one, effectively caching the chat locally.

However, since this is browser-based, the conversation will not be preserved if the user clears their local storage, switches devices, or uses a different browser.

History Strategy

If the model you have selected supports Responses (OpenAI) you will find a new setting section in your chatbots settings called “Advanced” in which you can choose the History Strategy, which basically dictates how the previous messages from the thread are sent into the current query history to maintain context.

Available Options

Automatic

Best choice for most users as it optimizes performance while ensuring reliability

Default setting that intelligently chooses the best strategy for each situation
Uses Incremental mode when a valid previous_response_id is available
Automatically falls back to Full History mode when:
- No previous response ID exists (first message in conversation)
- The response ID has expired (after 30 days)
- The response ID is invalid or corrupted

Incremental

Uses OpenAI’s previous_response_id parameter to maintain conversation state
Only sends the latest message instead of the entire conversation history
More efficient in terms of:
- Reduced token usage (potentially lower costs)
- Faster processing times
- Lower bandwidth usage
Limitations:
- Only works with valid response IDs (expire after 30 days per OpenAI policy)
- Requires the conversation to have been initiated with Responses API
- May fall back to Full History if response ID becomes invalid

Full History

Sends the complete conversation history with every request
Traditional approach used by most chat implementations
More reliable for complex conversations with many turns
Higher resource usage:
- Increases token consumption
- Larger request payloads
- May impact response times for long conversations
Always works regardless of conversation age or API changes

Chatbots

MCP (Model Context Protocol)

An MCP server works as a structured API-like interface for AI models: the client (such as the Claude app) connects to the server, which exposes a set of endpoints declaring available tools and functions. This enables the model to perform actions like querying, updating, or managing your WordPress content.

You have two main approaches:

Using your WordPress as the MCP server: Claude connects to your WordPress site and gains capabilities based on what is exposed through AI Engine.
Using Claude inside AI Engine: Here, Claude becomes the internal model in AI Engine, and it can connect to a remote MCP server (another site, for example).

WordPress MCP Server

This will allow MCP-compatible application (like ChatGPT and Claude desktop/web app) to connect to your server, fetch all the tools available via AI Engine, and interact with your site by querying these different tools.

First, go to AI Engine settings, and under the MCP section make sure to enable the MCP option, as this will be like enabling the REST API but for AI applications. You can also set a Bearer token, which is an authentication token that you need to keep secret, otherwise anyone could potentially interact with your server.

Using MCP no longer requires the use of SSE, which makes the process much more reliable and easier to set up.

Then you can select all the different “endpoints” (or “tools” if your prefer) that the MCP server will expose. Go to the MCP Features section and select the ones you need. You will see all of them listed there with details about what they do.

Discover all the already available tools exposed through the AI Engine MPC:

AI Engine Free

Core WordPress MCP

Content Management: Create, update, delete posts and pages with full control over titles, content, status, categories, and tags.
Comment Moderation: View, create, update, and delete comments.
User Management: Create users, update profiles, and manage roles.
Media Library: Upload images, manage attachments, and set featured images.
Taxonomies: Create and manage categories, tags, and custom taxonomies.
Settings: Update WordPress options and configurations.
Vision Analysis: Analyze images using AI vision capabilities.

Key Operations: 36 tools covering all core WordPress functionality with proper read/write separation.

Dynamic REST (Raw API Access)

Provides direct access to WordPress’s native REST API endpoints for generic operations — useful for developers who prefer working with standard REST structures.

AI Engine Pro ✨

Plugins MCP

Plugin Discovery: List and search installed plugins.
Plugin Lifecycle: Install, activate, deactivate, update, and delete plugins.
Code Management: Read, create, edit, and delete plugin files.
Advanced Features: Fork plugins to create custom versions.
File Operations: Full access to plugin directory structure.

Key Operations: Complete plugin management, from installation to code-level modification.

Themes MCP

Theme Management: List, install, activate, and delete themes.
Customization: Read and modify theme files (PHP, CSS, JS).
Theme Development: Fork existing themes to create custom versions.
File Operations: Create, edit, and delete theme files.
Asset Management: Handle theme assets and templates.

Key Operations: Full theme lifecycle management including code-level customization.

Any plugin that is compatible with AI Engine MCP and exposes some MCP tools will add those tools for the connected AI application. For instance, if you have SEO Engine installed, Claude or ChatGPT will be able to run SEO-specific processes like scanning your posts for SEO, getting their score, metrics, and more.

If you are a developer, you can build new tools or make your already existing plugin compatible with MCP without doing all the hard work yourself, you can do it through AI Engine by reading this documentation.

You are now ready to control your site through an AI application, follow the article for the service you want:

ChatGPT – Easiest to set up, direct connection.
Claude – Needs a bridge (CLI configuration) between your server and Claude to function.
Claude Code – Control your WordPress site directly from your console terminal.

AI Engine vs. Automattic’s Implementation

Automattic’s Dynamic REST approach exposes WordPress’s REST API through MCP, but it’s complex and not very AI-friendly. It uses verbose data structures, requires technical setup, and lacks context about what’s safe or destructive — making errors more likely. In contrast, AI Engine’s Optimized Tools are built for AI from the ground up, using simple function-like commands, clear parameters, and concise responses. They include smart annotations for safety, advanced features like plugin editing and theme forking, and deliver faster, more efficient, and easier-to-understand interactions for both users and AI assistants.

MCP Orchestration

This will allow your chatbot in AI Engine to query distant MCP servers to run tools outside of your current WordPress environment and use the results in chat. You can think of it as using Function Calling but remotely with tool already made by third party providers.

As you can make your own server an MCP server by reading the above section, you can indeed connect your own site’s MCP server to your chatbot, or connect a different WordPress site to the current one.

First, go to the Dashboard of AI Engine and under the Server module enable the Orchestration option. This will allow you to go into Settings under a new section called “Orchestration.”

Now you will need to prepare your MCP server to register it on AI Engine. For the sake of this tutorial, we will use a free and no-authentication remote MCP server, but in your case, you might need to self-host your MCP server on a distant server or register and configure it from a third-party service.

Remember you don’t have to code anything, this is like function calling but the tools are already made for you and exposed like an API for your chatbot. If you are still hesitating about whether you should go with Function Calling or MCP you can read this documentation.

Let’s use https://remote.mcpservers.org/fetch/mcp to test this out. This is an open MCP server that provides web content fetching capabilities. This server enables LLMs to retrieve and process content from web pages, converting HTML to markdown for easier consumption.

Now we can select this server under the MCP Servers section of our chatbot settings, and the tools will be fetched from the server and declared as tools just like Function Calling.

If you don’t see the “MCP Servers” section, it could be because you haven’t selected a compatible AI model. Make sure you are not using “Default” or “None” and have actually selected a model, and ensure it is either an OpenAI or Anthropic model, as not all models are compatible with MCP.

Manage MCP access

MCP provides powerful WordPress management capabilities, so access must be strictly controlled.

By default, only administrators can access MCP endpoints. This prevents lower-privileged users (subscribers, contributors, etc.) from executing dangerous operations like creating admin users, deleting content, or modifying settings.

When a bearer token is configured, it overrides the default admin check, but access is DENIED unless a valid token is provided. This ensures MCP is secure even with default settings.

To restrict or customize access to MCP, you can use the “mwai_allow_mcp” filter. Here are a few examples.

<?php
// Example 1: Allow access based on user role
add_filter( 'mwai_allow_mcp', function( $allow, $request ) {
  // Allow if already authenticated as admin
  if ( $allow ) {
    return $allow;
  }
  
  // Allow editors and above
  if ( current_user_can( 'edit_posts' ) ) {
    return true;
  }
  
  return false;
}, 10, 2 );

<?php
// Example 2: Allow access based on specific user IDs
add_filter( 'mwai_allow_mcp', function( $allow, $request ) {
  // Allow if already authenticated as admin
  if ( $allow ) {
    return $allow;
  }
  
  // Whitelist specific user IDs
  $allowed_users = [ 2, 5, 42 ]; // User IDs
  $current_user = get_current_user_id();
  
  return in_array( $current_user, $allowed_users, true );
}, 10, 2 );

<?php
// Example 3: Allow based on role, but restrict certain tools by role
add_filter( 'mwai_allow_mcp', function( $allow, $request ) {
  // Allow if already authenticated as admin
  if ( $allow ) {
    return $allow;
  }
  
  // Allow contributors and above
  if ( current_user_can( 'edit_posts' ) ) {
    return true;
  }
  
  return false;
}, 10, 2 );

// Then restrict tools per role
add_filter( 'mwai_mcp_callback', function( $result, $tool, $args, $id, $mcp ) {
  $user = wp_get_current_user();
  
  // Only admins can execute dangerous tools
  if ( $tool === 'delete_post' && !in_array( 'administrator', $user->roles ) ) {
    throw new Exception( "Tool '{$tool}' requires administrator role" );
  }
  
  // Only editors and above can create posts
  if ( $tool === 'create_post' && !current_user_can( 'edit_posts' ) ) {
    throw new Exception( "Tool '{$tool}' requires editor role or higher" );
  }
  
  return $result;
}, 10, 5 );

Function Calling

Function Calling is the idea of letting the AI model know about a list of functions it can call. The model will then wait for the result of the executed function and do (or not) something with the output, if there is one.

Function Calling (also called Tools) needs some functions to be callable so they can be executed. Note that the AI itself does not run code—it can’t execute functions directly. Instead, it knows that it has access to a list of predefined functions that you’ve created.

When the AI model determines that it wants to execute a function, it sends back a reply with the name of the function and any necessary arguments. Then, your server (in the case of AI Engine) runs the function, generates an output, and sends it back to the AI model so it can finalize its response.

Dynamic and Static

There are two types of functions that can be called: Dynamic and Static.

A dynamic function is used to enrich the AI’s final reply with additional data. Dynamic functions can also be called in a cascade, depending on the functions you’ve defined and the AI’s decisions. For example, if you ask the AI to “send me an email,” it might first call a function to retrieve your email information, then call another function to actually send the email.

It’s recommended to use dynamic functions, as the final answer will be written by the AI and will therefore flow naturally. You can register your functions using Code Engine or manually.

Code Engine

Code Engine was previously called Snippet Vault, which is now deprecated. So make sure you’re using Code Engine to continue receiving updates.

The first step is to download the Code Engine plugin. This plugin is 100% free and can be used similarly to Code Snippet, but with even more features. If you’re familiar with Code Snippet, you can even import all your code from there for an easy switch. You can find the plugin here: Code Engine.

Code Engine allows you to store PHP and/or JS snippet code inside a dashboard and execute them whenever you want, even using a REST API.

You have a special type of snippet in Code Engine called Callable. As the name suggests, this snippet can only contain one unique PHP function. You can declare its arguments and define them in specialized side settings. Once this is done, the AI model can use them easily, and you don’t have to do anything more on your side.

By using Code Engine, you can declare Callable functions that can be used in Function Calling. Code Engine and AI Engine will then work together automatically to handle the entire pipeline—asking to run a function → running the function → returning the result to the AI → continuing the query—without you needing to do anything. This is very powerful and is the only plugin on WordPress that can do this!

Simply navigate to your chatbot settings and locate the new “Functions” section. Then, select the function you want to use for the current chatbot session. From there, function calling is automatically handled, streamlining the process for you.

Here, we’re running a PHP callable function—so when the AI wants to run the function, it will be executed on your server. This is really useful if you need to access the database, get user information, fetch posts, and so on.

But it’s not limited to that. You can also create a JavaScript callable function to interact with your website. For instance, you could ask Nyao to change the color of the website—and watch it happen live!

Customization

In the Chatbots tab, you can switch the toggle from Chatbots to Themes. There, you can modify the default themes that come with AI Engine using a no-code editor.

You can customize pretty much everything for the default themes (Timeless, Messages, ChatGPT) using the visual editor. But if you want to change something specific in an existing theme, you can use the Custom CSS section to adjust just that part instead of writing your whole theme from scratch.

If you want more customization, you can create your own theme by clicking the + button. This will open a CSS editor where you can manually use AI Engine’s chatbot class definitions to build your own custom design.

If you have some CSS ready to load, you can also use the following filter to change the CSS of your theme on the server side:

add_filter( 'mwai_chatbot_style', 'my_chatbot_style', 10, 2 );

function my_chatbot_style( $style, $chatbotId ) {
  return $style . "
    <style>
      #mwai-chat-$chatbotId {
        background: #343541;
        color: white;
        font-size: 15px;
      }
    </style>
  ";
}

These themes can also be used in the AI Forms.

Icons & Avatars

The icon refers to the chatbot pop-up image, which is only visible when your chatbot is configured as a pop-up—either because you’ve enabled that setting or are using the Site Wide Chatbot. The avatar, on the other hand, refers to the image displayed inside the chat itself, serving as the “profile image” of the chatbot and the user.

Settings

Make sure to enable the “Pop-up” option under the Appearance section to make the pop-up settings appear. In there, you’ll be able to choose an icon or enter a custom URL directly.

To change the avatar, simply check the “Avatar” boxes in the Appearance section and upload or select the desired images.

Shortcode

Using the shortcode of the chatbot, you can specify the icon param, with the URL of your icon, like this:

[mwai_chat icon="https://mywebsite.com/icon.png"]

To set the Avatar you can replace the name of the Chatbot by using a link instead of a regular text.

[mwai_chat ai_name="https://mywebsite.com/ai-avatar.png"]
[mwai_chat ai_name="https://mywebsite.com/ai-avatar.png" user_name="https://mywebsite.com/user-avatar.png"]

You can get the URL directly from your Media Library by clicking the “Copy URL to clipboard”.

If you keep the user_name empty and an user is connected, it will retrieve the gravatar or the avatar already set in WordPress for this user. Remember that by default, user_name is not empty and set to “User :”.

Displayed Texts

The chatbot displays various text elements inside and around the chat interface: the AI name, the user name, a name for guest users, a compliance text shown below the chatbot, an Icon text above the chatbot when it’s in pop-up mode and a Start Sentence to have a first message in the chat. You can customize all of these values individually in the chatbot settings under the Appearance section.

Settings

Simply change these values in the Appearance settings and check the preview on the right side to see how your modifications look. The Send and Clear settings correspond to the text inside the respective buttons. Depending on your selected theme, this text might not be visible—for example, the Timeless theme uses icons instead of button text.

There are a few placeholders available for you to use in your ai_name parameter. Generally, you would want to use {DISPLAY_NAME}, which is what the user would expect to see.

If you want to change the text that appears above the popup, make sure to go into the Popup settings. You can also change the placeholder text from there if needed.

You can style it by using its class : .mwai-icon-text.

You can use the “UI Builder” to add or modify specific elements of the chatbot window. Some of these elements can use text from your settings; for instance, the Header will use the popup title in the Timeless theme. By default it is “AI Engine”, but you can set it to whatever value you want:

Shortcode

You can change all of these settings through the shortcode as well. Here are an examples. You can refer to the image of the settings above, as the parameter names in the shortcode are the same as those used in the settings, make sure to use snake case for each of them. For instance “Icon Text” will be “icon_text”.

[mwai_chat user_name="{DISPLAY_NAME}: " guest_name="Jon Meow: "]

Positioning

If you haven’t noticed already from the other screenshots, there’s a position setting available in the Popup section.

Settings

Shortcode

[mwai_chat icon_position="bottom-left"]

Custom positioning

If you want to position the chatbot popup in a custom location, you can use custom CSS targeting the .mwai-window class or directly using the chatbot ID. Here’s how:

If you are not using the Default chatbot, make sure the ID is matching the chatbot you are trying to modify.

First, locate the chatbot container by its ID — it will look something like #mwai-chatbot-default ( id=”mwai-chatbot-default” )
Then, apply your desired position using CSS. For example:

#mwai-chatbot-default {
  top: 30px;
  bottom: inherit;
  right: 30px;
}

This will move the popup to 30px from the top and right.

Advanced Customization

This lists the CSS classes used in the AI Engine chatbot theme structure, organized hierarchically from the outermost container to the innermost elements.

Root Container

`.mwai-chatbot` (+ theme class)

The root container for the entire chatbot. Combined with a theme class like .mwai-foundation-theme, .mwai-chatgpt-theme, .mwai-timeless-theme, or .mwai-messages-theme.

Modifiers:

.mwai-window — Popup/floating chat window mode
.mwai-fullscreen — Fullscreen mode
.mwai-open — Window is currently open
.mwai-opening — Window is animating open
.mwai-closing — Window is animating closed
.mwai-bubble — Bubble-style trigger icon
.mwai-bottom-left, .mwai-bottom-right, .mwai-top-left, .mwai-top-right — Window position
.mwai-center-open — Center the window when open
.mwai-form-container — AI Forms mode

Window Mode Structure

`.mwai-trigger`

The clickable icon/button that opens the chat window (only visible when window is closed).

Children:

.mwai-icon-text-container — Container for the optional text bubble
- .mwai-icon-text — The text bubble message
- .mwai-icon-text-close — Close button for the text bubble
.mwai-icon-container — Container for the trigger icon
- .mwai-icon — The actual icon image
- .mwai-emoji — Emoji icon alternative

`.mwai-window-box`

Wrapper for window animation transitions. Contains the header and body.

Header

`.mwai-header`

The header bar of the chat window (visible in window mode).

Children:

.mwai-name — Chat title/name display
.mwai-buttons — Container for window control buttons
- .mwai-resize-button — Fullscreen toggle button
- .mwai-close-button — Close window button

`.mwai-mobile-header`

Mobile-specific header shown when chat is fullscreen on mobile devices.

Children:

.mwai-mobile-header-title — The title text
.mwai-mobile-header-close — Close button

Body

`.mwai-body`

Main body container holding all chat content. Uses flexbox column layout.

Children (in order):

.mwai-shortcuts — Quick action shortcuts (optional)
.mwai-conversation — The message thread
.mwai-blocks — Dynamic content blocks (cards, widgets, etc.)
.mwai-files — File upload previews
.mwai-input — The input area
.mwai-footer — Footer with tools and compliance text

Shortcuts

`.mwai-shortcuts`

Container for quick action buttons.

Children:

.mwai-shortcut — Individual shortcut button
- .mwai-icon — Shortcut icon

Modifiers:

.mwai-success, .mwai-danger, .mwai-warning, .mwai-info — Color variants

Conversation / Messages

`.mwai-conversation`

Scrollable container for all chat messages. Supports custom scrollbar styling.

Modifiers:

.mwai-terminal — Terminal/CLI display mode

`.mwai-reply`

Individual message container (both user and AI messages).

Modifiers:

.mwai-user — User’s message
.mwai-ai — AI’s response
.mwai-system — System message
.mwai-error — Error message
.mwai-fade-out — Fade-out animation state

Children:

.mwai-name — Sender name/avatar area
- .mwai-name-text — The name text
- .mwai-avatar — Avatar image container
  - .mwai-svg — SVG avatar modifier
.mwai-text — The message content
.mwai-reply-actions — Action buttons (copy, download)
- .mwai-copy-button — Copy to clipboard
- .mwai-download-button — Download content

Message Content

`.mwai-text`

The text content area within a message. Contains markdown-rendered content.

Notable children:

.mwai-image — Inline images
.mwai-filename — File attachment display
.mwai-typewriter — Typewriter animation wrapper
.mwai-gallery — Image gallery grid
pre, code — Code blocks with syntax highlighting (.hljs-* classes)
Standard HTML: h1–h6, p, ul, ol, table, a

Terminal Mode

`.mwai-terminal` (on `.mwai-conversation`)

Transforms the conversation into a terminal/CLI interface.

Children:

.mwai-terminal-line — Individual terminal line
- .mwai-terminal-user — User input line
- .mwai-terminal-user-typing — Currently typing line
- .mwai-terminal-assistant — AI response line
- .mwai-terminal-system — System message line
.mwai-terminal-prompt — The command prompt icon (chevron)
.mwai-terminal-text — Line text content
.mwai-terminal-input-wrapper — Wrapper for input text
.mwai-terminal-typed — Currently typed text
.mwai-terminal-cursor — Blinking cursor
- .mwai-terminal-cursor-active — Active/focused cursor
- .mwai-terminal-cursor-typing — Typing state
- .mwai-terminal-cursor-inactive — Inactive state

Dynamic Blocks

`.mwai-blocks`

Container for dynamically injected content blocks (rendered HTML).

Children:

.mwai-block — Individual block wrapper

File Uploads

`.mwai-files`

Container for file upload previews before sending.

Children:

.mwai-file-preview — Individual file preview
- .mwai-file-content — Content wrapper
- .mwai-file-thumbnail — Image thumbnail
- .mwai-file-icon — Document type icon
- .mwai-file-info — File details
  - .mwai-file-name — Filename
  - .mwai-file-size — File size
- .mwai-file-progress — Upload progress bar
  - .mwai-file-progress-bar — Progress indicator
- .mwai-file-remove — Remove file button

Input Area

`.mwai-input`

Container for the text input and submit button.

Modifiers on .mwai-input-text:

.mwai-blocked — Input is blocked/disabled
.mwai-dragging — File is being dragged over

Children:

.mwai-input-text — Text input wrapper
- textarea — The actual text input
- .mwai-microphone — Voice input button
- .mwai-file-upload-icon — File upload trigger
  - .mwai-lucide — Lucide icon variant
  - .mwai-upload-count — Upload count badge
.mwai-input-submit / button — Submit button

`.mwai-file-upload`

File upload functionality wrapper.

`.mwai-file-upload-icon`

The upload icon with sprite-based states:

.mwai-idle-add — Default add state
.mwai-image-add, .mwai-image-up, .mwai-image-del, .mwai-image-ok — Image upload states
.mwai-document-add, .mwai-document-up, .mwai-document-del, .mwai-document-ok — Document upload states

Footer

`.mwai-footer`

Footer area containing tools and compliance text.

Children:

.mwai-tools — Tool buttons container
- .mwai-file-upload — Upload button
- .mwai-file-upload-icon — Upload icon
.mwai-compliance — Legal/compliance text

Realtime Voice

`.mwai-realtime`

Container for real-time voice conversation UI.

Children:

.mwai-visualizer — Audio visualization
- .mwai-animation — Animated bars
.mwai-controls — Voice control buttons
- .mwai-push-to-talk — Push-to-talk button
- .mwai-active — Recording active state
- .mwai-talk-hint — Helper text
.mwai-last-transcript — Last transcribed text
.mwai-statistics — Usage stats display
.mwai-options — Additional options
- .mwai-option — Individual option toggle

Discussions (Chat History)

`.mwai-discussions`

Container for the discussions/history panel.

Children:

.mwai-header — Panel header
- .mwai-refresh-btn — Refresh list button
.mwai-body — Discussion list container
.mwai-discussion — Individual discussion item
- .mwai-discussion-content — Content wrapper
- .mwai-discussion-title — Discussion title
- .mwai-discussion-info — Metadata
  - .mwai-info-item — Individual info piece
- .mwai-discussion-actions — Action buttons
  - .mwai-menu-icon — Menu trigger
- .mwai-active — Currently selected discussion
.mwai-pagination — Pagination controls
- .mwai-page-indicator — Page number display
.mwai-loading-overlay — Loading state
- .mwai-spinner — Loading spinner

Debug / Stream Events

`.mwai-chunks`

Debug display for streaming events.

Modifiers:

.mwai-chunks-collapsed — Collapsed state

Children:

.mwai-chunks-header — Header with controls
- .mwai-chunks-title — Section title
- .mwai-chunks-status — Status indicator
- .mwai-chunks-toggle — Expand/collapse button
.mwai-chunk — Individual event chunk
- .mwai-chunk-header — Chunk header
  - .mwai-chunk-time — Timestamp
  - .mwai-chunk-type — Event type badge
  - .mwai-chunk-data — Data preview
  - .mwai-chunk-expand — Expand icon
- .mwai-chunk-details — Expanded details
  - pre — JSON/raw data

Context Menu

`.mwai-context-menu-portal`

Portal container for context menus (appears at document body level).

Children:

.mwai-context-menu — The menu container
- .mwai-menu-item — Individual menu item
  - .mwai-danger — Destructive action style

Utility Classes

Transitions

.mwai-transition — Element with opacity transition
.mwai-transition-visible — Visible state (opacity: 1)

Visibility

.mwai-hidden — Hidden element (used with reply actions)

Buttons

button.mwai-busy — Loading state with spinner

CSS Custom Properties (Variables)

These variables control the theme appearance:

Variable	Description
`--mwai-spacing`	Base spacing unit (padding/margins)
`--mwai-fontSize`	Base font size
`--mwai-lineHeight`	Line height for text
`--mwai-borderRadius`	Corner radius
`--mwai-borderColor`	Border color
`--mwai-width`	Chatbot width
`--mwai-maxHeight`	Maximum height (window mode)
`--mwai-iconSize`	Trigger icon size
`--mwai-fontFamily`	Font family
`--mwai-fontColor`	Primary text color
`--mwai-headerColor`	Header text color
`--mwai-primaryColor`	Accent/primary color
`--mwai-accentColor`	Secondary accent color
`--mwai-backgroundPrimaryColor`	Main background
`--mwai-backgroundSecondaryColor`	Secondary background
`--mwai-backgroundHeaderColor`	Header background
`--mwai-backgroundAiColor`	AI message background
`--mwai-bubbleColor`	Bubble trigger color
`--mwai-iconTextColor`	Icon text bubble text color
`--mwai-iconTextBackgroundColor`	Icon text bubble background
`--mwai-conversationsBackgroundColor`	Discussions panel background
`--mwai-conversationsTextColor`	Discussions text color
`--mwai-errorBackgroundColor`	Error message background
`--mwai-errorTextColor`	Error message text color
`--mwai-lineColor`	Divider line color
`--mwai-terminal-active-color`	Terminal active element color

AI Forms

First step if not already done, enable the feature:

When Should I Use AI Forms?

Got a scenario where you need to whip up a custom response based on user input? Whether it’s a quiz or a decision tree, AI Forms can be your go-to solution. It’s way easier than teaching your chatbot every single step. Trust me!

We’re crafting a travel assistant using AI Forms. It’ll quiz users about their travel vibe, interests, and boom—suggest a destination. Happy with the choice? It’ll roll out a detailed itinerary and, for the grand finale, a price estimate. Sounds tough? Nah, you’ll nail it in under 5 minutes!

How To Build a Form ?

AI Forms are built using Gutenberg Blocks. Each component of the form is its own block with its own settings, and they can reference each other, act as parents, and create conditional logic between them.

Since this relies on Gutenberg, if you’re using a third-party builder you won’t be able to create a form directly within your post. In that case, you can use the Forms tab (by enabling the Forms Editor in the plugin settings) to build forms there and then embed them in your posts using the related shortcode.

Of course, feel free to use whichever method works best for you, either creating the form directly in your post or managing them through the plugin settings.

Example

Here is a form built directly on this page so you can see all the different types of inputs you play with.

The Submit button will be disabled as long as the required field is empty.

AI Form Blocks

Once you have the AI Forms feature enabled, you will have access to this new blocks:

Form Submissions

If you want to see the data submitted through your forms by your users, enable the “Queries Form Data” option to display it in the Insights tab. This will let you review exactly what information is being sent in each form submission.

If you want to receive email notifications whenever a form is submitted, instead of checking the queries manually, you can use the Notifications addon. It will automatically send you an email each time a new submission is received.

Step by Step Example

Time to build our first form with blocks. Kick things off in an “AI Form Container” block. It’s not a must, but let’s play it safe for now.

Populate this Container with “AI Form Fields” to ask questions like “Previous destinations,” “What are your hobbies?” and stuff like that.

Set up all your fields now, and we’ll connect the dots later. Swap out the “LABEL TEXT” for each question and give each a snappy “FIELD NAME” for easy reference later on.

Your setup should look a bit like this now:

We’ve got 3 fields chilling in our container, each rocking a different 1️⃣ field type. Notice the 2️⃣ “select” field type with options for users to pick from. We’ll call back to each field by their 3️⃣ “field name” in our prompts later.

Time for Prompts!

Add a “AI Form Submit” block to craft our prompts based on user input. Here, you can pick your model (you can also use an OpenAI Assisstant !), set the temperature, and craft that prompt. Field names like {LAST_TRIP} will stand in for user values. Got optional fields? Check out this doc for tips.

Almost there! See our prompt referencing the fields? You can also point to webpage elements with query selectors. Got a “#target-element” div? Mention it in your prompt like ${#target-element}. Pros can target just about anything! Plus, you can pull in data from databases, APIs, plugins, and more—learn all about it here.

Output Time!

Our output’s currently non-existent (“N/A”), so let’s fix that. While query selectors can place our output anywhere, let’s keep it simple with an “AI Form Output” block. Link it to our submit block with its ID.

Boom! You’ve just birthed an AI travel advisor! 🌍 Let’s give it a whirl:

But why hit the brakes now? The power of AI Engine and AI Forms means you can get super creative. Use one form’s output as another form’s input! Remember those query selectors? Let’s loop it back into a new prompt.

We’ll set up 3 submit buttons, each with its own prompt, tied to one output. They’ll each take the previous response and offer more detailed travel plans based on the top 3 options.

Here’s our new setup: a fresh container, a friendly message, and 3 columns with submit buttons. Each button (1, 2, 3) points to one output (5) and has its own prompt (4), referencing the earlier response. Button (1) drops “first” in the prompt, and you can guess what buttons (2) and (3) will say. 😉

Let’s test with the same values as before and hit “option 1”:

Cool, right? 🌟 Imagine the possibilities with a sprinkle of imagination! To wrap up, we’ll make one last form for a price estimate using the same tricks.

That’s our final masterpiece. You can layer this with filters, JavaScript, and more for powerful tools and slick user experiences. Just look at what you can build with AI Engine forms! Go wild and have fun!

Note that this tutorial only shows you what can be done with the basic blocks—a few inputs and outputs. You can create more complex behaviors using Conditional Blocks, which allow you to display elements (pretty much whatever you want) based on specific conditions. You can also use the File Upload field to have documents or images read and included in the prompt when the form is submitted.

Voice

You can set your chatbot mode to Realtime to use OpenAI’s voice-to-voice models, which support both voice input and voice output.

Make sure to have an OpenAI Environment selected as well as a realtime model; if both are not selected properly, the chatbot won’t be able to work.

Text To Speech

With the regular chatbot, text-to-speech is not supported natively by AI Engine, but some freelancers have developed AI Engine addons that handle this functionality.

Speech To Text

A regular chatbot can support voice input to write messages instead of typing. Note that this does not rely on any AI transcription model, nor is this a feature of the plugin itself. This uses your web browser’s built-in Web Speech API, so the result and the supported languages you get from it depend on your current device.

Correct the typos and grammar mistakes in this text without altering its content. Ensure the reply is in the same language as the original text.

Ensure the reply is in the same language as the original text (en_us, English).

You can enable this by going to Settings > Chatbot > Web Speech API.

This will add a microphone icon in the message input section of your chatbot:

Magic Wand Customization

Local Memory

History Strategy

Available Options

Automatic

Incremental

Full History

WordPress MCP Server

AI Engine vs. Automattic’s Implementation

MCP Orchestration

Manage MCP access

Dynamic and Static

Code Engine

Icons & Avatars

Settings

Shortcode

Displayed Texts

Settings

Shortcode

Positioning

Settings

Shortcode

Custom positioning

Advanced Customization

Root Container

.mwai-chatbot (+ theme class)

Window Mode Structure

.mwai-trigger

.mwai-window-box

Header

.mwai-header

.mwai-mobile-header

Body

.mwai-body

Shortcuts

.mwai-shortcuts

Conversation / Messages

.mwai-conversation

.mwai-reply

Message Content

.mwai-text

Terminal Mode

.mwai-terminal (on .mwai-conversation)

Dynamic Blocks

.mwai-blocks

File Uploads

.mwai-files

Input Area

.mwai-input

.mwai-file-upload

.mwai-file-upload-icon

Footer

.mwai-footer

Realtime Voice

.mwai-realtime

Discussions (Chat History)

.mwai-discussions

Debug / Stream Events

.mwai-chunks

Context Menu

.mwai-context-menu-portal

Utility Classes

Transitions

Visibility

Buttons

CSS Custom Properties (Variables)

When Should I Use AI Forms?

How To Build a Form ?

Example

AI Form Blocks

Form Submissions

Step by Step Example

Time for Prompts!

Output Time!

Text To Speech

Speech To Text

`.mwai-chatbot` (+ theme class)

`.mwai-trigger`

`.mwai-window-box`

`.mwai-header`

`.mwai-mobile-header`

`.mwai-body`

`.mwai-shortcuts`

`.mwai-conversation`

`.mwai-reply`

`.mwai-text`

`.mwai-terminal` (on `.mwai-conversation`)

`.mwai-blocks`

`.mwai-files`

`.mwai-input`

`.mwai-file-upload`

`.mwai-file-upload-icon`

`.mwai-footer`

`.mwai-realtime`

`.mwai-discussions`

`.mwai-chunks`

`.mwai-context-menu-portal`