what is this?

This is a GPT chatbot implementation that runs off of the gpt API.

With this, you will be able to create a basic chatbot that can easily be implemented in your projects.

But ChatGPT already exists and requires no setup, why should I do what has already been done?

Creating a custom chatbots can work as a good personal project to add to your github page or your resume. If you add some truly impressive features or adapt this chatbot to your project in a creative way, adding this project to your personal projects wouldn’t be a bad idea.

And although it is true that chatGPT already exists and this is a near 1-1 copy of chatGPT in it’s browser state, the difference is that you can customize this chatbot and add your own features or style the frontend how you would like it to be.

In fact, here is a list of all of the features built into this chatbot example that chatgpt does not have:

  1. custom background which can be stylized to your liking via sass.

  2. ability to toggle between instant output style and streamed output style.

  3. store all messages in a sqlite database.

  4. instantly recall messages from sqlite database.

all important files for setting up chatbot

In portfolio_2025, the frontend contains the following important files (https://github.com/nighthawkcoders/portfolio_2025):

/_posts/2024-07-11-GPTchatbot.md (the main frontend file)

/assets/js/chatbot.js (javascript for functions which call to the endpoints)

_sass/nighthawk/chatbot.scss (styling for the frontend)

In Spring portfolio, the backend contains these important files/folders (https://github.com/nighthawkcoders/portfolio_2025):

src/main/java/com/nighthawk/spring_portfolio/mvc/chatBot (folder containing all of the backend java files for setting up the GPT endpoints)

.env (the location where your GPT api key information must be stored)

how does this work?

open the chatbot demo to follow along with this part.

This basic chatbot implementation simply makes calls to the GPT API, taking in the message you typed in and returning the response the api generated from the message sent. Other than basic chatbot functionality, there are a few different new features for experimentation:

1: all messages are saved in sqlite.db on the backend.

2: pressing the reload button next to the trash can icon on the chatbot frontend will fetch all responses from the database and display them.

3: pressing the trash can icon will delete all of the chats from the database.

4: pressing the button at the bottom lets you switch between a streamed response, which will gradually feed the response to the user, versus an instant response.

basic demo instructions

1: clone the following repository for the java backend, if you didn’t already have this project available: https://github.com/nighthawkcoders/spring_2025

this is a java backend built on spring, and will be used for the endpoints for our project. It also contains all the code for calling the api.

2: add your own api key variables to the .env file (see guide below for obtaining all the necessary variables)

obtaining api variables from OPENAI

This part of the guide will be a walkthrough to acquiring the assistantId, threadId, and aiKey, which are required for accessing the OPENAI api.

  1. go to https://platform.openai.com/account/api-keys and create an account or log in

  2. create a new secret key, with all permissions, and save your key. Add the secret to the .env for the ai_key variable.

  3. click on Assistants on the left navbar and create a new assistant. Take note of the assistant id at the top, as this is the assistant id. add that id variable to your .env for the ai_asst_id variable.

  4. afterwards, click on the Assistants from the Playground section of the left navbar, and send a message.

  5. copy the thread id generated from the message and add it to the .env for the ai_thread_id variable.

Setting up payment

yes, you do need to pay to use the GPT api. However, pricing is far cheaper than you think. GPT 3.5, the model used in this example, only costs 3 dollars per 1 million tokens. For context, a token is basically pieces of words that make up the input to the API.

1 token is about 4 characters in english and 100 tokens is about 75 words, so hitting 1 million tokens used is harder than you think, assuming you don’t spam the API.

Realistically, the max you would spend on this project would be less than a chocolate bar, And in return, you get to develop a project that can easily be worked into a resume or project portfolio, and will look impressive to employers seeking to hire individuals who are working with the latest tech.

to set up payment,

i. go to settings and click on billing

ii. add a payment option

Once payment is setup, you will be able to send your requests to the gpt api.

IMPORTANT: It is important to hide your secret variables to prevent theft of keys. Do not commit the .env with all of the variables within directly to github, as your key will likely get stolen. There are many different solutions for hiding secrets, however the one I used was simply splitting each variable into 2 separate strings, then concatenating them when I needed those secret variables.

testing key functionality

At this point, you should also test the key functionality by running the static main method in AIChatbotController.java, which will send a test message using your api key. You can run the method by clicking the run button, which should appear above the method. The method should look like this:

	// main method for testing key functionality
	public static void main(String[] args) throws Exception {
		String aiKey = System.getenv("AI_KEY");
        System.out.println("AI key: " + aiKey);
		AIChatbotController ai = new AIChatbotController();
		String response = ai.getResponseFromAI("Hi");
		System.out.println(response);
	}

run the method and check the console for a response. If you get a basic reply from the bot, then you have successfully setup your backend and can make basic calls to the chatgpt api.

If the method fails, check the error message. Its likely that you just setup the gpt key incorrectly.

running the full stack (frontend, backend)

If you are using portfolio_2025, you should only have to run the frontend locally and open the chatbot frontend page.

Then run the backend locally, and send a message through the frontend.

check the console of the backend to make sure the request goes through.