chatgpt-connect-doc

Description

• Chatgpt-connect is a chrome extension that allows you to connect with chatgpt outside the browser. It allows you to integrate chatgpt in your application in an easy way without having to purchase any api-key.

Installation

• To use chatgpt-connect you need to :
  1. install the chrome extension
  2. Start a websocket server
  3. Enjoy !!

In details

• The way chatgpt-connect work is by connecting to a local websocket server. The websocket server should manage the way chatgpt-connect and your application communiate. For now, the server should be starting on the port 1956 (basically : ws://localhost:1956).

• When the server is up running, the chrome extension will connect to the server and then will immediately send a message indicating that it is chatgpt, the message looks like {clientID : "chatgpt"} .Then, it's up to the logic of websocket server to manage the exchange of message between applications and chatgpt-connect.

Messages for different purposes

• Chatgpt-connect accept different messages for different purposes. Those are the types of messages chatgpt-connect accept :

  1. All message should include source and destination (necessary : chatgpt) keys like this :

     {
     	"source" : "name of the sender of the message",
     	"destination" : "chatgpt"
     }

  2. To ask chatgpt:

     {
     	"source" : "name of the sender of the message",
     	"destination" : "chatGPT",
     	"conversation" : {
     		"question" : "your question",
     		"conversationId" : "conversation id or undefined",
     		"parentMessageId" : "parentMessage id or undefined",
     		"deleteAfterFinished" : "Boolean : either true or false"
     	}
     }

  3. Explanation of the keys :

     1. question : is question you want to ask chatgpt.
     2. conversationId : each converation with chatgpt has an id, so if you want to target a conversation you already started with chatgpt you have to include its id, but remember, when you do that you have to also include the parentMessageId.
     3. parentMessageId : is an id generated by chatgpt to keep tarck of conversation, when ask chatgpt a question it will generate that id (will be returned in the answer) but when you ask it in the next time and in order to keep the same conversation you must include parentMessageId of the previous message.
     4. deleteAfterFinished : used to delete the whole conversation after you retrieve the answer.

  4. To assign a title to the a conversation :

     {
     	"source": "name of the sender of the message",
     	"destination" : "chatGPT",
     	"conversation" : {
     		"conversationId" : "should necessary include a valid conversation id",
     		"title" : "The title you want to assign"
     	}
     }

The answer form

• The form the answer is the following :

  {
  "answer" : {
    "conversationData" : {
  	  "text" : "the part of the answers",
  	  "messageId": "the message id",
  	  "conversationId": "the conversation id"
  	}
  },
  "error" : "",
  "done" : "either true or false",
  "source" : "chatGPT",
  "destination" : "The sender of the question"
  
  }

• Explanation of the keys in the answer :

  1. text : is portions of the answer, the generated answer comes in portions.
  2. messageId : is the id of the generated answer.
  3. conversationId : is the id of the conversation, if you specify an id for the conversation when you send the question it will remain the same, if you didn't specify the conversation id chatgpt will generated one for your conversation.
  4. error : a message indicating that an error occured while or before generating the answer.
  5. done : tells you about the current state of the answer, if false means the answer is not complete yet,else it tells you that the answer is complete.
  6. source : is always 'chatgpt'.
  7. destination : is the one who asked the question.

Tutorial

• Here is an example of a websocket server that manage message exchange between different members (applications) and chatgpt :

//Make sure to install 'ws' library : npm install ws
import WebSocket from 'ws';

function runServer() {
  //The port should necessarily be 1956 
  const bridge = new WebSocket.Server({ port: 1956 });
  const members: { [key: string]: WebSocket } = {};

  bridge.on('connection', (client: WebSocket) => {
    client.on('message', (message: WebSocket.Data) => {
      const messageAsText = message.toString();
      const data = JSON.parse(messageAsText);

      // Here we retrieve the identifier of the client
      const clientID: string = data.clientID;

      // Those are the data related to the question
      const source: string = data.source;
      const destination: string = data.destination;
      const conversation : string = data.conversation;

      // Those are the data related to the answer
      const conversationData: any = data.conversationData;
      const error: any = data.error;
      const done: boolean = data.done;

      // The form of the answer
      const answer = {
        conversationData: conversationData,
        error: error,
        done: done,
      };

      // When the client connects to the server, we add it to the members object in order
      // to direct the messages that correspond to it.

      if (clientID) {
        members[clientID] = client;
      } else {
        const target = members[destination];
        if (target.readyState === WebSocket.OPEN) {
          const messageBody = {
            source: source,
            conversation : conversation,
            answer: answer,
          };
          target.send(JSON.stringify(messageBody));
        }
      }
    });
  });
}

export default runServer;

• Let's suppose that we want to communicate with chatgpt from a website that we created. Let's follow those stepps :

  1. create the ui of our website (let's keep it basic for now) :

     <!DOCTYPE html>
     <html lang="en" style="height: 100%;">
     <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>Chatgpt-connect</title>
     </head>
     <body style="display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100%;">
         <div>
             <input type="text" name=""  id="question" placeholder="write your question.."><button onclick="askChatgpt()">Send</button>
         </div>
         <div style="margin-top: 20px;">chatgpt-answer</div>
         <div style="width: 400px;max-height: 500px;min-height: 100px;border-style: solid;margin-top: 20px;border-radius: 13px;overflow-y: auto;padding: 10px;" id="answerArea"></div>
     </body>
     </html>

  2. Let's connect to the server : add the followig script tag to the website :

   <script>
       const questionEle = document.getElementById('question');
       const answerArea = document.getElementById('answerArea');
   
       function askChatgpt(){
           const question = questionEle.value;
           const server = new WebSocket('ws://127.0.0.1:1956');
           server.onopen = async function(){
   			//Here we tell the server that I'm connecting by this name : "applicationName" (no space accespted in the name)
               server.send(JSON.stringify({
                   clientID : "applicationName"
               }))
   
   			//Here we send the actual question to the server 
               server.send(JSON.stringify({
                   conversation : {question : question},
                   source : "applicationName",
                   destination : 'chatGPT'
               }))
   
   			//Here we listen for the upcomming messages
               server.onmessage = async function(msg){
                   //Take a look at the console to see the form of the answer
                   console.debug(msg.data);
   
                   //The whole message received
                   const data = JSON.parse(msg.data);
   
                   //The data related to the answer :
                   const answerData = data.answer;
   
                   //The data related to the conversation
                   const conversationData = answerData.conversationData;
   
                   //The actual answer's portions :
                   const answer = conversationData.text;
   
                   answerArea.innerText = answer;
                   answerArea.scrollBy(0,answerArea.scrollHeight);
               }
           }
       }
   
   </script>

• Notes :

  1. Make sure that the server is running
  2. Make sure that chatgpt-connect is connected to the server (the logo will be green if connected else it will be white).
  3. Make sure to experiment with the extension.
  4. The first two minute after the startup of google chrome, chatgpt-connect will try to connect automatically to the server.
  5. The important thing is to enjoy what you do 😊.

In action

Limitations

• You could don't stop generating an answer.
• You couldn't ask chatgpt to continue answering an incomplete answer (appears when the answer of chatgpt is too long).
• You couldn't ask chatgpt for multiple questions at the same time.
• Due to the expiry date of sessions' tokens you have to login to your account after the expiry day finished.