Home>Programming related>AI Source Code
Download

ChatGPT-Plus

ChatGPT-Plus is an application that uses the official ChatGPT API.

Demonstrate Demo/Feedback Issues/Develop Gitpod/Deploy Vercel

Simplified Chinese | English

Like this project? Please give me a Star ️
Or share it with your friends to help it improve!

imageimageimageimageimage

Features

  • introduce
  • characteristic
  • principle
  • Online development
  • Install and run
    • Clone project
    • Environment configuration
    • Front-end web page
    • Backend services
  • Package deployment
    • Deploy using Docker
    • Deploy using Vercel
    • Manual packaging
      • Front-end web page
      • Backend services
  • Additional notes
  • FAQ
  • Participate and contribute
  • grateful
  • sponsor
  • License

introduce

ChatGPT-Plus client is an application of the official ChatGPT API. This application is a wrapper application for the official API of OpenAI's ChatGPT.

characteristic

  • ? A complete ChatGPT client.
  • Built with Nextjs & Nestjs for quick start.
  • Responsive design supports mobile access.
  • ?Supports multiple themes, day/night mode.
  • ? International support, currently supports Chinese and English.
  • ? Support custom prompt words, view online recommended prompt words
  • ? Use CSS-in-JS technology to support theme customization.
  • ? Support Docker & Vercel deployment.

?principle

There are two ways to access it. To use this module in Node.js, you need to choose between two methods:

method free? robust? quality?
ChatGPTAPI no ✅ Yes ✅️Real ChatGPT model
ChatGPTUnofficialProxyAPI ✅ Yes ☑️ Possibly ✅ Real ChatGPT

  1. ChatGPTAPI - Uses gpt-3.5-turbo-0301 model with the official OpenAI chat completion API (official, powerful method, but not free). You can override models, completion parameters, and system messages to fully customize your assistant.

  2. ChatGPTUnofficialProxyAPI - Use an unofficial proxy server to access ChatGPT's backend API in a way that bypasses Cloudflare (uses the real ChatGPT, which is lightweight, but relies on third-party servers and has rate limits).

These two methods have very similar APIs, so switching between them should be simple.

Note: We strongly recommend using ChatGPTAPI as it uses OpenAI’s officially supported API. In a future release, we may discontinue support for ChatGPTUnofficialProxyAPI .

The request principle uses the function module provided by chatgpt-api.

Online development

You can use Gitpod for online development:

Or clone to local development and follow these steps:

Install and run

Clone project 

 # clone the project
git clone https://github.com/zhpd/chatgpt-plus.git

If you don’t have a git environment, you can directly download the zip package, unzip it and enter the project directory.

Environment configuration

Node v14+

This project is developed based on Node.js and requires Node.js 14.0+ environment. Make sure you're using node >= 18 so fetch is available (or node >= 14 if you install a fetch polyfill).

ApiKey/AccessToken

This project uses the API officially provided by OpenAI and requires application for API Key and AccessToken.

  • OpenAI official registration application address: https://platform.openai.com/, scientific Internet access is required
  • Obtain ApiKey or AccessToken through other methods. Click to view

After the application is successful, fill in the APIKey and AccessToken into the chatgpt-plus/service/.env file

Optional VSCode

It is recommended to use the VSCode editor for development, install the plug-ins ESLint and Prettier , and turn on Format On Save in the settings.

Front-end web page

Environment variables-frontend

Configure the port and interface request address in the root directory .env. You can directly copy the .env.example file in the root directory for modification, and change the file name to .env)

Environment variable name default value illustrate
PORT 3000 port
NEXT_PUBLIC_API_URL http://localhost:3002 interface address
Configuration file

You can directly copy the .env.example file in the root directory for modification, and change the file name to .env 

 # port
PORT = 3000

# api url
NEXT_PUBLIC_API_URL = http://localhost:3002

run code 

 # enter the project directory
cd chatgpt-plus
# install dependency
npm install
# develop
npm run dev

After the operation is started successfully, you can open http://localhost:3000 in the browser to view the effect.

Backend services

Environment variables - backend

Configure the port, ApiKey, and AccessToken in .env in the service directory.

Environment variable name default value illustrate
PORT 3002 port
OPENAI_API_KEY - API_KEY
OPENAI_ACCESS_TOKEN - ACCESS_TOKEN
API_REVERSE_PROXY https://api.pawan.krd/backend-api/conversation acting
TIMEOUT_MS 60000 Timeout in milliseconds
Configuration file

You can directly copy the .env.example file in the service directory for modification, and change the file name to .env 

 # service/.env
# OpenAI API Key - https://platform.openai.com/overview
OPENAI_API_KEY =

# change this to an `accessToken` extracted from the ChatGPT site's `https://chat.openai.com/api/auth/session` response
OPENAI_ACCESS_TOKEN =

# Reverse Proxy default 'https://bypass.churchless.tech/api/conversation'
API_REVERSE_PROXY =

# timeout
TIMEOUT_MS = 100000

run code 

 # enter the project directory
cd chatgpt-plus
# enter the service directory
cd service
# install dependency
npm install
# develop
npm run dev

After the operation is started successfully, the backend service can run normally.

?Packaging and deployment

Docker

To deploy using Docker, you need to install the Docker environment

Docker parameter example

Use the configuration file in the docker-compose folder to pull and run it

Vercel

Use Vercel for deployment, one-click deployment

Vercel environment variable

Manual packaging

Front-end web page packaging

  • Code packaging
    • Go to the project root folder
    • Modify API_URL in the .env file in the root directory to be your actual backend interface public network address
    • Run npm install to install dependencies
    • Run npm run build to package the code
  • Run deployment
    • Copy the files in the dist folder to the directory of your website’s前端服务
    • Enter the dist folder
    • Run npm run start to start the service

Backend service packaging

  • Code packaging
    • Enter the service folder
    • Run npm install to install dependencies
    • Run npm run build to package the code
  • Run deployment
    • Copy the files in the service/dist folder to the directory of your website’s后端服务
    • Enter the service/dist folder
    • Run npm run start to start the service

Note : If you do not want to package, you can directly copy the service folder to the server and run npm install and npm run start to start the service.

Additional content

Get key API Key

Configuration file

You can access it by configuring OPENAI_API_KEY key to the backend service.env: 

 # R OpenAI API Key
OPENAI_API_KEY =

This project uses the API officially provided by OpenAI. You need to apply for an OpenAI account first.

  • OpenAI official registration application address: https://platform.openai.com/, scientific Internet access is required
  • After successful registration, obtain the API Key through https://platform.openai.com/account/api-keys, which requires scientific Internet access.

Get access tokenaccessToken

Configuration file

You can access it by configuring the OPENAI_ACCESS_TOKEN access token to the backend service.env: 

 # change this to an `accessToken` extracted from the ChatGPT
OPENAI_ACCESS_TOKEN =

You need to obtain an OpenAI access token from the ChatGPT web application. You can use one of the following methods, which require an email and password and return an access token:

    • Node.js library
    • ericlewis/openai-authenticator
    • michael-dm/openai-token
    • allanoricil/chat-gpt-authenticator
    • Python library
    • acheong08/OpenAIAuth

These libraries work with accounts that authenticate with email and password (for example, they do not support accounts authenticated with Microsoft/Google).

Alternatively, you can manually obtain an accessToken by logging into the ChatGPT web application and opening https://chat.openai.com/api/auth/session , which will return a JSON object containing your accessToken string.

Access tokens are valid for a number of days.

Note : Using a reverse proxy will expose your access token to third parties. This won't have any adverse effects, but consider the risks before using this method.

reverse proxy

Configuration file

You can override the reverse proxy by configuring the API_REVERSE_PROXY proxy address in the backend service.env: 

 # Reverse Proxy
API_REVERSE_PROXY =

Known reverse proxies run by community members include:

Reverse proxy URL author rate limit last check date
https://bypass.churchless.tech/api/conversation @acheong08 5 req / 10 seconds by IP 3/24/2023
https://api.pawan.krd/backend-api/conversation @PawanOsman 50 req / 15 seconds (~3 r/s) 3/23/2023

Note: Information on how the reverse proxy works is currently not released to prevent OpenAI from disabling access.

❓FAQ

Q: If I only use the front-end page, where do I change the request interface?

A: The API_URL field in the .env file in the root directory.

Q: There is no typewriter effect on the front end?

A: One possible reason is that after Nginx reverse proxy and the buffer is turned on, Nginx will try to buffer a certain size of data from the backend before sending it to the browser. Please try adding proxy_buffering off; after the anti-parameter, and then reload Nginx. The configuration of other web servers is the same.

?Participate and contribute

Thanks to everyone who contributed!

Star History

grateful

  • Many thanks to the project supporters and all other contributors?
  • Many thanks to the initially built reference projects @transitive-bullshit's chatgpt-api and @Chanzhaoyu's chatgpt-web for providing ideas. ?
  • Many thanks to OpenAI for creating ChatGPT

?sponsor

If you think this project is helpful to you, you can give it a Star ️ or share it with your friends. Your support is my biggest motivation!

License

MIT © zhpd

Expand
Additional Information
Related Applications
Recommended for You
Related Information All