Conversation starters are a beloved feature from ChatGPT that are now possible in AI Engine. I’ve included the code and instructions below.

If you’re looking for buttons that AI can dynamically add to responses, including multi-select buttons, check out my plugin here.

Updated for AI Engine 2.5.1 on July 28th 2024

Installation

Add the following JavaScript to your post or page that has an AI Engine bot on it:

var mwaiButtons = {
    "Write a resume": // button text
    {
        "prompt": "Write the title for an example resume and then ask me if I'd like to continue.", // the message sent to chatbot
        "sees": "Write a resume for me" // the text that appears in chat
    },
    "Write an essay": // button text
    {
        "prompt": "Write the title for an example essay and then ask me if I'd like to continue.", // the message sent to chatbot
        "sees": "Write an essay for me" // the text that appears in chat
    },
};

(function waitForMwaiAPI(startTime) {
    if (typeof MwaiAPI !== 'undefined' && document.querySelector('.mwai-reply')) {
        function mwaiSearchReplace(textDiv) {
            function replaceText(text) {
                for (let buttonName in mwaiButtons) {
                    const buttonData = mwaiButtons[buttonName];
                    text = text.replaceAll(buttonData["prompt"], buttonData["sees"]);
                }
                return text;
            }
            textDiv.forEach(function(element) {
                const html = element.innerHTML;
                const newHtml = replaceText(html);
                if (html !== newHtml) { element.innerHTML = newHtml; }
            });
        }
        MwaiAPI.chatbots.forEach(chatbot => {
            // Set up observer on .mwai-chatbot to look for changes to .mwai-conversation
            const chatbotElement = document.querySelector('#mwai-chatbot-'+chatbot.botId);

            if (chatbotElement) {
                function doButtons() {
                    const textDiv = chatbotElement.querySelectorAll('.mwai-reply');
                    if (textDiv.length == 1 && !chatbotElement.querySelector(".mwai-shortcuts")) {
                        // there is only one message in chat - assuming it's the bot's intro message
                        // and the buttons have not been added yet
                        var buttons = [];
                        for (var buttonText in mwaiButtons) {
                            var button = mwaiButtons[buttonText];
                            buttons.push({
                                type: 'message',
                                data: { 
                                    label: buttonText, 
                                    message: button.prompt, 
                                    variant: null,
                                    icon: null
                                }
                            });
                        }
                        if (buttons.length > 0) { chatbot.setShortcuts(buttons); }
                    }
                    mwaiSearchReplace(textDiv);
                }
                const conversationObserver = new MutationObserver((mutationsList, observer) => {
                    for (let mutation of mutationsList) {
                        if (mutation.type === 'childList') {
                            doButtons();
                        }
                    }
                });
                const observerConfig = {
                    childList: true, // observe child node changes
                    subtree: true, // observe descendants
                    characterData: true // observe changes in text content
                };
                const conversationElement = chatbotElement.querySelector('.mwai-conversation');
                if (conversationElement) {
                    conversationObserver.observe(conversationElement, observerConfig);
                    doButtons();
                }
            }
        });
    } else {
        if (Date.now() - startTime < 3000) {
            setTimeout(() => waitForMwaiAPI(startTime), 20);
        }
    }
})(Date.now());

---

To modify the provided code, first locate the section corresponding to the button you wish to edit. For instance, if you’re adjusting the “Write a resume” button, focus on its block within the mwaiButtons object. To change the button text, replace “Write a resume” with your new text, ensuring it remains within the quotes. To modify the message sent to the chatbot, alter the string assigned to “prompt” within the same button’s block. Lastly, to adjust what text appears in the chat, edit the string assigned to “sees”. Repeat this process for any other buttons you need to modify, making sure to maintain the object structure integrity by keeping all changes within their respective curly braces and ensuring each property is followed by a comma if it’s not the last item in the block.

To add a new button to the mwaiButtons object, append a new entry at the end, before the closing curly brace. Ensure your new button has a unique name followed by a colon, then define its properties within curly braces. For instance, "New Button Text": {"prompt": "Message to chatbot", "sees": "Text appearing in chat"}. Make sure to separate this new entry from the preceding ones with a comma. This structure includes the button text as the key, and an object containing the prompt and sees properties, which respectively define the message sent to the chatbot and the text displayed in chat.

Want more functionality? Check out my multiple-choice buttons!

---

Let’s enhance your business! I can help you develop custom AI engine extensions or broader AI strategies.
Contact me.