ChatGPT clone using React (Frontend) and Express.js (Backend)

A cloned version of ChatGPT website written in JavaScript. Using OpenAI API to interact with OpenAI model.

Screenshots

Serverless eployment

• Modification of this project deployed with Cloudflare Pages

Requirements

• Discord application with OAuth2
• MongoDB database
• Node.js + npm
• OpenAI API keys
• Upstash Redis

Features

• Authentication via Discord OAuth2
• Display mathematical notation from GPT response with LaTeX markup
• Highlight code segment from GPT response and enclose in code block
• Interact with OpenAI GPT model using API
• Remember login by session cookies
• Remove image in prompt by clicking on corresponding image
• Save & Load chat history from database
• Upload image in prompt by Ctrl+V to utilize GPT-4 vision capabilities

TODOs

• Button for deleting chat history
• Button for removing uploaded image in prompt
• Button for uploading image instead of Ctrl+V only
• Better UI design
• Logout button
• Responsive Web Design (Especially for mobile users)

General installation

git clone https://github.com/yinkiu602/Chatgpt-web.git

Installation (Frontend)

cd frontend
npm install
npm start

Installation (Backend)

cd server
npm install
node App.js

Chat saving

• All chat history will be automatically saved to database if the user is logged in.

Datbase entry format

{
    "_id": "${random_chat_id_here}",
    "userId": "${user_id}",
    "title": "${title of the conversation}",
    "messages": [
        {
            "role": "user",
            "content": [
                {
                    "type": "text",
                    "text": "${user prompt}"
                }
            ]
        },
        {
            "role": "assistant",
            "content": "${response from GPT}"
        }
    ],
    "modified": ${Unix timestamp of last modification}
}

Authors

• @Josh Wong

License

• GNU v3.0 License