0x5E

30 minutes to have your own ChatGPT accessible anytime, anywhere.

Extremely fast webpage loading speed, beautiful UI, built-in prompt templates, support for long conversations, support for importing and exporting chat history, rich settings options, support for custom model parameters, compressing historical chat messages (saving token consumption), preset prompts (setting model roles), setting access codes, custom domain names, no need to bypass restrictions to access...

Updated on: December 26, 2023, 15:50

Fork the project repository#

Log in to your GitHub account, open the 🔗ChatGPT-Next-Web project homepage, and fork the code repository to your account:

If it shows like this, it means the fork was successful ✔️:

Enable Action permissions#

Enabling this permission allows your forked repository to sync updates with the upstream repository, automatically syncing once a day, and will automatically deploy updates to the website, fully automated~

You can also change the 8th line of your forked repository's .github/workflows/sync.yml file to set your desired sync time; I set it to once an hour.

Open your forked repository, click Actions, and then click the I understand my workflows, go ahead and enable them button:

Click on the left Upstream Sync, and then click the Enable workflow button:

If it shows like this, it means Action permissions have been successfully enabled ✔️:

Deploy to Vercel#

If you don't have an account, go to 🔗register for Vercel, and authorize using GitHub:

Then click on the top left to go to your account homepage and create a new project:

Click Install:

At this point, it has recognized the code repository you just forked; click Import to import:

Add Environment Variables:

• Parameter 1: Required, this is your OpenAI API Key. If you don't have one, go to 🔗create one, provided you have registered for a ChatGPT account and have the free 🔗trial credits in your account, usually $5. If you run out, just create a new account. Alternatively, you can bind a bank card (foreign currency single card) for pay-as-you-go, which will also be faster and more stable.
  Key: OPENAI_API_KEY
  Value: sk-ohtbdhgw……

• Parameter 2: Recommended, user access code. Multiple access codes should be separated by commas , without spaces.
  Key: CODE
  Value: code1,code2,code3,code4 (just an example, change according to your needs)

For more deployment parameters, see 🔗here

Click Deploy to start the deployment:

Deploying... please wait 2-3 minutes:

Congratulations!
Hooray, deployment successful ✔️:

Click Continue to Dashboard:

Click Visit, and you can access it~ (since there is no custom domain yet, you still need to bypass restrictions to access it):

Webpage loaded successfully ✔️:

Configure Custom Domain Name#

Purchase a Domain Name#

You don't have to buy it on this platform; I chose here because the pure number .xyz domain names are quite cheap.

🔗Register at Name.com and log in. If the page is in English, you can change the language at the bottom of the page:

🔗Search for the domain name you want, preferably a pure number xyz suffix, which is relatively cheap, for example: 875479.xyz, usually around 7-8 yuan. If the search is too expensive, you can try other numbers. Also, pay attention to the renewal price; if it is similar to the initial purchase price, it is acceptable, and the renewal is not expensive:

Then click Add to Cart -> Proceed to Cart -> Continue to cart:

Remove any additional items, click Next: Payment (there may be a tax of 1-2 yuan, which is normal):

Choose Alipay, check the two agreements, and click Complete Order:

The first time you place an order, a bad or Error pop-up may appear. Don't panic~ Click the OK button, and you'll return to the payment page. Just do it again (don't forget to check that any additional items have been removed):

Doing it again will show a REDIRECTING TO ALIPAY pop-up. Click the OK button, and it will redirect to the payment page. Just scan the code to pay, and after payment is complete, wait for the page to redirect:

After successfully purchasing the domain name, click on the top right 🔗My Domains, and you will see the domain name you just purchased. You can uncheck the auto-renew option:

Configure Cloudflare#

First, go to 🔗register for Cloudflare, and you can select Simplified Chinese at the top:

After registering and logging in, click Add Site:

Enter the domain name you just bought, for example, 875479.xyz, and click the Continue button:

Scroll down to the bottom of the page, select the Free plan, and click Continue:

Add DNS records. Vercel officially provides dedicated IP and CNAME addresses for domestic users:

• A type address: 76.223.126.88 or 76.76.21.98
• CNAME type address: cname-china.vercel-dns.com

When adding, make sure to set the proxy status to Off, and do the same for CNAME type:

Click the Continue button:

Then scroll down the page and copy these two Name Server addresses (do not close this page yet):

Return to 🔗Name.com My Domains page, select the domain name you just bought, and click Manage Name Servers:

Delete the default 4 addresses and replace them with the two new Name Server addresses you copied from Cloudflare:

After replacing, go back to the Cloudflare page that you were instructed not to close, and click Done, Check Name Servers, and wait for the update (approximately 10-20 minutes):

This step is not necessary, you can skip it:

You can manually check the status after a while:

Return to the main page and wait patiently until the status here changes to ✔️ Valid:

Add the Domain Name to Vercel#

Return to the Vercel console, click on the project you just deployed, and click Domains:

First, click Edit, then click Remove to delete the default domain name:

In the text box, enter the domain name you just bought, and click Add:

Choose the default option, then click Add:

Wait for the automatic refresh for a while, and you will see that the domain has been successfully added:

At this point, you can access it using the new domain~

Website Settings#

Once the website is accessible, you can make some simple settings according to your personal preferences, for example:

Others#

Note: You need to redeploy after adding or deleting access codes or changing the API Key.

How to add or delete access codes?#

Enter the deployed project, click Settings, select Environment Variables, edit CODE, and then save:

How to change the API key?#

Same as above, edit the value of OPENAI_API_KEY, and save:

How to redeploy?#

Select Deployments, and redeploy the latest deployment record:

Check Use existing Build Cache, and click Redeploy:

Trigger Prompt Templates#

Type / in the text box to trigger the built-in prompt templates:

Manually sync the repository?#

Enter your forked repository, click Sync fork. If the Update branch button appears, you can update; if this button is not present, it means your repository is already in sync with the upstream repository and does not need to be updated manually:

Project Tracking#

You can continue to 🔗follow the project to stay updated on new feature applications.

Learn to write prompts for AI#

Recommended reading:

1. Prompt Engineering Guide
2. Learn Prompting
3. Prompt Engineering

Prompt Engineering is a relatively new discipline that focuses on the development and optimization of prompts, helping users apply large language models (LLMs) in various scenarios and research fields. Mastering skills related to prompt engineering will help users better understand the capabilities and limitations of large language models.

Researchers can use prompt engineering to enhance the ability of large language models to handle complex task scenarios, such as question answering and arithmetic reasoning. Developers can design and develop powerful engineering techniques through prompt engineering to achieve efficient integration with large language models or other ecological tools.

Prompt engineering is not just about designing and developing prompts. It encompasses various skills and techniques for interacting with and developing large language models. Prompt engineering plays an important role in interacting with and integrating large language models, as well as understanding their capabilities. Users can improve the safety of large language models through prompt engineering and empower them, for example, by leveraging domain expertise and external tools to enhance the capabilities of large language models.