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.