Have your own ChatGPT in three minutes (from development to launch)

Setsu

March 29th, 2023

View OriginalTranslated by Google

OpenAI has announced the official version of ChatGPT API, the new model behind it is gpt-3.5-turbo, which is the most advanced model of OpenAI, with faster response and cheaper price.

As developers, we still hope to integrate ChatGPT and related models into our own products and applications through the API. Unfortunately, the ChatGPT API cannot be accessed at present, and everyone knows the reason. As a result, various API anti-generation services have appeared on the Internet. We can directly access the ChatGPT API in disguise through the anti-generation services.

Even if we solve the API access problem, we need to prepare a development environment. For example, for Node.js clients, we need to prepare a Node.js environment.

Is there an easy and quick way to call ChatGPT API?

That is of course using Laf.

Laf is a completely open source one-stop cloud development platform that provides out-of-the-box cloud functions, cloud databases, object storage and other capabilities, allowing you to write code like blogging.

GitHub: https://github.com/labring/laf

If you want to quickly understand the usage of Laf, you can refer to this article: Learn laf in three minutes

Closer to home, let's start timing , and use Laf to implement your own ChatGPT in three minutes!

Prerequisite: You need to prepare a ChatGPT account and generate an API Key (you can ask Google for this step)

Cloud function teaching

First, you need to log in to laf.dev , and then create a new application.

Click the develop button to enter the development page.

Click + in the upper right corner of the NPM dependencies panel:

Then enter chatgpt and press Enter to search, select the first search result, save and restart:

After a reboot, chatgpt appeared in the custom dependencies.

Then you can create a new cloud function named send like me, and write the following content:

typescript

 plain text ANTLR4 Bash C C# css CoffeeScript CMake Dart Django Docker EJS Erlang Git Go GraphQL Groovy HTML Java JavaScript JSON JSX Kotlin LaTeX less Lua Makefile markdown MATLAB Markup Objective-C Perl PHP PowerShell .properties Protocol Buffers Python R Ruby Sass (Sass) Sass (Scss) Scheme SQL Shell Swift SVG TSX TypeScript WebAssembly YAML XML import cloud from '@lafjs/cloud' export async function main(ctx: FunctionContext) { const { ChatGPTAPI } = await import('chatgpt') const api = new ChatGPTAPI({ apiKey: cloud.env.CHAT_GPT_API_KEY }) let res = await api.sendMessage('"Chicken you are so beautiful" refers to which male artist in mainland China? Let me give you a hint, he likes singing, dancing, basketball, and Rap') console.log(res.text) return res.text}

The API Key is passed in through the environment variable CHAT_GPT_API_KEY , so we also need to create an environment variable. Click the settings icon in the lower left corner:

Select "Environment Variables" --> "Add Environment Variable" in turn, enter the name and value of the environment variable, then click "OK", and then click "Update" to restart the application.

Now click "Run" in the upper right corner to debug and run.

Perfect! Now let's try adding the ability to track context . In fact, it is also very simple. You only need to pass in the ID of the previous conversation during the conversation. The code is as follows:

typescript

 plain text ANTLR4 Bash C C# css CoffeeScript CMake Dart Django Docker EJS Erlang Git Go GraphQL Groovy HTML Java JavaScript JSON JSX Kotlin LaTeX less Lua Makefile markdown MATLAB Markup Objective-C Perl PHP PowerShell .properties Protocol Buffers Python R Ruby Sass (Sass) Sass (Scss) Scheme SQL Shell Swift SVG TSX TypeScript WebAssembly YAML XML import cloud from '@lafjs/cloud' export async function main(ctx: FunctionContext) { const { ChatGPTAPI } = await import('chatgpt') const api = new ChatGPTAPI({ apiKey: cloud.env.CHAT_GPT_API_KEY }) let res = await api.sendMessage('"Chicken you are so beautiful" refers to which male artist in mainland China? Let me give you a hint, he likes singing, dancing, basketball, and Rap') console.log(res.text) // pass in parentMessageId Tracking context res = await api.sendMessage('No, his surname is Cai, please answer again', { parentMessageId: res.id }) console.log(res.text) return res.text}

Run it and see:

That's awesome, you got my question right twice!

Well, the real timing starts now , because it is just a teaching session, so it will not be counted as time-consuming 😁

cloud function

Next, we can start to build our own ChatGPT. First, replace the function in the previous section with the following content:

typescript

 plain text ANTLR4 Bash C C# css CoffeeScript CMake Dart Django Docker EJS Erlang Git Go GraphQL Groovy HTML Java JavaScript JSON JSX Kotlin LaTeX less Lua Makefile markdown MATLAB Markup Objective-C Perl PHP PowerShell .properties Protocol Buffers Python R Ruby Sass (Sass) Sass (Scss) Scheme SQL Shell Swift SVG TSX TypeScript WebAssembly YAML XML import cloud from '@lafjs/cloud'export async function main(ctx: FunctionContext) { const { ChatGPTAPI } = await import('chatgpt') const data = ctx.body // Here you need to put the api object into cloud.shared otherwise Unable to track context let api = cloud.shared.get('api') if (!api) { api = new ChatGPTAPI({ apiKey: cloud.env.CHAT_GPT_API_KEY }) cloud.shared.set('api', api) } let res // If the parentMessageId is passed from the front end here, it means that the context needs to be tracked if (!data.parentMessageId) { res = await api.sendMessage(data.message) } else { res = await api.sendMessage(data.message, { parentMessageId : data.parentMessageId }) } return res}

This function should be well understood by now, right?

front end

What we want to implement is the Web version of ChatGPT, so we also need a front-end page. First you need to install the Laf SDK:

bash

 plain text ANTLR4 Bash C C# css CoffeeScript CMake Dart Django Docker EJS Erlang Git Go GraphQL Groovy HTML Java JavaScript JSON JSX Kotlin LaTeX less Lua Makefile markdown MATLAB Markup Objective-C Perl PHP PowerShell .properties Protocol Buffers Python R Ruby Sass (Sass) Sass (Scss) Scheme SQL Shell Swift SVG TSX TypeScript WebAssembly YAML XML $ npm install laf-client-sdk

Next, a cloud object needs to be created:

typescript

 plain text ANTLR4 Bash C C# css CoffeeScript CMake Dart Django Docker EJS Erlang Git Go GraphQL Groovy HTML Java JavaScript JSON JSX Kotlin LaTeX less Lua Makefile markdown MATLAB Markup Objective-C Perl PHP PowerShell .properties Protocol Buffers Python R Ruby Sass (Sass) Sass (Scss) Scheme SQL Shell Swift SVG TSX TypeScript WebAssembly YAML XML import { Cloud } from "laf-client-sdk"; // Create a cloud object Here you need to replace <appid> with your own App ID const cloud = new Cloud({ baseUrl: "https://<appid>.laf.dev ", getAccessToken: () => "", // No authorization is required here, fill in the blank first});

Here we look at the core code of the front end, which is very simple, just pass the content of the question and the context id into the cloud function.

typescript

 plain text ANTLR4 Bash C C# css CoffeeScript CMake Dart Django Docker EJS Erlang Git Go GraphQL Groovy HTML Java JavaScript JSON JSX Kotlin LaTeX less Lua Makefile markdown MATLAB Markup Objective-C Perl PHP PowerShell .properties Protocol Buffers Python R Ruby Sass (Sass) Sass (Scss) Scheme SQL Shell Swift SVG TSX TypeScript WebAssembly YAML XML async function send() {// The content of our question const message = question.value;let res;// Same as the cloud function logic, if there is a context id, pass in if (!parentMessageId.value) { res = await cloud.invoke ("send", { message });} else { res = await cloud.invoke("send", { message, parentMessageId: parentMessageId.value });}// Reply to our content in res.text // This is context idparentMessageId.value = res.id; }

At this point we can already send messages to ChatGPT and get a reply message.

As long as we add a little bit of detail, it can become like this:

After adding these details, the basic development work is completed, and the next step is to share the project online with your friends, and fill a cup by the way.

Speaking of going online, we should now buy a server to install Nginx, configure Nginx, resolve domain names, bind domain names...

NO NO NO I will not allow you to waste your young and beautiful life, life is short, you need laf 😃

online

Open your Laf, click on the storage interface --> click the plus sign above --> create a storage bucket with readonly permission (name it at will).

Once created, run the package command in your front-end project. I use npm run build here.

After packaging, find the packaged dist folder, and upload everything in the dist file to the storage bucket we just created like me, remember to upload intact, a file is a file, and a folder is a file folder.