Create a ChatGPT WhatsApp Bot on Cyclic in Just 5 minutes

ChatGPT is the current rage and I thought it would be fun to make a WhatsApp bot that I can interact with instead of going to the website. It uses the OpenAI API and can be modified to create Dall.E 2 images too. So let's get started.

Step 1 - Setup WhatsApp Test Number

Go to Facebook Developer Page to create an app.

Choose Business as your app type and click next.

Give your app a name and create the app.

On the app page you just created, you will see options for products to add. Click on WhatsApp to set it up.

This will take you to the Getting Started page. Facebook assigns a test number to you, but you need to get permission from every phone number (upto 5) that will interact with the bot.

Click on Manage phone number list to add your number.

As soon as you add the number an OTP will be sent to that number. Enter it to complete the process.

Now choose the number you added from the dropdown list and send a test message. You should get a Welcome message from your bot.

Copy the temporary Access Token and note it down somewhere as we will need it when we deploy our bot to Cyclic.

You might need to create a permanent token for continued usage.

Step 2 - Signup for OpenAI

Go to OpenAI to get an API key. Once you are signed up, click on your profile image and go to View API keys to get your key.

Step 3 - Deploy bot on cyclic.app

Go to Cyclic and sign in with your Github account.

Or you can just click the button below to automatically pull the right repository and install the app.

This did not work for me for some reason. If it doesn't work for you, create a starter app on cyclic and then copy the code from this repository.

Once you have created the app, go to the Variables tab to add the WHATSAPP_ACCESS_TOKEN and the OPENAI_KEY. You need to spell it exactly that.

Note the CYCLIC_URL down which we'll use in the next step to complete the connection with Facebook.

You can go to the Environments tab to give your URL a personal touch.

Step 4 - Connect to Facebook

Now go back to your app on Facebook and choose Configuration to configure the webhook.

Enter CYCLIC_URL/webhook as the callback URL and any random text as token and click on Verify and save.

The last step is to subscribe to messages. Just under the callback URL you just added, you'll see webhook fields. Click on Manage and then subscribe to Messages.

That's it! Now on WhatsApp, send your bot (the one you received the test message from) a message like Deploy a ChatGPT WhatsApp Bot on Cyclic in just 5 minutes - give me some options for this headline and it should respond in about 5-6 seconds. Have fun!

You can go to the Logs tab on cyclic to see a realtime log of your communication with WhatsApp. The Transactions tab also shows the whole request and response for every single message.

You can easily change from TextCompletion to ImageGeneration by calling the createImage method on openai instead of the createCompletion method. You'll need to modify the sendMessage function according to the documentation to send an image instead of text.

body: JSON.stringify({
    messaging_product: "whatsapp",
    to: from,
    type: "image",
    "image": {
      "link": generatedImg,
    }
})

All the code is available at this Github repository.

Comments

[edgarinopan]

Hello!
I cant get passed Step 4 - Connect to Facebook
i get this messagen when trying to enter the webhook
"Callback verification failed with the following errors: HTTP Status Code = 404; HTTP Message = Not Found"

I have followed all steps several times. I think it has to do something with the token since i read the following message in logs on cyclic
"GET/?hub.mode=subscribe&hub.challenge=745050658&hub.verify_token=lplp" (lplp was the random token i wrote)

[edgarinopan]

also when i try to open the URL that cyclic gives me, it shows "Cannot GET /" is this the problem?

[edgarinopan]

i solved the previous problems by adding "/webhook" to the URL and now it doesnt display the "Cannot GET /" while trying to access it, but now i get no reponse from the bot when replying to it for whatsapp. I can see from logs that it reciebes the message but it only gives back an "OK"

[bal simpson]

You get the ok as a reply from the bot on Whatsapp or in the message log?

[edgarinopan]

in the message log

[bal simpson]

In the transactions tab on cyclic, check the logs. Are you not getting any reply on your Whatsapp?

[bal simpson]

Also are you able to send a test message from Facebook page? (where you configure the webhook)

[edgarinopan]

yes i am able to send messages via fb

and this is what i get in transactions tab when i send a message to the bot via whatsapp

[bal simpson]

Everything looks right. Not sure why it's not working. Did you have any luck? I can add some more console logs so you can track where the error is, if it helps.

[shmuelap]

doesn't work for me, got this in log:
2023-01-18 00:00:56.672: Failed to get completion - Request failed with status code 429
2023-01-18 00:17:05.771: Server listening on port 3000

[bal simpson]

Status Code 429 stands for too many requests. Did you get any response at all ever or is it this error for every request?

[shmuelap]

and i didnt flood the bot or anything. for a single "do you work?"

[shmuelap]

for every request

[bal simpson]

I'd be happy to do a pair programming session to figure out why it isn't working. I had a friend try and and they installed without any problem.

[Bechara Maalouf]

Thanks for your help! I have just one inquiry. Is there any option for creating a permanent bot, whether it's a paid or free solution?

[bal simpson]

Not sure what you mean. This is technically a permanent bot. As long as you don't run out of OpenAI credits.

[andresfelch]

you published a step by step guide to radio streaming for alexa skill. I lost hours following what you said and nothing...