DEV Community: Rohan Rajpal

WhatsApp AI Chatbot: Let's build one with the API

Rohan Rajpal — Mon, 29 Jul 2024 17:05:47 +0000

Hey there, I'm Rohan, founder of Spur, a WhatsApp API & Instagram Comment/DM Automation Software.

A few weeks ago, I wrote a blog on where you should build a WhatsApp integration or not. That was a high-level article on the topic, today we'll be learning on how do you get started with the WhatsApp API?

Let's make a WhatsApp AI Chatbot

Today, we'll make a simple bot that runs on a Node server, takes in webhooks from the WhatsApp Cloud API, reads the messages & uses the
OpenAI GPT 4o to send a response.

Want to jump straight to the code? Link is at the bottom.

Get the WhatsApp Test Number & Token

This is fairly straightforward, and Meta already has a guide on this. Going forward, I'm going to assume

You have created a Meta App
Added the WhatsApp product
Got a test number and can send messages from it

For the token, you can use the temporary token, we'll cover deploying to production in another tutorial someday.

Setting up the Node Server

if you dont have pnpm setup, this is the easiest way

corepack enable
corepack prepare pnpm@latest --activate

now we start

mkdir whatsapp-ai-bot

# intialize npm project
pnpm init

# make the server file
touch index.js

# env file
touch .env

Install the required dependencies now:

pnpm install express dotenv openai

Never commit API keys. To keep sensitive information like API keys out of the codebase, we will use environment variables. Create a .env file in the root directory of your project and add the following line:

OPENAI_API_KEY=<your-openai-api-key>

Now use the created index.js file and add the following code

import express from 'express';
import { config } from 'dotenv';
import OpenAI from 'openai';

// Load environment variables
config();

// Create a web server
const app = express();
const port = process.env.PORT || 3034;
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

// Add middleware to parse JSON bodies
app.use(express.json());

// Initialize OpenAI API
const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

app.get('/webhooks', (req, res) => {
  if (
    req.query['hub.mode'] === 'subscribe' &&
    req.query['hub.verify_token'] === '1234'
  ) {
    res.send(req.query['hub.challenge']);
  } else {
    res.sendStatus(400);
  }
});

app.post('/webhooks', async (req, res) => {
  const body = req.body.entry[0].changes[0];
  if (body.field !== 'messages') {
    // not from the messages webhook so dont process
    return res.sendStatus(200);
  }

  if (!body.value.messages) {
    return res.sendStatus(200);
  }

  const text = body.value.messages
    .map((message) => message.text.body)
    .join('\n\n');

  console.log(text);

  const completion = await openai.chat.completions.create({
    model: 'gpt-4o-mini',
    messages: [{ role: 'user', content: text }],
  });

  // Extract the response from the OpenAI completion
  const aiResponse = completion.choices[0].message.content;

  // Extract the phone number from the incoming message
  const phoneNumber = body.value.messages[0].from;

  // Prepare the message payload
  const messagePayload = {
    messaging_product: 'whatsapp',
    to: phoneNumber,
    type: 'text',
    text: {
      body: aiResponse,
    },
  };

  // Send the response back to WhatsApp
  try {
    const response = await fetch(
      `https://graph.facebook.com/v20.0/${process.env.PHONE_NUMBER_ID}/messages`,
      {
        method: 'POST',
        headers: {
          Authorization: `Bearer ${process.env.SYSTEM_TOKEN}`,
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(messagePayload),
      },
    );

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    console.log('Message sent successfully');
  } catch (error) {
    console.error('Failed to send message:', error);
  }

  res.sendStatus(200);
});

and also modify the package.json to

{
  "name": "whatsapp-ai-bot",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "module",
  "packageManager": "pnpm@9.6.0",
  "dependencies": {
    "dotenv": "^16.4.5",
    "express": "^4.19.2",
    "openai": "^4.53.2"
  },
  "devDependencies": {
    "nodemon": "^3.1.4"
  }
}

Understanding how the code works

We first create a "GET" endpoint so that when you set the webhook in the Facebook app, the challenge passes. I've also included a value for the verify token in the .env.example value that you can use.
Then comes the POST endpoint, which does the actual magic. It takes in the text, passes it onto ChatGPT and sends that response to the user.

Next Steps

This example is just the tip of the iceberg, there are so so many things you can do to improve this

To implement idempotency, WhatsApp webhooks are not unique and can repeat.
Add an in memory chat history
Persist that memory with Redis/relational databases
Leverage rich content like buttons etc. as responses (this will require OpenAI functions to build)

Conclusion

So that's about it. If you're also interested in the article I wrote about WhatsApp integration, you can check it out here.

I've also shared the code of the working example on Spur's GitHub organization.

Automatic OpenAPI SDK Creation for NextJS & SvelteKit

Rohan Rajpal — Fri, 16 Feb 2024 08:29:48 +0000

Maintaining types at two places is a big ass pain if you're using a separate backend with modern frameworks like nextjs or sveltekit, this a simple yet effective solution that always works with me, and it also enables api first development for your backend, which personally has led to better backend design

SvelteKit

NextJS

While this does not prevent duplication, but it saves a ton of time!

Rust + Google Sheets API Quickstart

Rohan Rajpal — Wed, 15 Sep 2021 16:17:57 +0000

Google sheets API is a very useful tool. For MVPs and prototypes it works amazing, no need for SQL setup and you have a very powerful database frontend (google sheets) to interact with.

Recently I've been learning Rust and wanted to work with Sheets API using Rust.

Sadly, the sheets documentation has no quickstart of Rust mentioned.

So this post, you'll learn how to use Sheets API with Rust.

cargo new sheets_api_rust

Your Cargo.toml should look like:

[package]
name = "sheets_api_rust"
version = "0.1.0"
edition = "2018"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[dependencies]
google-sheets4 = "*"
hyper = "^0.14"
hyper-rustls = "^0.22"
serde = "^1.0"
serde_json = "^1.0"
yup-oauth2 = "^5.0"
tokio = { version = "~1.2", features = [
    "macros",
    "io-util",
    "rt",
    "rt-multi-thread",
    "fs",
] }

and obtain your api keys from google.

your credentials.json should look like

{
  "installed": {
    "client_id": "384278056379-tr5pbot1mil66749n639jo54i4840u77.apps.googleusercontent.com",
    "project_id": "sanguine-rhythm-105020",
    "auth_uri": "https://accounts.google.com/o/oauth2/auth",
    "token_uri": "https://accounts.google.com/o/oauth2/token",
    "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
    "client_secret": "QeQUnhzsiO4t--ZGmj9muUAu",
    "redirect_uris": ["urn:ietf:wg:oauth:2.0:oob", "http://localhost"]
  }
}

and finally your main.rs

// This is a modified version of the example at:
// https://github.com/Byron/google-apis-rs/tree/main/gen/sheets4

extern crate google_sheets4 as sheets4;
extern crate hyper;
extern crate hyper_rustls;
extern crate yup_oauth2 as oauth2;
use sheets4::Error;
use sheets4::Sheets;

#[tokio::main]
async fn main() {
    // Get an ApplicationSecret instance by some means. It contains the `client_id` and
    // `client_secret`, among other things.
    let secret = yup_oauth2::read_application_secret("clientsecret.json")
        .await
        .expect("client secret could not be read");

    // Instantiate the authenticator. It will choose a suitable authentication flow for you,
    // unless you replace  `None` with the desired Flow.
    // Provide your own `AuthenticatorDelegate` to adjust the way it operates and get feedback about
    // what's going on. You probably want to bring in your own `TokenStorage` to persist tokens and
    // retrieve them from storage.
    let auth = yup_oauth2::InstalledFlowAuthenticator::builder(
        secret,
        yup_oauth2::InstalledFlowReturnMethod::HTTPRedirect,
    )
    .persist_tokens_to_disk("tokencache.json")
    .build()
    .await
    .unwrap();

    let hub = Sheets::new(
        hyper::Client::builder().build(hyper_rustls::HttpsConnector::with_native_roots()),
        auth,
    );

    let result = hub
        .spreadsheets()
        .get("1TWUpZdjXiquf-LsfbqXEIBVWgZ12XeaZtzrNp3uaHX8") // your spreadsheet id enters here
        .doit()
        .await;

    // println!("{:?}",result);
    match result {
        Err(e) => match e {
            // The Error enum provides details about what exactly happened.
            // You can also just use its `Debug`, `Display` or `Error` traits
            Error::HttpError(_)
            | Error::Io(_)
            | Error::MissingAPIKey
            | Error::MissingToken(_)
            | Error::Cancelled
            | Error::UploadSizeLimitExceeded(_, _)
            | Error::Failure(_)
            | Error::BadRequest(_)
            | Error::FieldClash(_)
            | Error::JsonDecodeError(_, _) => println!("{}", e),
        },
        Ok(res) => println!("Success: {:?}", res),
    }
}

and boom, now you can explore the sheets4 docs to see what more you can do!

References

Get desktop apps like Whatsapp, Notion on linux

Rohan Rajpal — Sun, 25 Jul 2021 07:51:05 +0000

It's sad that Notion and Whatsapp dont have desktop apps like linux. I use them a lot and having separate apps for them is definitely a plus.

There are workarounds which package these apps and make em work on Linux, but then updating them is a headache.

When trying to find a solution, luckily I came across this answer which solved all of my problems.

Steps

Make sure you have a chromium based browser
Go ahead and make a desktop file 2.1 vim ~/.local/share/applications/whatsapp.desktop
Copy and paste the configuration below

#!/usr/bin/env xdg-open
[Desktop Entry]
Name=WhatsApp
GenericName=WhatsApp
Comment=WhatsApp desktop webapp
Exec=/usr/bin/google-chrome-stable --app=https://web.whatsapp.com/
Terminal=false
Type=Application
StartupNotify=true
MimeType=text/plain;
Categories=Network;Application;
Keywords=WhatsApp;webapp;
X-Ubuntu-Gettext-Domain=WhatsApp
StartupWMClass=web.whatsapp.com

Just make sure the Exec section has the chromium based browser you use. For vivaldi it was /usr/bin/vivaldi-stable for me. To find the path, just type which chrome in your terminal.
Save it and that's it! Just

Here's the Notion desktop file I use

#!/usr/bin/env xdg-open
[Desktop Entry]
Name=Notion
GenericName=Notion
Comment=Notion desktop webapp
Exec=/usr/bin/vivaldi-stable --app=https://www.notion.so
Terminal=false
Type=Application
StartupNotify=true
MimeType=text/plain;
Categories=Network;Application;
Keywords=Notion;webapp;
X-Ubuntu-Gettext-Domain=WhatsApp
StartupWMClass=notion.so