Building your first simple ChatGPT-like app to answer questions

In this blog post, I will walk you through a simple ChatGPT-like app using React for the frontend and FastAPI for the back end. This app will allow users to ask questions and receive answers from the OpenAI API.

Requirements for the Simple ChatGPT app

The main features of our application are:

1. User enters a question and submits it. The application returns a response to that question as returned by OpenAI.
2. The user enters a new question and repeats step 1.

The application does not maintain the history of the conversation. It is a simple one-question, one-answer conversation.

Architecture

The application consists of two main components:

Architecture of a Simple ChatGPT like application

The UI Frontend: A React app that allows users to input questions and displays the answers received from the backend.
The Server Backend: A Flask server that receives questions from the frontend, sends them to the OpenAI API, and returns the generated answers to the frontend.

Get the code from GitHub

You can get a copy of the code to run on your machine by cloning the code for this project from GitHub.

Setup and OpenAPI key

After cloning the repository, install the necessary dependencies for both the frontend and backend.

Follow the setup instructions detailed in the README.md file to install the necessary dependencies for both the frontend and backend.

Additionally, do not forget to get your own OpenAI API key and follow the instructions outlined in README.md file to initialize the key.

Once you finished configuring the key, you can follow the rest of the steps to run the backend and frontend.

1. The frontend app

In this section, I will review the portion of the frontend code responsible for reading the user’s question and making a request to the backend using the API.

In the frontend\src\App.tsx file, you will find a form element with textarea for input and a submit button. When the user submits the form, the handleSubmit function is called, which sends the question to the backend by calling the API endpoing /ask and passing the question as an argument.

const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
   e.preventDefault();
   setLoading(true);
   try {
     const response = await axios.post(‘http://127.0.0.1:5000/ask', { question });
     setAnswer(response.data.answer);
     } catch (error) {
     console.error(error);
   }
   setLoading(false);
 };

2. The backend app — read the API key

This section will focus on the main.py file, which initializes the OpenAI model and processes the API calls.

First, we need to import the necessary libraries and initialize the OpenAI API key:

import os
from dotenv import load_dotenv
from flask import Flask, request, jsonify
from flask_cors import CORS, cross_origin
import openai
from flask import Response

# read OPENAI_API_KEY from .env file and save it in environment variable
load_dotenv()
openai.api_key = os.getenv("OPENAI_API_KEY")
print("key is", openai.api_key)

3. The backend app — calling OpenAI API and reading the response

When the frontend makes the call to the backend by invoking the API /ask, the ask_endpoint() function is invoked.

In the ask_endpoint() function, we read the question and send it OpenAI, to generate a response. Here is the portion of the code that sends the response to OpenAI. We are using the gpt-3.5-turbo model here but if you have access to gpt-4 API, feel free to change it here.

 chat_completion = openai.ChatCompletion.create(
 model="gpt-3.5-turbo",
 messages=[{"role": "user", "content": f"{question}"}]
 )

When OpenAI returns a valid response, we just need to read it as shown in the code below and send it back to the frontend app.

# read the response from OpenAI API
 answer = chat_completion.choices[0].message.content.strip()
 return jsonify({“answer”: answer})

4. The frontend app — displaying the response

After the backend processes the question and returns the answer, the frontend receives the response in the handleSubmit function:

setAnswer(response.data.answer);

Conclusion

As you can see, creating a simple ChatGPT-like app did not take much effort — just a few lines of code.

In this blog post, we learned how to utilize OpenAI within our simple chat application. The frontend, built with React, collects user queries and displays the AI-generated answers. The backend, built with Flask, handles the API calls to OpenAI, passing along user queries and retrieving the API’s responses.

You can easily extend the frontend with additional features like user authentication, a chat history, or more advanced UI features.

In a future blog post, I will walk you through a more advanced ChatGPT app to help you read data from a table. Follow me so you get notified when this article is published.

I strongly encourage you to try it out on your own by getting the copy of the code at: GitHub. Happy coding!