How to create a ChatGPT Ai ChatBot with WordPress Gutenberg

I recently watched one of my favourite episodes of “The IT Crowd” which featured a website called BluffBall that Roy and Moss used to appear as “proper” men, by generating phrases about football that they could use in conversations.

This got me thinking about creating my own version of BluffBall using AI. It’s fascinating to see how technology continues to evolve and impact our lives, even in the realm of entertainment. I encourage you to try it out for yourself below and see how well you can bluff your way through!

🔥 Try out BluffBall 🔥

Using Ai, I’ve built a my own version of BluffBall. Try it out for yourself below.

ChatGPT data currently stops at Sept 2021, so some of the content will be out of date.

Football team

How you can build your own Ai ChatBot

This has been built using the Pro version of AI Engine plugin. Below you can see the Gutenberg Block Layout that I used.

How to create a ChatGPT Ai ChatBot with WordPress Gutenberg 1

Step one: First we add the AI engine container block.

Step two: Within the container block, first add the Ai Input Block. We then change the label text, which in tern changes the FIELD NAME. In my case I changed it to ‘FOOTBALL_TEAM’.

How to create a ChatGPT Ai ChatBot with WordPress Gutenberg 2

Step three: After the Input Block you need to add the Ai Submit Block. Within the Submit Block you add your prompt. You can see the Prompt I created below. You need remember to put your FIELD NAME within the prompt, in curly brackets.

How to create a ChatGPT Ai ChatBot with WordPress Gutenberg 3

Step four: After the Submit Block, add the Ai Output Block. The final step is to get the ID of the Submit Block, in my case it’s mwai-ackadl7ml.

How to create a ChatGPT Ai ChatBot with WordPress Gutenberg 4

Copy this ID and paste it into the ID of the Submit Block, adding a #. So in my case I copy #mwai-ackadl7ml into the ID field of the Submit Block.

How to create a ChatGPT Ai ChatBot with WordPress Gutenberg 5

The code

Here’s the Gutenberg code. Feel free to copy and use on your own site 🙂 Remember you’ll need the Ai Engine Plugin for this to work.

<!-- wp:ai-engine/form-container {"id":"yk2zylqpn"} -->
<div class="wp-block-ai-engine-form-container mwai-form-container" id="mwai-form-container-yk2zylqpn">[mwai-form-container id="yk2zylqpn" theme="ChatGPT"]<!-- wp:ai-engine/form-field {"id":"mwai-09qghmczr","name":"FOOTBALL_TEAM","label":"Football team"} -->
[mwai-form-field id="mwai-09qghmczr" label="Football team" type="input" name="FOOTBALL_TEAM" options="%5B%5D"]
<!-- /wp:ai-engine/form-field -->

<!-- wp:ai-engine/form-submit {"id":"mwai-xbploelbh","prompt":"write a cliche football statement that someone might use in a conversation about football. For example, did you see what the manager did last night, bloody stupid.  Your answer should be about the football team mentioned in the keyword {FOOTBALL_TEAM} . The answer should be about managers tactics, or team attitude. Mention specific players or the specific manager of {FOOTBALL_TEAM} in the answer.   Use colloquialisms in the answer, and write as if you are from north london. Write in markdown.  ","outputElement":"#mwai-ackadl7ml","placeholders":["FOOTBALL_TEAM","FOOTBALL_TEAM"]} -->
[mwai-form-submit id="mwai-xbploelbh" label="Submit" prompt="write%20a%20cliche%20football%20statement%20that%20someone%20might%20use%20in%20a%20conversation%20about%20football.%20For%20example%2C%20did%20you%20see%20what%20the%20manager%20did%20last%20night%2C%20bloody%20stupid.%20%20Your%20answer%20should%20be%20about%20the%20football%20team%20mentioned%20in%20the%20keyword%20%7BFOOTBALL_TEAM%7D%20.%20The%20answer%20should%20be%20about%20managers%20tactics%2C%20or%20team%20attitude.%20Mention%20specific%20players%20or%20the%20specific%20manager%20of%20%7BFOOTBALL_TEAM%7D%20in%20the%20answer.%20%20%20Use%20colloquialisms%20in%20the%20answer%2C%20and%20write%20as%20if%20you%20are%20from%20north%20london.%20Write%20in%20markdown.%20%20" output_element="#mwai-ackadl7ml" model="" temperature="0.8 max_tokens="4096"]
<!-- /wp:ai-engine/form-submit -->

<!-- wp:ai-engine/form-output {"id":"mwai-ackadl7ml"} -->
[mwai-form-output id="mwai-ackadl7ml"]
<!-- /wp:ai-engine/form-output --></div>
<!-- /wp:ai-engine/form-container -->

2 thoughts on “How to create a ChatGPT Ai ChatBot with WordPress Gutenberg”

  1. I followed the exact steps – but only get some text as follows:

    [mwai-form-container id=”um0v5arlm” theme=”ChatGPT”] [mwai-form-field id=”mwai-y8fo8lbod” label=”KEYWORDS” type=”input” name=”KEYWORDS” options=”%5B%5D”] [mwai-form-submit id=”mwai-ar1cbdq0d” label=”Submit” prompt=”Please%20ignore%20all%20previous%20instructions.%20I%20want%20you%20to%20respond%20only%20in%20language%20English.%20I%20want%20you%20to%20act%20as%20a%20blog%20post%20title%20writer%20that%20speaks%20and%20writes%20fluent%20English.%20I%20will%20type%20a%20title%2C%20or%20keywords%20via%20comma%20and%20you%20will%20reply%20with%20blog%20post%20titles%20in%20English.%20they%20should%20all%20have%20a%20hook%20and%20high%20potential%20to%20go%20viral%20on%20social%20media.%20Write%20all%20in%20English.%20My%20first%20keywords%20are%20%7BKEYWORDS%7D” output_element=”#mwai-iqzeyjh23″ model=”” temperature=”0.8″ max_tokens=”4096″] [mwai-form-output id=”mwai-iqzeyjh23″]

    Looks looks its not recognizing the Short Code ID. Any idea?

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top