Create a ChatGPT WhatsApp Bot on Cyclic in Just 5 minutes
Tags: chatgpt, javascript, beginners, tutorial
Published: 2023-01-10 16:36:09

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](https://developers.facebook.com/apps/)** to create an app.
![Create a Facebook App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bu2au4t0l3zvanuh85sz.png)
Choose **Business** as your app type and click next.
![Choose Business as your App Type](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ljcq639mto49pkduvas.png)
Give your app a **name** and create the app.
![Create a Facebook App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e11wjqf1cn5f5yl6k1d2.png)
On the app page you just created, you will see options for products to add. Click on **WhatsApp** to set it up. 
![Setup WhatsApp](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e3fga1g3d35tp63e6k3m.png)
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.
![Add a phone number](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oxua5zccgu61kryppbmj.png)
As soon as you add the number an OTP will be sent to that number. Enter it to complete the process.
![Enter your OTP](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xl6eyykpn4gyrbitg7cy.png)
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](https://www.cyclic.sh/).

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

## Step 2 - Signup for OpenAI
Go to [OpenAI](https://openai.com/api/) 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.
![Get your OpenAI key](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mushs8ftk0n0fcbi6qyv.png)

## Step 3 - Deploy bot on cyclic.app
Go to [Cyclic](https://www.cyclic.sh/) 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.
[![Deploy to Cyclic](https://deploy.cyclic.app/button.svg)](https://deploy.cyclic.app/balsimpson/whatsapp-chatgpt)

> 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](https://github.com/balsimpson/whatsapp-chatgpt).

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.
![Add your environment variables](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ide93zpzhal7vr7dx8d.png)
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**.
![Configuration screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qdp8b5z15m09kzon4a8c.png)

Enter **`CYCLIC_URL`/webhook** as the callback URL and any random text as token and click on `Verify and save`.
![Configure your webhook URL](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/prawz0i2txs2fa59n7wz.png)

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`.
![Subscribe to messages](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gza7h3b7kzio7ytko2ux.png)

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](https://github.com/balsimpson/whatsapp-chatgpt).