Project Story: QuestAI Chatbot
Inspiration
The QuestAI Chatbot project was inspired by a previous hackathon project called SkillQuest Academy, a gamified e-learning platform that allows users to earn college credit for completing courses. I envisioned the platform would have a conversational AI that could answer questions, explain concepts, and assist with various educational queries, but ultimately didn't have the time or knowledge to implement it. The idea was to create a virtual learning companion, capable of providing instant, reliable, and easy-to-understand information on a wide range of topics. Two months later, I've revisited SkillQuest Academy and developed a tutor that can accompany the platform.
Learning and Exploration
The Beginning
At the outset, I embarked on a journey of discovery into the realms of AI, natural language processing, and APIs. I've worked on previous group projects that utilized AI and NLP, but was excited to delve into the world of machine learning on my own. I particularly focused on chatbot development using Google's Dialogflow and integrating the power of the Wolfram Alpha API for educational content.
Challenges
As a novice to deep learning and implementing API requests, I faced several challenges:
- Technical Learning Curve: Learning to use Dialogflow for intent recognition and response generation was a significant learning curve. I spent time understanding concepts like intents, entities, and contexts.
- API Integration: Integrating the Wolfram Alpha API into our chatbot required careful consideration of HTTP/HTTPS issues, security, and handling API responses.
- Frontend Development: Crafting an engaging and user-friendly frontend chat interface was both fun and challenging. I focused on making it visually appealing and responsive.
Building the QuestAI Chatbot
Tech Stack
I built the QuestAI Chatbot using the following technologies:
- React: for the frontend user interface.
- JavaScript/JSX: for scripting and frontend logic.
- Dialogflow: for natural language understanding and intent recognition.
- Wolfram Conversational API: for retrieving educational and factual information and delivering it in a coherent response.
Development Process
Our development process followed these key steps:
- Design: I designed the chat interface, considering user experience and visual appeal.
- Frontend Implementation: Using React, I created the chat interface with text input and message display areas.
- Dialogflow Configuration: I configured Dialogflow with various intents for recognizing and handling user queries.
- Wolfram API Integration: I integrated the Wolfram Conversational API to fetch educational content and explanations.
- Logic and Flow: I implemented the chatbot's logic to manage user interaction and handle responses.
Challenges Faced
HTTPS and API Integration
One of the major challenges was handling mixed content issues, as the Wolfram Alpha API only supported HTTP requests. There was an attempt to set up a secure proxy server to make HTTP requests over HTTPS to avoid browser security restrictions, but unfortunately I wasn't able to get it to work. Instead, I integrated the Wolfram API directly into my React application and handled the requests with Javascript and the Axios library.
Dialogflow Training
Training the chatbot in Dialogflow to understand a wide range of user queries proved to be challenging. After completing Google's Dialogflow lab, I learned how to set up an agent and train it to handle responses with a webhook. However, when attempting to tailor the agent to this project I was unsuccessful in making successful webhook requests to the Wolfram API.
User Experience
Designing an intuitive and user-friendly chat interface while maintaining a visually appealing design was an easier task given my design background. Using the same concepts from the SkillQuest Academy platform, I was able to create an inviting interface for conversation with the QuestAI.
What's next for SkillQuestAI
The QuestAI Chatbot project has been a journey of exploration, learning, and overcoming technical challenges. It has given me valuable insights into artificial intelligence, natural language processing, frontend development, and the importance of user-centered design. I anticipate finding another workaround to combine Wolfram and Dialogflow, as the NLP would create a more realistic conversation. In addition, Wolfram has several APIs that can be used in tandem to enhance responses to user queries, which I would like to incorporate in the future. I'm excited to see how this chatbot can make learning more engaging and accessible for users, and look forward to future enhancements and iterations.
Built With
- dialogflow
- javascript
- jsx
- react
- vercel
- wolfram-technologies

Log in or sign up for Devpost to join the conversation.