Have you ever come across any of those boring WhatsApp chat bots? It might have happened to you when you were trying to book an appointment at a doctor, fitness center or a dentist and you have those first predefined options where you respond, and that lead to other predefined options and THEN in the end, if you’re lucky, you might get your appointment done, or at least get your information filled so then a human takes over on the other side and get it done for you? And all that in the best scenario, not to mention when you select a wrong option and have to start the process all over again or worse: get stuck (real story!) Well, I know this pain and you might know it too. That was the trigger for my SaaS, where I try to solve this issue by introducing an A.I. assistant using ChatGPT that handles appointments on Google Calendar for you automatically by taking prompts and interacting with customers on WhatsApp. I called it BuddyBrain, a full stack boilerplate with everything you need to setup such an assistant. It’s not a completely unsolved issue, there are just a few similar products around but most of them don't integrate with WhatsApp. Plus with BuddyBrain you pay just once and do whatever you want with it, because the source code will be yours forever! Plus it brings good news because it means that this idea has already been validated out there and there is a good demand for it. BuddyBrain In this article I’ll explain how I did it and then you might decide to give it a shot or simply get access to my source code and leverage the implementation to other purposes as you may see fit, it’s up to you. Tech Stack The main technologies used in this application include: NextJS For frontend I chose NextJS because it brings very useful features and it's very good for SEO in case you might want to get your app ranked on Google. OpenAI API OpenAI provides APIs for you to build pretty much everything around their own products, in this case we the ChatGPT API for completions, the assistant is provided with information about the company so it's able respond questions about it. Google Calendar API Google also provides very easy-to-use APIs to book events on Google Calendar, this way you can implement your own event booking system instead of having to go directly to Google Calendar's UI to do it. So it's possible to make it dynamic. WhatsApp API The easiest way to interact with WhatsApp API I found is whatsapp-web.js which makes the API implementation much simpler so you can easily authorise a new device to be connected to your WhatsApp number. Just like you currently to have it on the web browser by scaning the QRcode. Firebase To keep it simple but also efficient I chose Firebase Firestore Database which I found very flexible to handle data. NodeJS Since most of the logic would reside in the backend I decided to have a separate project for it where I used NodeJS with Express. Here's where most of the magic happens, it's where we handle user auth and handle the several APIs I just mentioned above. NextJS For frontend I chose NextJS because it brings very useful features and it's very good for SEO in case you might want to get your app ranked on Google. NextJS NextJS For frontend I chose NextJS because it brings very useful features and it's very good for SEO in case you might want to get your app ranked on Google. OpenAI API OpenAI provides APIs for you to build pretty much everything around their own products, in this case we the ChatGPT API for completions, the assistant is provided with information about the company so it's able respond questions about it. OpenAI API OpenAI API OpenAI provides APIs for you to build pretty much everything around their own products, in this case we the ChatGPT API for completions, the assistant is provided with information about the company so it's able respond questions about it. Google Calendar API Google also provides very easy-to-use APIs to book events on Google Calendar, this way you can implement your own event booking system instead of having to go directly to Google Calendar's UI to do it. So it's possible to make it dynamic. Google Calendar API Google Calendar API Google also provides very easy-to-use APIs to book events on Google Calendar, this way you can implement your own event booking system instead of having to go directly to Google Calendar's UI to do it. So it's possible to make it dynamic. WhatsApp API The easiest way to interact with WhatsApp API I found is whatsapp-web.js which makes the API implementation much simpler so you can easily authorise a new device to be connected to your WhatsApp number. Just like you currently to have it on the web browser by scaning the QRcode. WhatsApp API WhatsApp AP The easiest way to interact with WhatsApp API I found is whatsapp-web.js which makes the API implementation much simpler so you can easily authorise a new device to be connected to your WhatsApp number. Just like you currently to have it on the web browser by scaning the QRcode. whatsapp-web.js Firebase To keep it simple but also efficient I chose Firebase Firestore Database which I found very flexible to handle data. Firebase Firebase To keep it simple but also efficient I chose Firebase Firestore Database which I found very flexible to handle data. NodeJS Since most of the logic would reside in the backend I decided to have a separate project for it where I used NodeJS with Express. Here's where most of the magic happens, it's where we handle user auth and handle the several APIs I just mentioned above. NodeJS NodeJS Since most of the logic would reside in the backend I decided to have a separate project for it where I used NodeJS with Express. Here's where most of the magic happens, it's where we handle user auth and handle the several APIs I just mentioned above. Problem solving Well, the problem we're trying to solve is the friction brought by these traditional, not flexible and not so smart chat bots we have around. To solve this I decided to break the whole issue into smaller parts so by solving each of them I could make sure the final product was possible. WhatsApp Integration As I mentioned, the easiest to way I found to integrate WhatsApp to web was through whatsapp-web.js package because it solves most of the integration issues you might have interating with WhatsApp API interface directly. With a few steps you're ready to get started: whatsapp-web.js const { Client } = require('whatsapp-web.js'); const client = new Client(); client.on('qr', (qr) => { // Generate and scan this code with your phone console.log('QR RECEIVED', qr); }); client.on('ready', () => { console.log('Client is ready!'); }); . . . client.initialize(); const { Client } = require('whatsapp-web.js'); const client = new Client(); client.on('qr', (qr) => { // Generate and scan this code with your phone console.log('QR RECEIVED', qr); }); client.on('ready', () => { console.log('Client is ready!'); }); . . . client.initialize(); The QR code received there is sent to the frontend so the user can connect their WhatsApp and we can start intercepting messages. Google Calendar Integration Google provides very nice and easy to use APIs for a bunch of its products and Google Calendar is one of them! The setup is quite hard to figure out to be honest but it works quite well. There's also a bunch of packages that implements the functions, it's a good way to get started. Here's an example on how to insert and event: Google Calendar const result = await calendar.events.insert({ auth: oauth2Client, calendarId: 'primary', resource: eventData, sendUpdates: 'all' }); const result = await calendar.events.insert({ auth: oauth2Client, calendarId: 'primary', resource: eventData, sendUpdates: 'all' }); ChatGPT API OpeanAI makes it very easy to replicate the ChatGPT's behaviour by providing the completions API. There's also official libraries that implement some interfaces for you. In simples terms you just need to structure data in a specific way pass to it and grab the assistant response: completions API const response = await openai.chat.completions.create({ model: "gpt-4o", messages: [ { "role": "user", "content": [{ "type": "text", "text": "knock knock." }] }, { "role": "assistant", "content": [{ "type": "text", "text": "Who's there?" }] }, { "role": "user", "content": [{ "type": "text", "text": "Orange." }] } ] }); const response = await openai.chat.completions.create({ model: "gpt-4o", messages: [ { "role": "user", "content": [{ "type": "text", "text": "knock knock." }] }, { "role": "assistant", "content": [{ "type": "text", "text": "Who's there?" }] }, { "role": "user", "content": [{ "type": "text", "text": "Orange." }] } ] }); Frontend It took a lot of work here too since I implemented the sign up process to make it easier for anyone to get on boarded and get the product up and running. NextJS helped a lot, especially for dashboard part, it's very easy to integrate good UI components. The main task here was to interact with all the APIs I had created on the backend to get the user signed up, signed in, be able to connect their WhatsApp number, update information and keep track on the appointments booked. At this point I was able to make sure the core functionalities were in place for the product, so in the end I just needed to get them together. Of course there's a bunch of work in the middle here, especially the part where we refine the interaction between the AI responses and the actions to be performed, plus a lot of other stuff like database implementations, auth, frontend and etc, but at the end of the whole process and few weeks down the road I finally had the final product and it works like a charm! Got curious? Pay me a visit at the website https://buddybrainai.com/ and check it out! In case you decide to buy it please let me know what you think and what features should be there. https://buddybrainai.com/
