Create your own AI assistant application using MERN stack and G4F client

 Overview

This article will guide you how you can create an AI assistant application similar to phind or chat gpt as well as generate images in your application based on the prompt from the user. The application does not requires use of any API key or authorizations from third party service provider (like openAI). It leverages G4F(GPT4 FREE) - a package that simplifies interaction with various Artificial Intelligence models, eliminating the need for an API Key.

 Tech Stack

Although the tech stacks can vary based on your expertise and requirement, here we will focus primarily on tech stacks mentioned below:

React.js: for creating the front-end interface, ensuring a dynamic and responsive user experience.

Express.js: the backend framework for handling API calls and managing server-side processing.

MongoDB:for stores user data and session information.

Redux Toolkit: for application wide state management.

JWTs and cookies: for secure user authentication and session management.

 Application Features

Below I have discussed different features of the application and how you can integrate them in your own custom AI assistant application. 

      1.)  User Authentication and Authorization

             a.) Signup (userSignup)

• Input: name, email, password
• Process:
  • Check if the user already exists using their email.
  • If user exists, return an error.
  • If not, hash the password and create a new user in the database.
  • Clear any existing authentication token.
  • Generate a new token and set it as a cookie with a 7-day expiry.
• Output: Status 201 and a success message if the user is created.

         b.) Login (userLogin)

• Input: email, password
• Process:
  • Check if the user exists using their email.
  • If user does not exist, return an error.
  • Compare the provided password with the stored hashed password.
  • If the password is incorrect, return an error.
  • Clear any existing authentication token.
  • Generate a new token and set it as a cookie with a 7-day expiry.

                          

       2.)  Chat Completion Response using g4f Client

The generateChatCompletion function generates a chat response using the g4f client. This function retrieves user data, processes chat history, and interacts with g4f client to generate responses, which are then saved to the user's chat history. Below is the basic overflow of the same.

Above flow-chart gives a overflow of how we can generate responses from g4f client based on prompt 

from the user. The process involves context threading where all date from previous responses from g4f client and user prompts/questions are thread together in the form of object containing role and content as keys to generate new response. This step is necessary to help model get the complete context of chat history and generate most suitable response. 

 Configuring GF4 client 

Let us discuss how to configure the g4f client and build a custom generateChatCompletion controller

function.

Step 1.) Install g4f npm package in your application using command:      

     Using npm:

        npm install g4f

     Using yarn:

        yarn add g4f

Step 2.) Configure options for g4f client. 

Step 3.) Create generateChatCompletion controller function as pass the options as an argument to the function:

Follow up : G4F also allows you generate images from different AI models including DALLE, Pixart,

Prodia and Prodia Stable Diffusion. You can pass model name as argument and generate images based on the prompt from the user. Below is the implementation of the same:

For more detail about G4F visit npm .

Managing UI using Redux Toolkit 

Although there are multiple alternates of redux available such as Zustand, Recoil and context API for state management, below I have discussed how we can manage our UI using redux toolkit.

The userAuth slice manages the authentication state and chat interactions for an AI assistant application. It handles user login/logout, chat history management, and loading states, ensuring the UI updates accordingly.

Reducer Functions

1. login:

   • Sets isLoggedIn to true.
   • Updates user information (name and email).
   • Initializes the chat history with existing chats.

2. logout:

   • Sets isLoggedIn to false.
   • Clears user information.

3. setChats:

   • Adds a new chat message (from the user or assistant) to the chat history.

4. deleteChat:

   • Clears all chat history.

5. popback:

   • Removes the last chat message from the chat history.

6. setIsLoading:

• Updates the loading state, indicating whether the application is in a loading state or not

Below is the Sketch of How Redux Manages Reducer Functions and Updates UI:

Below is the implementation of the same using typescript to configure your redux store. The store can be wrapped over the app component to create a centralized storage for maintaining states and updating UI.

Conclusion

In this article, we've explored creating an AI assistant application , leveraging the G4F package to simplify interactions with AI models without needing API keys. The key features include user authentication, chat history management, and seamless integration of AI-generated content. By following the steps provided, developers can create a responsive and secure AI assistant application utilizing free and accessible AI resource. This approach ensures a user-friendly and efficient experience for end-users.