In today’s tech-driven world, Software as a Service (SaaS) has evolved to become much more than just cloud-based software. The SaaS landscape is now increasingly incorporating Artificial Intelligence (AI), and chatbots are at the forefront of this transformation. Instead of just offering software hosted on the cloud, modern SaaS applications are leveraging AI to create intuitive, personalized user experiences.
This shift represents a powerful combination, cloud computing's scalability and flexibility combined with AI's ability to interact intelligently with users. In this blog, we’ll take you through a deep dive into how you can build your very own AI chatbot SaaS application and what tools you need to get started.
Meet Tushar Verma
Tushar Verma is an innovative and fast-learning tech enthusiast who thrives on adapting to new technologies and environments. He is not just a developer, but also a content creator with a popular YouTube channel called UBOX TECH, which has over 50,000 subscribers. On his channel, Tushar shares valuable insights, tips, and tricks related to mobile phones and ways to make money online, catering to a wide audience interested in tech and personal growth.
With hands-on experience as a web developer, Tushar is comfortable navigating both front-end and back-end development. Currently working at Spaceharpoon, Tushar’s focus is on creating AI-driven applications for the web. In this tech talk, Tushar demonstrated how to create a functional AI chatbot SaaS application in an incredibly short amount of time : just one hour. Let’s dive into the core of his project and the tools he used to make it happen.
Gupshap AI: Chatting with AI That Feels Real
Tushar’s project, Gupshap AI, is an innovative AI companion application that offers users a unique experience of interacting with AI characters. The goal of Gupshap AI is to make AI interactions feel natural, engaging, and realistic, allowing users to have meaningful conversations with characters that exhibit empathy and personality.
The development of Gupshap AI follows a full-stack development approach, integrating CablyAI, an advanced AI API service that allows access to multiple large language models (LLMs). By using these AI models, Gupshap AI can respond to user inputs in a conversational and personalized way. This app not only provides a chat platform but also fosters personal growth by allowing users to engage with AI that feels more human-like.
CablyAI : an API service that offers access to various AI models that can be used for different conversational applications. Some of the models offered by CablyAI are free, while others are available at a cost.
Here’s an overview of CablyAI:
Access: To start using CablyAI, users must first join their Discord server and obtain a unique API key. This key will allow you to interact with the available models.
Models: CablyAI offers several models such as GPT 4.0.mini. Each model is designed for a specific purpose and comes with its own set of capabilities.
Cost: While some models are available free of charge, users can access more advanced models with a one-time payment of €20 (lifetime), which opens the door to premium features.
API: The CablyAI API includes a chat completion endpoint that uses system prompts to define the behavior and personality of the AI models. These prompts are used in combination with a message array that keeps track of the conversation.
No Streaming: One limitation to note is that CablyAI doesn’t support streaming messages. Instead, the response from the AI is delivered in one complete message after the backend processes the input.
Creating a Smaller Version of Gupshap AI: An AI Companion App
In his tech talk, Tushar demonstrated how to create a simplified version of Gupshap AI. Here’s a breakdown of the process, step by step:
Initial Setup with Next.js: The first step is to set up the project using Next.js. Next.js helps with server-side rendering, making it an excellent choice for building scalable, performance-optimized applications.
To begin, you would create a basic Next.js project. This project serves as the foundation where all other components will be built.Acquire a CablyAI API Key: After setting up the project, the next step is to access the CablyAI API. To do this, you’ll need to join their Discord server and retrieve your free API key. This key will grant you access to a variety of models that you can use for your chatbot.
Utilize AI Development Tools: Tushar uses Cody AI integrated with VS Code, along with GitHub Copilot to accelerate coding. These AI-powered development tools help developers write code faster by offering intelligent code completion, suggestions, and even documentation.
Backend API Development: The backend of the application is built using Next.js. Tushar created different API endpoints for various AI personas (e.g., male or female AI characters). These endpoints send requests to the CablyAI API, retrieving responses that match the personality defined in the system prompts.
Implementation of System Prompts: System prompts are used to customize the AI’s personality. For example, you can define the persona of the AI by setting prompts such as "You are David Goggins, now make everyone your son and motivate the shit out of them." These prompts tell the AI how to behave in different conversational contexts.
Message Array Handling: The message array plays a crucial role in keeping track of the entire conversation history. The frontend of the application sends this array, along with the latest user message to the backend. The backend then sends this information, along with the system prompt, to CablyAI, which processes the data and returns an appropriate response.
User Interface Design: Tushar emphasizes the importance of a simple and clean user interface. The interface consists of a message input field where users can type their messages and a display area where the conversation appears. There are also buttons that allow users to switch between different AI personas.
API Call Management: The frontend and backend work in tandem. The frontend sends the user message to the backend, where it is processed. The backend then communicates with the CablyAI API, sending the message array and system prompt, and returns the AI’s response to the frontend to display in the UI.
QnA Session
During the tech talk, Tushar answered a few questions related to the application development process. Here’s a summary of the Q&A:
Question: Why is Next.js the chosen framework for this application?
Answer: Next.js is chosen because it is simple to maintain and deploy. It also supports server-side rendering (SSR), which helps with speed optimization. This is especially important for applications that handle large-scale user interactions, like an AI chatbot. Additionally, Next.js provides great flexibility for both client-side and server-side operations.
Question: Can you explain the workflow of the application?
Answer: The workflow begins when a user inputs a message. The frontend sends the message along with the full conversation history to the backend. The backend processes the data by sending it to the CablyAI API, which uses the system prompt and returns a response. This response is then sent back to the frontend for display.
Question: Could you summarize the process of building this app using AI, and explain your motivations?
Answer: Tushar’s main motivation behind this project was to demonstrate that AI applications can be easily built using accessible tools and APIs. He was also inspired by the growing interest in AI companion apps and wanted to show developers how they can leverage their existing skills to create AI-driven applications.
Conclusion
Tushar’s tech talk highlights how simple it is to build a functional AI chatbot with the right tools, APIs, and a bit of coding know-how. The use of CablyAI API and Next.js makes the entire process accessible and efficient. As AI continues to evolve, it’s clear that developers will have even more opportunities to create personalized, conversational experiences using AI.
This tutorial serves as a great starting point for anyone looking to develop their own AI chatbot or SaaS application. If you’re interested in learning more, check out the full video on TechKareer’s YouTube channel.