Making Chatbot Applications with Dialogflow: My HackItTogether 2024 Project
Tags: googlecloud, dialogflow, chatbot, virtualagents
Published: 2024-04-20 20:41:14

I participated in a hackathon in nyc earlier this term! As a highlight, I was able to work with a team of students from brooklyn to create a chatbot. We were given the challenge and objective to work on an Individualized Recommendation System that leverages AI
techniques to understand users' preferences and recommend similar content. 

I conducted research on various Google Cloud Services to help support this project, and ultimately decided to work on a chatbot using Dialogflow to help achieve this. 

Things that I considered during our project: 
- Architecture for the chat, db &/api 
- If we want to use dialog flow / azure openai as a templated UI for the chat or coding the interface ? (which would be time consuming
GCP pros: we had credits)  
- Which API’s to use, and if we use multiple, how to consolidate/aggregate the data in one unified chat 
- Which UI to use for the website, and how to customize it? A premade template would be ideal 
- Which data sources we want to take and how to integrate this data 
- Are we enforcing guardrails (tell it to not give info) only picking from specific sections of info and prevent hallucinations 


The other members in my group used other api's such as spotify api to help provide traditional recommendations to a search bar. 
The earliest iteration of our UI looked like this: 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bc2c2damyoba9c25xh8k.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/89wd23pwoycywrf2i6y9.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w94jjmrgkkt0hxscxzx7.png)

The Dialogflow CX documentation was simple and easy to follow - I added our data sources through a combination of docs, website links, csv and files. After, I tested the chat application by asking questions to ensure the data was retrieved and provided adequate responses. 

The Chatbot Application was simple to integrate into our React UI -> it appears on the bottom right corner of our site. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/twsvpne3nuegk1hx3ttl.png)

While the cloud credits have paused so the chat might not be loading at the moment, you can still see the UI for our project here: https://your-north-star.netlify.app/ {UI done in react} 

**Inspiration**
The North Star has been a symbol of guidance and direction for centuries. In ancient times, navigators and travelers used the North Star as a way to determine their location and navigate the seas. We think that our web-based project with the help of AI will help the users navigate the quiz to find their way to their favorite book, movie or music.

**What it does**
The website will present a welcoming page to “Your North Star” ChatBot where it asks the user what they’re looking for. They’re presented with three buttons: music, book and movie. This leads to the next question which allows the user to specify the genre of their chosen media. The input given by the user is fed to an API. The APIs return the recommendations as a list, where each recommendation provides metadata, such as: title, cover, rating, overview, etc. We chose the constellation-theme because this is meant to be a journey to imagination. Your taste will bring you to the destination.

**Challenges we ran into**
The challenges we faced were with the implementation of a chatbot into the website.

**Accomplishments that we're proud of**
Being able to successfully implement the APIs from Google Cloud and Spotify Web.

**What we learned**
We learned how to customize APIs; how to navigate on different errors when using javascript or react. Most importantly we learned how to negotiate between team members and try to make our best based on the time provided.

**What's next for Your North Star**
By using AI we can explore the characters of the books/movies to elevate the user's experience to the next level. The user can communicate the characters and be friends with them.

**Built With**
- chatbot-ui
- css
- dialogflow-es
- figma
- github
- google-books-api
- google-cloud
- html
- imdb-api
- javascript
- omdb-api
- react
- spotify
- vertexai-api