Tutorial

Elevate your WordPress site with our AI plugin! Seamlessly generate and enhance content, boost your SEO, and integrate a ChatGPT-like chatbot, plus much more. Directly connect to OpenAI and other AI services such as Claude and Gemini without extra third-party fees. The chatbot feature is our most popular tool, and AI Engine tracks your usage to keep things streamlined. Let’s have a quick tour!

AI Engine is getting updates almost on a daily basis, and is far more advanced than what’s presented here. Access the latest documentation here, and do not hesitate to join our community on Discord.

Chatbot

Your First Chatbot

Creating your first chatbot is extremely simple!

Head to the Chatbots tab and explore the Settings. Use the chatbot’s shortcode to add it to specific pages, or choose a chatbot in the Site-Wide Chatbot selector to feature it on every page of your site. You can also customize the shortcode parameters to tailor the chatbot’s behavior.

Instructions are key! You can set the AI to impersonate figures like Phil Collins or Barack Obama, and more. Beyond impersonations, you can also provide detailed information about your website, such as opening times if it’s a restaurant, menus, prices, and other relevant business details.

Chabot Styles, Icons & Avatars

If you set the User Name (user_name) and AI Name (ai_name) to nothing (or “” if you type it manually in the shortcode), the chatbot will use avatars instead. If the user is connected, its avatar will be used. Otherwise, defaults one will be used.

The chatbot is built with clean HTML elements and classes, making it easy to style with just a few lines of CSS to seamlessly blend into your website. If you’re not familiar with CSS, no worries! You can use the Theme Editor to create and assign custom themes to the chatbot.

Contextualization

It’s important to enrich your chatbot with context. There are three main approaches to this, each varying in complexity. By integrating a knowledge base or specific details about what you do, the chatbot can become more tailored and effective. We’ll discuss these methods from the simplest to the most complex.

1. Instructions: An easy way to make your AI awesome

Modern AI models, trained on vast web data up to a recent cutoff, understand multiple languages, concepts, and cultural nuances. You can customize them to adopt specific characters or personalities—the possibilities are endless! Additionally, you can specify how conversations should unfold using the Instructions parameter. Detailed instructions, possibly extending over 7-8 paragraphs, are crucial to finely tune the AI’s behavior and improve its interactions with your site visitors.

Here is an example: Act as a giant cat that can fly and transport people very quickly to different places in the world. A potential client will talk to you now. Be creative on your offers, your prices, and help the client picking a location. Be funny and kind, and from time to time, rhythm your sentences with cat sounds.

2. Content-Aware: Discussing the current content

This feature adds the cleaned, text-only content of the current page into the chatbot’s context, making it aware of that information. To enable this, you’ll need to include a special placeholder, {CONTENT}, in the Instructions. For instance, Instructions could be set up as follows:

You are the author of the article that will follow. Let's have a discussion about the article that you wrote. Here is the content of this article:

{CONTENT}

Please note that there are a few \n in this context. They represent line breaks, and a double like breaks is basically a paragraph. The {CONTENT} is automatically replaced by the content of the page. Keep in mind that the AI models are processing natural language. The context should be nice, clean and organized; that will increase the quality of its conversation skills!

4. Embeddings: Limitless awareness of a knowledge base

This feature is available with the Pro Version of AI Engine, which also requires an access to a vector database like Pinecone or Qdrant. AI Engine simplifies the creation of embeddings via its user interface. You can create embeddings from your article content or other relevant information about your business. When a question is asked, the chatbot searches for the most pertinent embedding to use as context for crafting its response, or it might use the response directly as provided by the embedding

3. Fine-tuned Model: Shaping the AI to think and act just as you want

You might want your chatbot to mirror your behaviors, speech patterns, and knowledge of your business, or even fully replace you! While this is achievable, it’s complex and not widely adopted by major websites due to its difficulty. It’s wise to master simpler techniques before attempting this. Fine-tuning involves training an AI model specific to your needs, a task that requires significant effort and expertise. Ready to learn more? Check out our guide: How to Train Your Own Model for WordPress.

Discussions

You can add a list of the discussions (like ChatGPT) next to your chatbot, by using the mwai_discussions shortcode.

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

It will look like this:

AI Tools

AI Copilot

In the Post Editor, simply use space and ask the AI to write a text for you.

Magic Wand

You can select words or sentences, and perform some actions, such as enhancing the text, or translating it.

Content & Images Generator

If you are interested in automatically generating content and images, you can also do this; this is only accessible through the WordPress Admin.

AI Forms (Pro)

With a few blocks, you can create your own AI-powered form. Let’s take an example: you would like to create a simple form that ask the visitor for a music style and favorite band. Based on this, the AI will suggest new bands to listen to.

With the default theme, it will look like this:

This is extremely easy to create with AI Forms. In the Post Editor, try to replicate this form using AI Forms blocks. It’s basically a AI Form Container, in which I have added two AI Form Field (one is set as a Select, the other one as an Input). Then, you’ll need an AI Form Submit and an AI Form Output.

If you don’t use blocks (Gutenberg Editor), you can create this form using a plugin like Reusable Blocks Extended then drop the shortcode of that form anywhere you like, including Elementor and other page builders.

AI Form Output

The AI Form Output is actually a simple placeholder, which you define by giving it an it (here, I choose it to be “mwai-123”). You don’t actually need to use that block, as any other placeholder or element on your page could receive the result from AI.

AI Form Field

The AI Form Field is straightforward. Pick an input type, a label, and you’re done! Wait, no, you also absolutely need to set a name for it. It’s automatically generated based on the label, but you can also modify it. In this case, I have two fields using the names MUSIC_TYPE and FAVORITE_BAND.

AI Form Submit

The AI Form Submit is where everything happens. In my example, it looks like this when you click on it:

In the sidebar, pay a close attention to the Prompt and the Output Element. The prompt represents the query to the AI, and you should use the names of your fields surrounded by curly braces. They will be replaced automatically by what the user typed in. The results of the AI will be written in the Output Element. This is a CSS selector, so you can really use anything you like here. Of course, you can use the ID of the AI Form Output.

Note: If markdown format is detected in the answer, it will be converted into HTML. Therefore, if you wish the answer to be formatted, add “Use markdown.” at the end of your Prompt. The AI will make it look better for you.

AI Form Container

It’s not mandatory to embed those blocks in a AI Form Container. However, if you have more than one form in the same page, it will allow a smoother experience (for example, when the AI is processing the data, only the buttons and fields in that specific form will be disabled). Also, the AI Form Container allow to inject some CSS for that form, or to apply a theme (by default, a ChatGPT-look is used).

Embeddings

Introduction to Vectors

Embeddings are textual data converted into AI-searchable vectors. They must be stored in a vector database, which differs from typical databases like MySQL used within WordPress, as it’s designed for comparing these vectors. For instance, an embedding containing the synopsis of “Star Wars” could match with a query like “Who is Luke Skywalker?” The matching embedding then informs the AI’s response.

Setting up embeddings in AI Engine is straightforward. First, you’ll need an account with a vector database provider like Pinecone or Qdrant. After creating your account, add it as a new environment in the Environments for Embeddings section. You can then assign this environment to your chatbots or AI forms to start using embeddings.

Manual Embedding

To get started with creating your first embedding, I recommend focusing on essential contact information that visitors frequently seek. Create an embedding titled “Company Information” or “Personal Information.” This embedding should include details such as your phone number, email address, and physical location if applicable. This will make it easier for the AI to provide accurate and relevant responses to queries about how to contact or visit you.

Title: My Personal Information / Contact
Email: [email protected]
Address: Naka-meguro, Tokyo, Japan. Open daily from 10 AM to 5 PM. Closed on Wednesdays. Extended hours until 10 PM on Saturdays.
Contact Form: https://blabla.com/contact
Phone Number: 0x0-0xx0-x00x (Unavailable during lunchtime and evenings)

The title of the embedding is just for easy identification. After adding your embedding, switch from EDIT to AI SEARCH mode to test and refine your embeddings. When you search for queries like “What’s your phone number?” the results might not show if the scores are too low. If this happens, adjust the Min Score and Max Result settings in the environment to better capture and display results. A high score indicates that the embedding is well-suited to be used by the AI for generating responses.

Great, give it a try! Ask the chatbot how to contact you. If everything is set up correctly, it should provide the right contact details from the embedding you’ve created. If the response isn’t accurate or doesn’t appear, you may need to adjust the settings or refine the embedding to ensure it’s effectively retrieving the information.

Optimization & Debugging

You need to take great care of your embeddings as they really have an impact on all the answers that will be given. I would like to go through another example to introduce a few more things. Let’s say I want my embeddings to know about me (Jordy) but also my friend, Tomoya. Our information will be in different embeddings but I would like them both to be used when needed. This will be done this way:

As you can see above, I have two manual embeddings with information about my friend and I. In the sidebar, I set a Minimum Score of 80, and a Max Embeddings of 2. I switched to AI SEARCH, then typed a query about making a story about both of us. You can see that our two embeddings came first, and their score appear in green, which means they would be used in this case.

Let’s see if it’s true, and try in the chatbot.

That works fine! Of course, this case is ideal. However, often you will need to find out why a conversation didn’t go as planned with the AI, and check which embeddings were used. You can do this in the Discussions tab. Here is how it looks.

Click on the discussion. In the sidebar, you’ll see which embeddings were used by the AI to create its reply.

Embeddings Synchronization

You can have your embeddings created and synchronized automatically. For this, check the Sync Posts and Auto-Sync Posts sections.

Statistics & Limits

These features are exclusive to the Pro Version of AI Engine. With it, you can restrict AI usage to specific users or just yourself, and monitor executed queries. Please check the docs to learn about those